0. 前言
在我們?yōu)g覽網站，可能會登錄一些網頁，登錄密碼，ID，等信息，而你登錄一次之后，網站通過讀取Cookie，得知你的相關信息，不用再次輸入密碼，ID等，就能登錄了。
登錄.png
1. 簡介
cookie 是在運行在客戶端的，是存儲訪問者的計算機的變量。每當同一臺計算機通過瀏覽器請求某個頁面時，就會發(fā)送這個 cookie。可以使用 JavaSciipt 來創(chuàng)建和取回 cookie 的值，cookie是以鍵值對的形式保存的，即 key=value的格式。各個 cookie 之間一般是以"；"分隔。
2. 優(yōu)點和缺點
2.1 優(yōu)點
- 可配置 cookie 到期時間
- 數(shù)據(jù)的持久性，可以設置它的存在時間。
2.2 缺點
- cookie 可能被禁用，當用戶非常注重個人隱私保護時，他很可能禁用瀏覽器的 cookie 功能。
- cookie 是與瀏覽器相關的，這意味著即使訪問的是同一個頁面，不同的瀏覽器之間所保存的 cookie 也是不能互相訪問的。
- cookie 可能被刪除，以為每個 cookie都是硬盤上的一個文件，因此很有可能被用戶刪除。
- cookie 安全性可能不夠高，所有的 cookie 都是以純文本的形式記錄于文件中，因此如果要保護用戶名密碼等信息時，最好事先經過加密處理。
3. 操作 cookie
3.1 設置 cookie
- 在 cookie 名和值中不能使用分號(；)、逗號(，)、等號(=)以及空格。如何來儲存這些值？
- 方法是用 escape() 函數(shù)進行編碼，它能將一些特殊符號使用十六進制表示，例如空格將會編碼為"20%"，從而可以存在于 cookie 值中，而且可以避免中文亂碼的出現(xiàn)。
轉換前
document.cookie="str="+escape("I Love H5");
轉換后
document.cookie="str=I%20Love%20H5";
轉換后.png
3.2 獲取 cookie
document.cookie="name=liu";
var cookie = document.cookie;
console.log(cookie);//輸出 name=liu
3.3 設置 cookie 過期時間
如果不設置的話，則變成會話存儲(關閉瀏覽器就沒了)
//每次設置cookie的時候，需要設置一個過期時間
var date = new Date();
//設置10天后過期
date.setTime(date.getDate() + 10 * 24 * 3600 * 1000);
//5秒之后過期
date = new Date();
date.setTime(date.getTime() + 5 * 1000);
document.cookie = "sex=" + escape("女") +";expires="+date.toGMTString();
3.4 刪除 cookie
刪除 cookie 只需要設置某個 cookie的過期時間指定為過去時間即可
//立即刪除cookie（就是設置過期時間為負數(shù)即可）
date = new Date();
date.setTime(0);
document.cookie = "name=xxx;expires=" + date.toGMTString();
4. 封裝一個 cookie 庫
封裝之后可以實現(xiàn)：
- 添加cookie 或 修改 cookie
- 批量增加
- 獲取某個cookie的值
- 立即刪除某個cookie的值
5. 封裝的代碼
var Cookie = {
// 添加cookie 或 修改 cookie
// key:鍵
// value:值
// expressDay:過期時間（單位：天）
setCookie : function (key,value,expiresDay) {
var date = new Date();
date.setTime(date.getTime() + expiresDay * 24 * 3600 * 1000);
//為了測試方便先寫死10秒后過期
// date.setTime(date.getTime() + 10 * 1000);
document.cookie = key + "=" + escape(value) + ";expires=" + date.toGMTString();
},
//批量增加
setCookies : function (cookieobj,expiresDay) {
var date = new Date();
date.setTime(date.getTime() + expiresDay * 24 * 3600 * 1000);
for (var tempProp in cookieobj) {
document.cookie = tempProp + "=" + escape(cookieobj[tempProp]) + ";expires=" + date.toGMTString();
}
},
//獲取某個cookie的值
getCookie : function (key) {
//先按照分號 + 空格 切割cookie串
var cookie = document.cookie;
var cookieArr = cookie.split("; ");
//遍歷數(shù)組得到每一組cookie
for (var tempCookie of cookieArr) {
//每組cookie按照等號去切割
var keyAndValueArr = tempCookie.split("=");
if(keyAndValueArr[0] == key) {
//需要解碼
return unescape(keyAndValueArr[1]);
}
}
},
//立即刪除某個cookie
delCookie : function (key) {
this.setCookie(key,"", -10);
}
}
6. 測試 cookie 封裝庫
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入外部文件-->
<script type="text/javascript" src="cookie.js"></script>
</head>
<body>
<script type="text/javascript">
Cookie.setCookie("name","小雪",10);
Cookie.setCookie("age","18",10);
console.log(Cookie.getCookie("name"));
Cookie.delCookie("name");
Cookie.setCookies({
age : 18,
sex : "女"
}, 10);
</script>
</body>
</html>
6.1 添加
Cookie.setCookie("name","小雪",10);
Cookie.setCookie("age","18",10);
添加.png
6.2 獲取
console.log(Cookie.getCookie("name"));//輸出 小雪
獲取.png
6.3 刪除
Cookie.delCookie("name");
刪除.png
6.4 批量添加
Cookie.setCookies({
age : 18,
sex : "女"
}, 10);
批量添加.png
7. 結束語
在這里說下，cookie 很早就有了，最初的目的就是為了存儲 Web 中狀態(tài)信息，方便服務器端使用。可以判斷用戶是否是第一次登陸等，最后，點贊，分享。
