Js 操作Cookie

• 1.什么是Cookie?
• 2.为什么要使用Cookie?
• 3.JS操作Cookie
  3.1.创建Cookie
  3.2.读取Cookie
  3.3.删除Cookie
• 4.轻量级cookie插件
  4.1.使用方法
  4.2.创建cookie
  4.3.获取cookie
  4.4.删除cookie

1. 什么是Cookie?

Cookie 是一种发送到客户浏览器的文本串句柄，并且存储于用户硬盘中。当一个用户通过 HTTP 协议访问一个服务器的时候，这个服务器会将一些 Key/Value 键值对返回给客户端浏览器，并给这些数据加上一些限制条件，在条件符合时这个用户下次访问这个服务器的时候，数据又被完整地带回给服务器。

2. 为什么要使用Cookie?

因为HTTP协议是无状态协议，一旦本次会话结束，客户端与服务器的连接就会关闭，下次需要重新建立连接，服务器就无法跟踪上次会话了。即用户A在购物车里添加了一件商品，下次再次添加商品，服务器无法判断是用户A还是用户B在操作，为了跟踪会话，需要使用Cookie。

3. JS 操作Cookie

3.1 创建Cookie

function setCookie(cname,cvalue,exdays)
{
   var date = new Date();
   date.setDate(date.getDate()+exdays);//getDate返回一个月中的某一天
   var expires = "expires="+date.toUTCString();//根据世界时 (UTC) 把 Date 对象转换为字符串
  document.cookie = cname + "=" + cvalue + "; " + expires;  
}

3.2 读取Cookie

function getCookie(name)
{
  if (document.cookie.length>0)
  {
    start=document.cookie.indexOf(name + "=")//返回某指定值在字符串中首次出现的位置。
    if (start!=-1)
    { 
      start = start + name.length+1; 
      end=document.cookie.indexOf(";",start)//返回';'在字符串中首次出现的位置。
      if (end ==-1) 
         end = document.cookie.length;
         unescape(document.cookie.substring(start,end));
      } 
  }
    return ""
}

3.3 删除Cookie

document.cookie = "name=; expires=Thu, 01 Jan 1970 00:00:00 GMT"; //设置 expires 参数为以前的时间即可

4. 轻量级cookie插件

jquery.cookie.js是一个轻量级的cookie插件，可以写入，读取，删除

4.1 使用方法

需要先引入 jquery

<script type="text/javascript" src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>

<script type="text/javascript" src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> 

4.2 创建cookie

//创建一个会话cookie，所创建的cookie有效期默认到用户浏览器关闭止
$.cookie("name","AmberYLopez");

//创建一个持久cookie，指明时间时，故称为持久cookie，并且有效时间为7天
$.cookie("name","AmberYLopez",｛expires:7｝);

//创建一个持久并带有效路径的cookie
//如果不设置有效路径，在默认情况下，只能在cookie设置当前页面读取该cookie，cookie的路径用于设置能够读取cookie的顶级目录。
$.cookie("name","AmberYLopez",｛expires:7,path:'/'｝);

//创建一个持久并带有效路径和域名的cookie
//domain：创建cookie所在网页所拥有的域名；secure：默认是false，如果为true，cookie的传输协议需为https；
//raw：默认为false，读取和写入时候自动进行编码和解码（使用encodeURIComponent编码，使用decodeURIComponent解码），关闭这个功能，请设置为true。
$.cookie("name","AmberYLopez",｛expires:7,path:'/',domain:'chuhoo.com',secure:false,raw:false｝);

拓展 : domain参数

4.3 获取cookie

$.cookie("name"); 
 //如果存在则返回AmberYLopez，否则返回null。

4.4 删除cookie

$.cookie("name",null);

如果觉得我写的还不错,请踩踩demos合集,这是一些常用效果的合集.持续更新ing.