js中操作cookie

js中操作cookie

cookie : 存储数据，可以设置存储时间的，当用户访问了某个网站（网页）的时候，我们就可以通过cookie来向访问电脑上存数据。

跟我们的变量一样，不过变量在关闭浏览器的时候会消失，cookie如果设置了到期时间即使关闭浏览器也不会消失。

1. 不同的浏览器存放的cookie位置不一样，也是不能通用的
2. cookie的存储是以域名形式进行区分的
3. cookie的数据可以设置名字 例 : username=”zhou”
4. 一个域名下存放的cookie的个数是有限制的，不同的浏览器不同版本存放的个数不一样
5. 每个cookie存放的内容大小也是有限制的，不同的浏览器不同版本存放大小不一样

document.cookie = 'username=zhou';  //存储一个cookie，由于没有设置有效期，关闭浏览器就会消失（不是关闭选项卡）
alert(document.cookie);             //username=zhou

document.cookie = 'username=zhou';  
document.cookie = 'age=21';
//存放两个cookie,他们之间通过分号+空格的形式隔开
alert(document.cookie);             //username=zhou; age=21

我们通过document.cookie来获取当前网站下的cookie的时候，得到的是字符串形式的值，它包含了当前网站下的所有cookie值，他们之间通过分号+空格的形式隔开。

如果我们想长时间存放一个cookie。需要在设置这个cookie的时候同时给他设置一个过期的时间。
cookie默认是临时存储的，当浏览器关闭进程（不是关闭选项卡）的时候cookie就会消失。

//document.cookie = '名称=值;expires='+字符串格式的时间;
var oDate = new Date();
oDate.setDate( oDate.getDate() + 5 );
document.cookie = 'username=zhou;expires=' + oDate.toGMTString();
//这句设置cookie值在五天后过期
//加toGMTString()是把时间转换为时间字符串，如果不转换的话在ie下面会有问题。

到这里还没有结束，如果我们的值中存在特殊字符，比如 ‘zhou\n你好呀’，这样的话显示的时候只显示\n前面的，\n后面的不会显示。

常用的办法是将值进行URI编码，取得时候进行解码。

alert( encodeURI('zhou\n你好呀') );
alert( decodeURI('zhou%0A%E4%BD%A0%E5%A5%BD%E5%91%80') );

getCookie

JavaScript中目前不能通过document.cookie.username这样的形式来得到指定的cookie，在这里我们可以封装一个方法来取得指定的cookie。

function getCookie(key){
    var arr1 = document.cookie.split('; ');//这里是分号+空格分隔
    for( var i = 0 , len = arr1.length ; i < len ; i++ ){
        var arr2 = arr1[i].split('=');
        if( arr2[0] == key ){
            return decodeURI(arr2[1]);
        }
    }
}
getCookie('age');//21

setCookie

如果觉得设置cookie的步骤有点繁琐，我们也可以对cookie的设置进行封装。

function setCookie(key,value,time){
    var oDate = new Date();
    oDate.setDate( oDate.getDate() + time );
    document.cookie = key +'=' + value + ';expires=' + oDate.toGMTString();
}
setCookie('sex','男',10);//sex='男'存cookie十天

removeCookie

封装一个删除cookie的方法，其实也不是删除，只是将cookie的有效时间更改为昨天而已。

function removeCookie(key){
    setCookie(key,'',-1);//调用上面的setCookie方法
}
removeCookie('sex');