你是我的小呀小cookie

cookie中文名:饼干,又名:小甜点。
当然,今天不是来讲怎么去做糕点。而是浏览器的cookie。正如标题一般,它真的很小很小。由于浏览器的不同。他的大小在4-10K之间。它遵循 同源策略
ps:在正式开始之前,简单讲一下我们的调试工具。
一、火狐浏览器。
1.在导航栏上面右击,然后点击“菜单栏”。
这里写图片描述
2.点击菜单栏上面“工具” 点击“安全” “查看cookie”由于我是本地预览所以 没有域名标识。可以看到我的cookie已经保存下来了。
这里写图片描述
二、chrome浏览器
1.特此声明:使用chrome浏览器在本地预览时候,不能弹出或者输出cookie的值。
这里写图片描述
2.必须在服务器环境下面,才能弹出值。
这里写图片描述
3.在chrome下面查看cookie。那就简单的多了。点击地址栏前面的感叹号 点击正在使用 选择要查看的cookie值。就可以看见详细的信息了。
这里写图片描述
准备工作完毕后,开始cookie。
cookie属于document对象上面的一个属性。所以设置cookie。只需要

document.cookie='name=szy';
document.cookie='password=123456'; 

值得一提的是:”=“ 正常情况下都是赋值,而且后面的灰覆盖掉前面的。但是这里的”=“ 可以理解为添加。
请问:如果这样写 会弹出什么呢?请大家自行验证!

document.cookie='name=szy';
document.cookie='name=xxx';
alert(document.cookie);

1.设置cookie过期时间
正常的cookie的生命周期,是关闭浏览器之后,就会消失。如果想设置过去时间的话。我们就需要要cookie的另外一个属性。”max-age = seconds”。还有其他的属性,请参见大犀牛的586页。

document.cookie='name2=szy; max-age=10s';

这样写,当浏览器关闭的时候,就不会立马清理cookie了。
这里写图片描述
因为我设置了10s的过期时间。这个就可以清晰的看到过期。不过比较麻烦的是,我们每次都需要进行时间单位的换算。很是麻烦!可以用“expires=time”。
以下是我设置一天后过期。但是由于浏览器的不同。却出现了不同的过期日期。火狐下面可以正常显示,但是chrome貌似多给我加了几个小时。

var oDate=new Date();
oDate.setDate(oDate.getDate()+1);
document.cookie='Name=szy; expires='+oDate;

由于截图时间可能有点误差。
这里写图片描述
功夫不负有心人,总有让我找到原因了。 感谢stackoverflow 让我在别人的提问中找到了答案。toUTCString()

var oDate=new Date();
oDate.setDate(oDate.getDate()+1);
document.cookie='Name=szy; expires='+oDate.toUTCString();

这里写图片描述
总算设置cookie的过期时间总算解决问题了。
2. 删除cookie
删除cookie的话,那就更简单了。只要指定好expires的值为 -1;这样的话,就会被立即删除。

document.cookie='Name=szy; expires= -1';
  1. 获取cookie
    这里写图片描述
    从弹出的图中,我们可以分析出cookie连接的格式。key=value; key=value; …..注意的是分号后面有个空格。
function getCookies(name) {
    var arr=document.cookie.split('; ');
    for(var i=0;i<arr.length;i++){
        var arr2=arr[i].split('=');
        if(arr2[0]==name){
            return arr2[1];
        }
    }
    return '';
}

为了 方便大家,我将封装好的函数一并放到下面:

//setCookie
function setCookie(name,value,iDay) {
    var oDate=new Date();
    oDate.setDate(oDate.getDate()+iDay);
    document.cookie=name+'='+value+';expires='+oDate.toUTCString();
}

//removeCookie
function removeCookie(name){
    setCookie(name,1,-1)
}

//getCookies
function getCookies(name) {
    var arr=document.cookie.split('; ');
    for(var i=0;i<arr.length;i++){
        var arr2=arr[i].split('=');
        if(arr2[0]==name){
            return arr2[1];
        }
    }
    return '';
}

cookie一般都是后台工作人员去设置的。但是前端人员了解一下也无妨。
码云上面,有我一个简单的demo.欢迎戳我

发布了47 篇原创文章 · 获赞 61 · 访问量 13万+

猜你喜欢

转载自blog.csdn.net/u011456552/article/details/60986778