將數(shù)據(jù)存儲(chǔ)到客戶(hù)端的幾種方案：
HTTP Cookie
最初用于在客戶(hù)端存儲(chǔ)會(huì)話(huà)信息净当，要求服務(wù)器對(duì)任意的HTPP請(qǐng)求發(fā)送Set-Cookie HTTP頭作為響應(yīng)的一部分内斯，瀏覽器會(huì)存儲(chǔ)cookie的信息，之后會(huì)為每一個(gè)請(qǐng)求都加上cookie的頭發(fā)送回服務(wù)器像啼。
//set-cookie 響應(yīng)頭
HTTP/1.1 200 OK
Content-type: text-html
Set-Cookie: name=value
//帶有Cookie的請(qǐng)求頭
GET /index.html HTTP/1.1
Cookie: name=value
限制：cookie是綁定在特定域名下的俘闯，每個(gè)域的cookie的總數(shù)是有限的，不同瀏覽器之間也不同
IE6及以下：每個(gè)域最多20個(gè)忽冻；
IE7以及上：每個(gè)域最多50個(gè)真朗；
Firefox：每個(gè)域最多50個(gè)；
Opera：每個(gè)域最多30個(gè)僧诚；
safari和chrome：對(duì)每個(gè)域的cookie數(shù)量沒(méi)有硬性規(guī)定遮婶；
除了個(gè)數(shù)限制，對(duì)于cookie的大小也有限制湖笨，大部分是4096B上下旗扑，如果超出會(huì)被直接丟掉。
cookie構(gòu)成：名稱(chēng)=value; domain=".jianshu.com"; （路徑）; （失效時(shí)間）; （安全標(biāo)志：cookie只有在使用SSL連接的時(shí)候才發(fā)送給服務(wù)器）
sessionStorage和localStorage都是Storage類(lèi)型慈省，都具有如下方法：
clear():刪除所有值臀防；火狐中沒(méi)有實(shí)現(xiàn)
getItem(name):獲取name對(duì)應(yīng)的值
key(index):獲得index位置處的值名字
removeItem(name):刪除指定name的名值對(duì)
setItem(name):設(shè)置指定name的值
sessionStorage對(duì)象存儲(chǔ)的數(shù)據(jù)只保存到瀏覽器關(guān)閉，可以跨頁(yè)面刷新而存在边败。同時(shí)如果瀏覽器支持清钥，瀏覽器崩潰之后依然可用（火狐和webkit可以，IE不行）放闺，主要用于會(huì)話(huà)的小段數(shù)據(jù)存取祟昭。
localStorage對(duì)象存儲(chǔ)的數(shù)據(jù)保存到javascript刪除或者用戶(hù)清除瀏覽器緩存。
localStorage是5MB的限制怖侦，chrome和safari篡悟，ios版safari和Android版webkit的限制都是2.5MB谜叹。
sessionStorage的限制大都是也是2.5MB;IE8+和Opera的限制是5MB。
IndexedDB
IndexedDB是瀏覽器中保存結(jié)構(gòu)化數(shù)據(jù)的一種數(shù)據(jù)庫(kù)搬葬，它的思想是創(chuàng)建一套API荷腊，方便存儲(chǔ)和讀取Javascript對(duì)象，同時(shí)還支持查詢(xún)和搜索急凰。IndexedDB設(shè)計(jì)的操作完全是異步進(jìn)行的女仰，每一次IndexedDB操作都要注冊(cè)onerror或onsuccess事件，以確保處理結(jié)果抡锈。數(shù)據(jù)不是存儲(chǔ)在表中疾忍，而是存儲(chǔ)在對(duì)象存儲(chǔ)空間中。
表格總結(jié)區(qū)分這幾種存儲(chǔ)數(shù)據(jù)的方式：
| 特性 | cookie | localStorage | sessionStorage | IndexDB |
|---|---|---|---|---|
| 數(shù)據(jù)生命周期 | 一般由服務(wù)器生成床三，可以設(shè)置過(guò)期時(shí)間 | 除非被清理一罩，否則一直存在 | 頁(yè)面關(guān)閉就清理 | 除非被清理，否則一直存在 |
| 數(shù)據(jù)存儲(chǔ)大小 | 4K | 5M | 5M | 無(wú)限 |
| 與服務(wù)端通信 | 每次都會(huì)攜帶在 header 中撇簿，對(duì)于請(qǐng)求性能影響 | 不參與 | 不參與 | 不參與 |
注意：不要在客戶(hù)端存儲(chǔ)敏感數(shù)據(jù)聂渊，數(shù)據(jù)緩存是不會(huì)加密數(shù)據(jù)的。
參考：
https://book.douban.com/subject/10546125/
https://juejin.im/book/5bdc715fe51d454e755f75ef
