js cookie

前端技术发展日新月异，自从html5出来之后，就有很多一部分人立即转投了webstorage的怀抱。在这个连天猫都舍弃了ie8的年代，ie8及以下终将被前端的执念所淘汰。

但是即便有了webstorage也不能忘记了陪伴了前端一路走来的cookie，况且，人家还没有被淘汰。

cookie的大多数知识都可以直接看w3school的网站上面找到。这是网址：http://www.w3school.com.cn/js/js_cookies.asp。

---

什么是cookie?

cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。

有关cookie的例子：

名字 cookie

        当访问者首次访问页面时，他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时，他们会收到类似 "Welcome John Doe!" 的欢迎词。而名字则是从 cookie 中取回的。

密码 cookie

        当访问者首次访问页面时，他或她也许会填写他/她们的密码。密码也可被存储于 cookie 中。当他们再次访问网站时，密码就会从 cookie 中取回。

日期 cookie

        当访问者首次访问你的网站时，当前的日期可存储于 cookie 中。当他们再次访问网站时，他们会收到类似这样的一条消息："Your last visit was on Tuesday August 11, 2005!"。日期也是从 cookie 中取回的。

---

 

上面是对cookie的简单介绍，下面会讲述cookie如何使用。

首先，如果对cookie知识要求不高，只是想快速的上手，那么完全可以直接使用jquery.cookie.js这个jquery插件来直接进行cookie的操作。（如果你想彻底研究一下cookie的话绝大部分操作的时候，可以研究一下人家的组件。代码不多只有31行，可以仔细的品味一下。）

然后，看一下w3school上cookie操作的代码。

// 创建一个cookie
function setCookie (c_name,value,expiredays) {
    var exdate=new Date();
    exdate.setDate(exdate.getDate()+expiredays);
    document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}

上面是一个封装好的新建cookie的方法，需要三个参数，cookie名称、值、失效日期。我们可以很明显的看到新建一个cookie其实等于就一句代码，document.cookie = "名字" + escape(值) + ""或者失效日期的GMT字符串即可。

这里出现了一个很重要的属性expires，这个属性代表当前名称的cookie需要在什么时候清除。这个在后面删除的时候还会出现。

 

// 获取cookie的值
function getCookie (c_name) {
    if (document.cookie.length>0) {
        c_start=document.cookie.indexOf(c_name + "=");
        if (c_start!=-1) {
            c_start=c_start + c_name.length+1;
            c_end=document.cookie.indexOf(";",c_start);
            if (c_end==-1) 
                c_end=document.cookie.length;
            return unescape(document.cookie.substring(c_start,c_end));
        } 
    }
    return "";
}

这个是一个根据cookie字段名称获取值的方法。

这里可以先讲一下cookie的组成情况，获取所有cookie可以使用document.cookie来获取，下面是一段我自己电脑上的cookie片段：

firstGuide=true; name=neuscx; a=1; justForTry=1; needInfo={%22userName%22:%22neuscx%22%2C%22password%22:%22e10adc3949ba59abbe56e057f20f883e%22%2C%22rememberMe%22:true%2C%22token%22:%22%22}

可以看到cookie是一段string类型的字符串，以"; "来将每一个分割开来。所以需要自己进行拆分，简单拆分可以使用split("; ")来做到。上面代码是用了两次indexof判断来判断当前拆分出来的字符串中值在string中的具体位置所在。

具体解释，先拼接 "name="这个字段，用indexof找到所在的index，这个位置往后加上name字段的长度，再加上1，就是value开始的位置。再从这个位置后开始寻找";"的位置，如果有就到该位置结束，没有的话即为最后一个。

通过这两个index就可以选取到value值，然后返回既好。

 

// 删除相对应的cookie
function delCookie(name) {
    var exp = new Date();
    exp.setTime (exp.getTime() - 1);
    var cval = GetCookie (name);
    document.cookie = name + "=" + cval + "; expires="+ exp.toGMTString();
}

在w3school上并没有删除cookie的具体讲述，但是我在网上找了一下，貌似没有直接删除cookie的方法。也不可以直接把那些字段删除掉。这个是网上（比较）公认的方法，逻辑是将当前名字的cookie重新设置一下，将过期时间expires设为当前时间-1，也就是立即失效。然后当前cookie就会消失，实现删除效果。

 

cookie的大致知识就这么多了，大致就是这么使用的，欢迎指正。