浅谈JS-cookie，你是香甜可口的小点心吗？

引言：

想必大家一定听过或看过浏览器cookie，早在nokia雄霸天下、我们还不太明白浏览器的时候，cookie就已经悄悄地存在于浏览器的“设置选项”中了。当时它的用途仅仅是让你选择是否“清除”。年少的我很纳闷，这“甜点”（cookie在英语中的解释）是什么意思？

光阴如梭，直到接触到web开发才发现自己以前对cookie的理解是多么可笑，哈哈哈。。。

cookie在浏览器中是什么作用呢？果断找度娘，cookie用来存储网站或用户的数据、行为等信息。比如：用户设置网站的主题，网站将相关的数据记录存在cookie中；用户登录帐户后，点击“记住用户名”，可以使用cookie来记录；网站打开有个弹窗，其中有一个“不再提示”的选项，果断 get√，下次打开就不会出现这个弹窗。。。等等的小例子，大家明白其中的作用吧！

揭露秘密的时刻：

我们来看看你的浏览器下 baidu.com 的cookie吧！

聪明的少年们很快就能注意到，cookie是document下的一个方法。根据经验，document.cookie 可以读取浏览器的cookie值，是不也可以添加或设置cookie值呢？

（注意点：想在本地测试测试浏览器cookie，推荐使用firefox浏览器，其他浏览器可能没有效果。）

cookie的大小依据不同的浏览器而定，一般为4KB，而且服务器语言如PHP，Java等也能操作cookie。

给网站添加cookie：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 </head>
 6 <body>
 7 <script>
 8 window.onload = function() {
 9     addCookie();
10 }
11 
12 function addCookie() {
13     document.cookie = "123=123";
14     document.cookie = "abc=abc";
15 }
16 </script>
17 </body>
18 </html>

我们来看看浏览器下的变化吧！

当我们添加cookie是，语句中的 " = " 其实有两个含义：

当cookie名称相同是，为覆盖的作用
当cookie名称不同时，为添加操作

浏览器下出现了两条cookie记录，每条记录之间以 '; '分隔（记得分号后面必须要有空格）。在firebug展现的表格中有“过期时间”和“最长有效期”两项值得我们注意。

设置cookie的有效期：在添加浏览器cookie时，有这样的一个参数来设置cookie的有效期（也可以叫做过期时间）：expires

代码走起：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 </head>
 6 <body>
 7 <script>
 8 window.onload = function() {
 9     setCookie('name', 'value', 10);
10 }
11 
12 function setCookie(name, value, expiredays){
13     var exdate=new Date();
14     exdate.setDate(exdate.getDate() + expiredays);
15     document.cookie=name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
16 }
17 </script>
18 </body>
19 </html>

上面的代码可以方便的实现本站点下cookie的创建、修改、删除的功能，那么我们如何获取具体的cookie值呢？

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 </head>
 6 <body>
 7 <input type="text" id="input" placeholder="获取cookie值" /> <button id="getCookie">获取cookie值</button>
 8 <p id="values"></p>
 9 <script>
10 window.onload = function() {
11     setCookie('name01', 'value01', 10);
12     setCookie('name02', 'value02', 10);
13     setCookie('name03', 'value03', 10);
14     setCookie('name04', 'value04', 10);
15 
16     document.getElementById("getCookie").onclick = function(){
17         var inputValue = document.getElementById('input').value; 
18         document.getElementById('values').innerHTML = '';
19         if(inputValue!=''){
20             getCookieValue(inputValue);
21         }else{
22             document.getElementById('values').innerHTML = "<span style='color:red;'>输入错误</span>";
23         }
24     };
25 }
26 function getCookieValue(cName){
27     var cookieArry = document.cookie.split("; ");
28     for (var i = 0; i < cookieArry.length; i++) {
29         var cookieSubArry = cookieArry[i].split("=");
30         if(cookieSubArry[0]==cName){
31             document.getElementById('values').innerHTML = cookieSubArry[1];
32         }
33     };
34 }
35 
36 function setCookie(name, value, expiredays){
37     var exdate=new Date();
38     exdate.setDate(exdate.getDate() + expiredays);
39     document.cookie=name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
40 }
41 </script>
42 </body>
43 </html>

简单分析：

我们使用 document.cookie.split("; "); 来分割获取的cookie记录，在 for 循环中二次切割每一条 cookie记录，这样的话我们就能够轻松地获取想要的啦！