互聯網早期瀏覽器是沒有狀態維護，這個就導致一個問題就是服務器不知道瀏覽器的狀態，無法判斷是否是同一個瀏覽器。這樣用戶登錄、購物車功能都無法實現，Lou Montulli在1994年引入到web中最終納入W3C規范 RFC6265中。
### 區別 * cookie在瀏覽器請求中每次都會附加請求頭中發送給服務器。用戶代理(一般值瀏覽器)所實現的大小最少要到達4096字節(感謝@lulianqi15的指正)
-
localStorage保存數據會一直保存沒有過期時間，不會隨瀏覽器發送給服務器。大小5M或更大
-
sessionStorage僅當前頁面有效一旦關閉就會被釋放。也不會隨瀏覽器發送給服務器。大小5M或更大
cookie
瀏覽器在本地按照一定規則存儲一些文本字符串，每當瀏覽器像服務器發送請求時帶這些字符串。服務器根據字符串判定瀏覽器的狀態比如：登錄、訂單、皮膚。服務器就可以根據不同的cookie識別出不同的用戶信息。瀏覽器和服務器cookie交互圖如下。
cookie如何產生
1、在瀏覽器訪問服務器時由服務器返回一個Set-Cookie響應頭，當瀏覽器解析這個響應頭時設置cookie
2、通過瀏覽器js腳本設置 document.cookie = 'name=monsterooo';
瀏覽器訪問服務器攜帶cookie過程
js設置cookie詳解
服務器設置cookie這里不過多介紹了同客戶端js設置類似，重點來看一下js如何設置cookie和一些細節。
在js中設置cookie完整格式是：document.cookie="key=value[; expires=date][; domain=domain][; path=path][; secure]"
-
key=value
key設置的是cookie的鍵，value設置的是cookie的值。示例如下：
document.cookie = "name=monsterooo";
-
expires
設置cookie的生存時間，默認為當然瀏覽器會話(Session)。當設置一個時間時，每次訪問瀏覽器會用當前時間和cookie的expries做比對，如果過期cookie則會被刪除。設置格式為GMT時間格式。示例如下：var t = new Date( +(new Date()) + 1000 * 120 ); document.cookie = `name=monsterooo;expires=${t.toGMTString()};`;
-
domain
在瀏覽器讀取cookie的時候只有當cookie的domain和瀏覽器當然的域名匹配才能讀取到。默認情況下cookie的domain和當然訪問一樣。但是很多網址不止有一個域名比如：a.example.com和b.example.com如果他們想要共享cookie那么cookie的domain需要設置為domain=.example.com，path路徑需要設置為path=/。這樣之后兩個域名都能同時訪問到cookie了。var t = new Date( +(new Date()) + 1000 * 120 ); document.cookie = `name=monsterooo;expires=${t.toLocaleTimeString()}; domain=.example.com; path=/`; -
path
path路徑和domain功能類似，只是path的范圍更小。path控制cookie在當前域名的路徑，只有路徑相匹配cookie才能被讀取到。在www.example.com/order/index.html中cookie設置如下document.cookie = `order=10; expires=${t.toGMTString()}; path=/order`;，那么只有在/order路徑下的頁面cookie中才會帶有order值。
localStorage和sessionStorage
localStorage和sessionStorage都繼承於Storage，提供了統一的api來訪問和設置數據。api列表為：
- clear 清空存儲中的所有本地存儲數據
- getItem 接受一個參數key，獲取對應key的本地存儲
- key 接受一個整數索引，返回對應本地存儲中索引的鍵
- removeItem 接受一個參數key，刪除對應本地存儲的key
- setItem 接受兩個參數，key和value，如果不存在則添加，存在則更新。
localStorage.setItem('order', 'a109');
console.log(localStorage.key(0)); // order
console.log(localStorage.getItem('order')) // a109
localStorage.removeItem('order');
localStorage.clear();
// 對象訪問方式同樣有效
localStorage.order = 'b110';
localStorage.order; // b110
### 擴展
Cookie的一個極端使用例子是僵屍Cookie（或稱之為“刪不掉的Cookie”），這類Cookie較難以刪除，甚至刪除之后會自動重建。它們一般是使使用Web storage API、Flash本地共享對象或者其他技術手段來達到目的的。相關內容可以看：