JS中設置cookie，讀取cookie，刪除cookie

　　在開發時，碰到一個需求，需要保存一個表的信息（非隱私），希望下次打開還存在。於是想到用cookie，一番折騰完成。示例數據都是假的，打馬賽克是怕泄密。

　　這個表取名為Data，為Array，每一行是一個Object：

1.什么是cookie?

Cookie 是在您的計算機上存儲在小的文本文件中的數據。當 web 服務器向瀏覽器發送網頁后，連接被關閉，服務器會忘記用戶的一切。Cookie 是為了解決“如何記住用戶信息”而發明的：

• 當用戶訪問網頁時，他的名字可以存儲在 cookie 中。
• 下次用戶訪問該頁面時，cookie 會“記住”他的名字。

Cookie 保存在名稱值(name-value)對中，加上分號空格隔開，如：

　　　　　　"name1=value1; name2=value2; name3=value3"

　　當瀏覽器從服務器請求一個網頁時，將屬於該頁的 cookie 添加到該請求中。這樣服務器就獲得了必要的數據來“記住”用戶的信息，需要瀏覽器開啟本地 cookie 支持。

 　　你可以在chrome瀏覽器中點擊這里查看此某網站所有cookie：

 

2.cookie設置的語法：

document.cookie = "cookieName=something; expires=Fri Aug 16 2019 10:08:34 GMT+0800; path=/dir;domain=myblog.com; max-age=3600; secure=true";

•  cookieName=something ：name=value，cookie的名稱和值
•  expires=Fri, 31 Dec 2017 15:59:59 GMT： expires，cookie過期的日期，如果沒有定義，cookie會在對話結束時過期。日期格式為 new Date().toUTCString()
•  path=/dir: path=path (例如 '/', '/dir') 如果沒有定義，默認為當前文檔位置的路徑。
•  domain=myblog.com： 指定域(例如 'example.com'， '.example.com' (包括所有子域名), 'subdomain.example.com') 如果沒有定義，默認為當前文檔位置的路徑的域名部分。
•  max-age=3600： 文檔被查看后cookie過期時間，單位為秒
•  secure=true： cookie只會被https傳輸 ，即加密的https鏈接傳輸

　　如下示例，許多屬性是可以被省略的。注意，如果網頁比較復雜，省略了path或者domain，可能導致設置刪除會麻煩一些，因為找不到這個cookie。下圖的cnblogs.com等就是域名。

　　　

 

 

3.設置cookie

function setCookie (name, value, day) 
{
      if(day !== 0){     //當設置的時間等於0時，不設置expires屬性，cookie在瀏覽器關閉后刪除
        var expires = day * 24 * 60 * 60 * 1000;
        var date = new Date(+new Date()+expires);
        document.cookie = name + "=" + escape(value) + ";expires=" + date.toUTCString();
      }else{
        document.cookie = name + "=" + escape(value);
      }
    };

 　　若要想修改某個cookie，只需要用此種方法，給定此cookie的name值，寫入新的value值，即可覆蓋。

4.讀取cookie

function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
}　　

cookie獲取正則解析：

"(^| )" + name + "=([^;]*)(;|$)" 

(^| )匹配cookie開頭或空格（cookie鍵值對之間用分號空格隔開），也就是cookie鍵值對的開始；
接着是cookie的名稱name，（[^;]*）匹配除分號以外的任意字符，也就是cookie鍵值對的值；
最后(;|$)匹配分號或整個cookie的結尾，也就是cooke鍵值對的結尾。

5.刪除cookie

function delCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null)
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}

　　刪除某個cookie，只需要把它的過期時間調到某個之前的時間就可（減去1）。其實並沒有刪除，在瀏覽器里可以看到它，既然到期不能用了那也是實際意義上的刪除。

參數解釋：

/*
     * @param name cookie的名稱
     * @param value cookie的值
     * @param day cookie的過期時間
*/

5.本例實現

　　設置:

setCookie () { // 設置cookie
      let tempStr = ''
      for (let i = 0; i < this.Data.length; i++) { // 將每一行轉換為字符串后拼接
        tempStr = tempStr + JSON.stringify(this.Data[i]) + '#'
      }
      let date = new Date()
      date.setTime(date.getTime() + (30 * 24 * 60 * 60 * 1000))// 設置30天過期
      let expires = 'expires=' + date.toGMTString()
      document.cookie = 'DataTableCookie=' + encodeURIComponent(tempStr) + ';' + expires + ';path=/'
    },

　　獲取:

getCookie () { // 獲得cookie
      let decodedCookie = decodeURIComponent(document.cookie)
      let decodedArr = decodedCookie.split(';')[0].split('=')[1].split('#')
      decodedArr.pop()// 去掉最后一個''
      for (let i = 0; i < decodedArr.length; i++) {
        this.Data.push(JSON.parse(decodedArr[i]))
      }
    },

　　刪除:

delCookie () { // 刪除cookie
      let expires = new Date()
      expires.setTime(expires.getTime() - 1)
      let currentCookie = document.cookie
      if (currentCookie != null) {
        document.cookie = 'DataTableCookie=' + currentCookie + ';expires=' + expires.toGMTString()
      }
    },

cookie設置語法：

 

document.cookie = "cookieName=mader; expires=Fri, 31 Dec 2017 15:59:59 GMT; path=/dir;domain=myblog.com; max-age=3600; secure=true";

•  cookieName=mader ：name=value，cookie的名稱和值
•  expires=Fri, 31 Dec 2017 15:59:59 GMT： expires，cookie過期的日期，如果沒有定義，cookie會在對話結束時過期。日期格式為 new Date().toUTCString()
•  path=/dir: path=path (例如 '/', '/dir') 如果沒有定義，默認為當前文檔位置的路徑。
•  domain=myblog.com： 指定域(例如 'example.com'， '.example.com' (包括所有子域名), 'subdomain.example.com') 如果沒有定義，默認為當前文檔位置的路徑的域名部分。
•  max-age=3600： 文檔被查看后cookie過期時間，單位為秒

•  secure=true： cookie只會被https傳輸 ，即加密的https鏈接傳輸