Cookie的原理、作用，區別以及使用
1、cookie的作用：
我們在瀏覽器中，經常涉及到資料的交換，比如你登入郵箱，登入一個頁面。我們經常會在此時設定30天內記住我，或者自動登入選項。那麼它們是怎麼記錄資訊的呢，答案就是今天的主角cookie了，Cookie是由HTTP伺服器設定的，儲存在瀏覽器中，但HTTP協議是一種無狀態協議，在資料交換完畢後，伺服器端和客戶端的連結就會關閉，每次交換資料都需要建立新的連結。就像我們去超市買東西，沒有積分卡的情況下，我們買完東西之後，超市沒有我們的任何消費資訊，但我們辦了積分卡之後，超市就有了我們的消費資訊。cookie就像是積分卡，可以儲存積分，商品就是我們的資訊，超市的系統就像伺服器後臺，http協議就是交易的過程。
2、機制的區別：
session機制採用的是在伺服器端保持狀態的方案，而cookie機制則是在客戶端保持狀態的方案，cookie又叫會話跟蹤機制。開啟一次瀏覽器到關閉瀏覽器算是一次會話。說到這裡，講下HTTP協議，前面提到，HTTP協議是一種無狀態協議，在資料交換完畢後，伺服器端和客戶端的連結就會關閉，每次交換資料都需要建立新的連結。此時，伺服器無法從連結上跟蹤會話。cookie可以跟蹤會話，彌補HTTP無狀態協議的不足。
3、cookie的分類：
cookie分為會話cookie和持久cookie，會話cookie是指在不設定它的生命週期expires時的狀態，前面說了，瀏覽器的開啟到關閉就是一次會話，當關閉瀏覽器時，會話cookie就會跟隨瀏覽器而銷燬。當關閉一個頁面時，不影響會話cookie的銷燬。會話cookie就像我們沒有辦理積分卡時，單一的買賣過程，離開之後，資訊則銷燬。
持久cookie則是設定了它的生命週期expires，此時，cookie像商品一樣，有個保質期，關閉瀏覽器之後，它不會銷燬，直到設定的過期時間。對於持久cookie，可以在同一個瀏覽器中傳遞資料，比如，你在開啟一個淘寶頁面登陸後，你在點開一個商品頁面，依然是登入狀態，即便你關閉了瀏覽器，再次開啟瀏覽器，依然會是登入狀態。這就是因為cookie自動將資料傳送到伺服器端，在反饋回來的結果。持久cookie就像是我們辦理了一張積分卡，即便離開，資訊一直保留，直到時間到期，資訊銷燬。
4、簡單的使用cookie的程式碼
cookie的幾種常見屬性：document.cookie="key=value;expires=失效時間;path=路徑;domain=域名;secure;(secure表安全級別）,
cookie以字串的形式儲存在瀏覽器中。下面貼段程式碼出來，是一個類似購物網站的將商品新增到購物車，再從購物車還原商品資訊的過程，是自己用原生JS封裝的函式。
封裝的cookie的存入，讀取以及刪除的函式：（這裡是將資訊以物件的形式存放到cookie中的，會用到JSON的知識)
// key : cookie 名
// value : cookie 值
// options : 可選配置引數
// options = {
// expires : 7|new Date(), // 失效時間
// path : "/", // 路徑
// domain : "", // 域名
// secure : true // 安全連線
// }
function cookie(key, value, options) {
/* read 讀取 */
// 如果沒有傳遞 value ，則表示根據 key 讀取 cookie 值
if (typeof value === "undefined") { // 讀取
// 獲取當前域下所有的 cookie，儲存到 cookies 陣列中
var cookies = document.cookie.split("; ");
// 遍歷 cookies 陣列中的每個元素
for (var i = 0, len = cookies.length; i < len; i++) {
// cookies[i] : 當前遍歷到的元素，代表的是 "key=value" 意思的字串，
// 將字串以 = 號分割返回的陣列中第一個元素表示 key，
// 第二個元素表示 value
var cookie = cookies[i].split("=");
// 判斷是否是要查詢的 key，對查詢的 key 、value 都要做解碼操作
if (decodeURIComponent(cookie[0]) === key) {
return decodeURIComponent(cookie[1]);
}
}
// 沒有查詢到指定的 key 對應的 value 值，則返回 null
return null;
}
/* 存入 設定 */
// 設定 options 預設為空物件
options = options || {};
// key = value，物件 key，value 編碼
var cookie = encodeURIComponent(key) + "=" + encodeURIComponent(value);
// 失效時間
if ((typeof options.expires) !== "undefined") { // 有配置失效時間
if (typeof options.expires === "number") { // 失效時間為數字
var days = options.expires,
t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
cookie += ";expires=" + options.expires.toUTCString();
}
// 路徑
if (typeof options.path !== "undefined")
cookie += ";path=" + options.path;
// 域名
if (typeof options.domain !== "undefined")
cookie += ";domain=" + options.domain;
// 安全連線
if (options.secure)
cookie += ";secure";
// 儲存
document.cookie = cookie;
}
// 從所有的 cookie 中刪除指定的 cookie
function removeCookie(key, options) {
options = options || {};
options.expires = -1; // 將失效時間設定為 1 天前
cookie(key, "", options);
}
下面是商品詳情頁的JS程式碼
// 找到所有的 “新增到購物車” 超級連結
var links = $("a", $("#tab"));
// 迴圈，為每個 “新增到購物車” 的超級連結新增點選事件
for (var i = 0, len = links.length; i < len; i++) {
links[i].onclick = function(){
// 獲取當前超級連結所在行的所有單元格
var _cells = this.parentNode.parentNode.cells;
// 獲取到即將新增到購物車中的商品資訊
var _id = _cells[0].innerHTML,
_name = _cells[1].innerHTML,
_price = _cells[2].innerHTML;
// 將商品資訊包裝到一個物件中
var product = {
id : _id,
name : _name,
price : _price,
amount : 1
};
/* 將當前選購的商品物件儲存到 cookie 中去 */
// 從 cookie 中讀取已有的儲存購物車的陣列結構
var _products = cookie("products");
if (_products === null) // cookie 中不存在 products 名的 cookie
_products = [];
else // 存在，則解析 cookie 讀取到的字串為 陣列 結構
_products = JSON.parse(_products);
// 將當前選購的商品追加到陣列中儲存
_products.push(product);
// 繼續將 _products 陣列內容存回 cookie
cookie("products", JSON.stringify(_products), {expires:7});
}
}
html程式碼，css程式碼大家可以自己寫
<table id="tab">
<tr>
<td>序號</td>
<td>名稱</td>
<td>價格</td>
<td>操作</td>
</tr>
<tr>
<td>1</td>
<td>空調</td>
<td>3999</td>
<td><a href="javascript:void(0);">新增到購物車</a></td>
</tr>
<tr>
<td>2</td>
<td>風扇</td>
<td>288</td>
<td><a href="javascript:void(0);">新增到購物車</a></td>
</tr>
</table>
<a href="cart_購物車.html" target="_blank">檢視購物車</a>
購物車還原商品資訊：
// 從 cookie 中讀取購物車已有的商品資訊
var _products = cookie("products");
// 判斷購物車是否有商品
if (_products === null || (_products = JSON.parse(_products)).length === 0)
return;
// 如果有商品，則顯示到頁面中
$(".result")[0].innerHTML = "";
for (var i = 0, len = _products.length; i < len; i++) {
// 當前遍歷到的商品物件
var prod = _products[i];
// 克隆 .row 的節點
var _row = $(".row")[0].cloneNode(true);
// 將當前商品物件的資訊替換節點中對應的部分，用class名獲取到的節點返回型別是一個數組所以要在後面加上[0]
$(".index", _row)[0].innerHTML = prod.id; // 編號
$(".name", _row)[0].innerHTML = prod.name; // 名稱
$(".price", _row)[0].innerHTML = prod.price; // 價格
$(".amount", _row)[0].innerHTML = prod.amount; // 數量
$(".oper", _row)[0].innerHTML = "<a href='javascript:void(0);'>刪除</a>"
// 將克隆的節點副本追加到 .result 的 div 中
$(".result")[0].appendChild(_row);
};
// 為每個 “刪除” 的超級連結繫結點選事件
var links = $("a", $("#container"));
for (var i = 0, len = links.length; i < len; i++) {
// links[i].index = i; // 為當前遍歷到的超級連結附加資料
links[i].product = _products[i]; //
links[i].onclick = function(){
// alert("你點選的是第" + (this.index + 1) + "個連線");
var index = inArray(this.product, _products);
if (index !== -1) {
_products.splice(index, 1);
}
// 更新 cookie
cookie("products", JSON.stringify(_products), {expires:7});
// 找出頁面中待刪除的行
var _row = this.parentNode.parentNode;
_row.parentNode.removeChild(_row);
};
}
這裡的$(' ')函式是自己封裝的函式，用於獲取到DOM節點，可以看下我關於getElementsByClassName的相容那篇文章。
購物車的html程式碼
<div id="container">
<div class="row">
<div class="index">商品編號</div>
<div class="name">商品名稱</div>
<div class="price">價格</div>
<div class="amount">數量</div>
<div class="oper">操作</div>
</div>
<div class="result" style="clear:both;">
購物車為空
</div>
</div>
---------------------
作者：web_emmet
來源：CSDN
原文：https://blog.csdn.net/u014753892/article/details/52821268
版權宣告：本文為博主原創文章，轉載請附上博文連結！