你是我的小呀小cookie

柔光的暖阳◎ 2022-09-28 01:30 200阅读 0赞

cookie中文名：饼干，又名：小甜点。  
当然，今天不是来讲怎么去做糕点。而是浏览器的cookie。正如标题一般，它真的很小很小。由于浏览器的不同。他的大小在4-10K之间。它遵循 [同源策略][Link 1]。  
ps:在正式开始之前，简单讲一下我们的调试工具。  
一、火狐浏览器。  
1.在导航栏上面右击，然后点击“菜单栏”。  
![这里写图片描述][SouthEast]  
2.点击菜单栏上面“工具” 点击“安全” “查看cookie”由于我是本地预览所以 没有域名标识。可以看到我的cookie已经保存下来了。  
![这里写图片描述][SouthEast 1]  
二、chrome浏览器  
1.特此声明：使用chrome浏览器在本地预览时候，不能弹出或者输出cookie的值。  
![这里写图片描述][SouthEast 2]  
2.必须在服务器环境下面，才能弹出值。  
![这里写图片描述][SouthEast 3]  
3.在chrome下面查看cookie。那就简单的多了。点击地址栏前面的感叹号 点击正在使用 选择要查看的cookie值。就可以看见详细的信息了。  
![这里写图片描述][SouthEast 4]  
准备工作完毕后，开始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了。  
![这里写图片描述][SouthEast 5]  
因为我设置了10s的过期时间。这个就可以清晰的看到过期。不过比较麻烦的是，我们每次都需要进行时间单位的换算。很是麻烦！可以用“expires=time”。  
以下是我设置一天后过期。但是由于浏览器的不同。却出现了不同的过期日期。火狐下面可以正常显示，**但是chrome貌似多给我加了几个小时。**

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

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

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

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

document.cookie='Name=szy; expires= -1';

1.  获取cookie  
    ![这里写图片描述][SouthEast 8]  
    从弹出的图中，我们可以分析出cookie连接的格式。key=value; key=value; …..注意的是分号后面有个空格。

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

//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.[欢迎戳我][Link 2]

[Link 1]: http://baike.baidu.com/link?url=8pMA12KcEEhn3SIcDbK0fAdv4p7SAAJRo0kJME3DbZwZ9Fl7vdIza4cdIs22yK7g-Xin8Qjg_h9T6R4AydUSpgeTSeIv7Wl7gdAg_5gecqY1hxYADr2uUq5W2XSA800w
[SouthEast]: /images/20220708/40287a7ea0fb445c8a5129e2e30c007e.png
[SouthEast 1]: /images/20220708/2130b6ae5bbb413696aac33e21ccd8da.png
[SouthEast 2]: /images/20220708/3abf6f8949c04dc1b6eb043c3188d8ee.png
[SouthEast 3]: /images/20220708/3425596940404620b1b4550238d16dee.png
[SouthEast 4]: /images/20220708/7d486a199def40f29f70e372262c4b7c.png
[SouthEast 5]: /images/20220708/b8cf298ecfa54c5aaba241f8149896da.png
[SouthEast 6]: /images/20220708/1bc528d61cc8424881555adc022dab0c.png
[stackoverflow]: http://stackoverflow.com/questions/8467042/turn-cookie-expire-in-minutes-hours-that-expires-in-days
[SouthEast 7]: /images/20220708/ec8d068c6d494cfa99a90c0e3da4c821.png
[SouthEast 8]: /images/20220708/b5b554d0854d4e27866ee329553d5dfc.png
[Link 2]: http://szy1000.oschina.io/cookie/demo.html