• 1.什么是Cookie?
• 2.為什么要使用Cookie?
• 3.JS操作Cookie
  3.1.創(chuàng)建Cookie
  3.2.讀取Cookie
  3.3.刪除Cookie
• 4.輕量級cookie插件
  4.1.使用方法
  4.2.創(chuàng)建cookie
  4.3.獲取cookie
  4.4.刪除cookie

1. 什么是Cookie?

Cookie 是一種發(fā)送到客戶瀏覽器的文本串句柄，并且存儲于用戶硬盤中。當(dāng)一個用戶通過 HTTP 協(xié)議訪問一個服務(wù)器的時候，這個服務(wù)器會將一些 Key/Value 鍵值對返回給客戶端瀏覽器，并給這些數(shù)據(jù)加上一些限制條件，在條件符合時這個用戶下次訪問這個服務(wù)器的時候，數(shù)據(jù)又被完整地帶回給服務(wù)器。

2. 為什么要使用Cookie?

因為HTTP協(xié)議是無狀態(tài)協(xié)議，一旦本次會話結(jié)束，客戶端與服務(wù)器的連接就會關(guān)閉，下次需要重新建立連接，服務(wù)器就無法跟蹤上次會話了。即用戶A在購物車里添加了一件商品，下次再次添加商品，服務(wù)器無法判斷是用戶A還是用戶B在操作，為了跟蹤會話，需要使用Cookie。

3. JS 操作Cookie

3.1 創(chuàng)建Cookie

function setCookie(cname,cvalue,exdays)
{
   var date = new Date();
   date.setDate(date.getDate()+exdays);//getDate返回一個月中的某一天
   var expires = "expires="+date.toUTCString();//根據(jù)世界時 (UTC) 把 Date 對象轉(zhuǎn)換為字符串
  document.cookie = cname + "=" + cvalue + "; " + expires;  
}

3.2 讀取Cookie

function getCookie(name)
{
  if (document.cookie.length>0)
  {
    start=document.cookie.indexOf(name + "=")//返回某指定值在字符串中首次出現(xiàn)的位置。
    if (start!=-1)
    { 
      start = start + name.length+1; 
      end=document.cookie.indexOf(";",start)//返回';'在字符串中首次出現(xiàn)的位置。
      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"; //設(shè)置 expires 參數(shù)為以前的時間即可

4. 輕量級cookie插件

jquery.cookie.js是一個輕量級的cookie插件，可以寫入，讀取，刪除

4.1 使用方法

需要先引入 jquery

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

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

4.2 創(chuàng)建cookie

//創(chuàng)建一個會話cookie，所創(chuàng)建的cookie有效期默認到用戶瀏覽器關(guān)閉止
$.cookie("name","AmberYLopez");

//創(chuàng)建一個持久cookie，指明時間時，故稱為持久cookie，并且有效時間為7天
$.cookie("name","AmberYLopez",｛expires:7｝);

//創(chuàng)建一個持久并帶有效路徑的cookie
//如果不設(shè)置有效路徑，在默認情況下，只能在cookie設(shè)置當(dāng)前頁面讀取該cookie，cookie的路徑用于設(shè)置能夠讀取cookie的頂級目錄。
$.cookie("name","AmberYLopez",｛expires:7,path:'/'｝);

//創(chuàng)建一個持久并帶有效路徑和域名的cookie
//domain：創(chuàng)建cookie所在網(wǎng)頁所擁有的域名；secure：默認是false，如果為true，cookie的傳輸協(xié)議需為https；
//raw：默認為false，讀取和寫入時候自動進行編碼和解碼（使用encodeURIComponent編碼，使用decodeURIComponent解碼），關(guān)閉這個功能，請設(shè)置為true。
$.cookie("name","AmberYLopez",｛expires:7,path:'/',domain:'chuhoo.com',secure:false,raw:false｝);

拓展 : domain參數(shù)

4.3 獲取cookie

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

4.4 刪除cookie

$.cookie("name",null);

如果覺得我寫的還不錯,請踩踩demos合集,這是一些常用效果的合集.持續(xù)更新ing.