JavaScript Cookie常用设置

cookie是一种早期的客户端存储机制，起初是针对服务器端脚本设计使用的，只适合存储少量文本数据。从最底层来看，作为HTTP协议的一种扩展实现它。cookie数据会自动在Web浏览器和Web服务器之间传输，因此服务端脚本就可以读、写存储在客户端的cookie的值。任何以cookie形式存储的数据，不论服务器端是否需要，每一次HTTP请求都会把这些数据传输到服务器端。cookie目前仍然被客户端程序员大量使用的一个重要原因是：所有新旧浏览器都支持它。但是，随着WebStorage的普及，cookie终将会回归到最初的形态：作为一种被服务端脚本使用的客户端存储机制。

简单点说:
　　Cookie 用于存储 web 页面的用户信息。

　　　Cookie 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

Cookie 的作用就是用于解决 "如何记录客户端的用户信息":

当用户访问 web 页面时，他的名字可以记录在 cookie 中。
在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

Tip：通常情况下，cookie中存值都是通过键值对的形式存储。例如"name=zhangsan"。当浏览器从服务器上请求 web 页面时，属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

浏览器默认打开Cookie功能。window.navigator.cookieEnabled属性返回一个布尔值，表示浏览器是否打开Cookie功能。

 console.log(window.navigator.cookieEnabled);//true

可以通过浏览器的一些设置将cookie功能关闭:

下面来说一下cookie数据的增删改查操作。

首先先来说下通过JavaScript添加cookie。

通过JavaScript添加Cookie

添加Cookie可以通过document.cookie = "";的形式来进行添加，具体写法可以参照下面的写法：

 document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

在上面的代码中，document.cookie 可以直接在等号右侧使用字符串赋值，在字符串当中，最少存在一个参数，最多可以同时设置三个参数：

"username=John Doe" 这是第一个参数，表示着要存储的cookie的key和value值。
"expires=Thu ...." 这是第二个参数，表示当前存储cookie的生命周期，也就是存储的cookie可以存活的时间。
"path=/" 这是第三个参数，表示cookie生效的页面，这样写表示在当前页面生效。

当然，我们在添加cookie的时候，也可以只设置一个参数。

使用JavaScript读取Cookie

在JavaScript中，我们并没有办法像操作数组那样，可以很方便的操作Cookie，我们只能够直接打印document.cookie。将会把目前存储的所有的Cookie全部以字符串的形式返回。cookie1=value; cookie2=value; cookie3=value; 格式类似于上面的这一段内容。

使用JavaScript修改Cookie

在JavaScript中想要修改Cookie，可以按照添加Cookie的方式进行修改，等同于进行了覆盖。

使用JavaScript 删除Cookie

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:

 document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

注意：删除时不必指定 cookie 的值。

下面是三个在网上搜集到的函数，主要是设置cookie,获取cookie和检测cookie。

 function setCookie(cname,cvalue,exdays)

 {

   var d = new Date();

   d.setTime(d.getTime()+(exdays*24*60*60*1000));

   var expires = "expires="+d.toGMTString();

   document.cookie = cname + "=" + cvalue + "; " + expires;

 }

 function getCookie(cname)

 {

   var name = cname + "=";

   var ca = document.cookie.split(';');

   for(var i=0; i<ca.length; i++)

   {

     var c = ca[i].trim();

     if (c.indexOf(name)==0) return c.substring(name.length,c.length);

   }

   return "";

 }

 function checkCookie()

 {

   var username=getCookie("username");

   if (username!="")

   {

     alert("Welcome again " + username);

   }

   else

   {

     username = prompt("Please enter your name:","");

     if (username!="" && username!=null)

     {

       setCookie("username",username,365);

     }

   }

 }