前言

隨著移動(dòng)網(wǎng)絡(luò)的發(fā)展與演化，我們手機(jī)上現(xiàn)在除了有原生 App贡这，還能跑“WebApp”——它即開即用戈泼，用完即走南片。一個(gè)優(yōu)秀的 WebApp 甚至可以擁有和原生 App 媲美的功能和體驗(yàn)。WebApp 優(yōu)異的性能表現(xiàn)寺渗，有一部分原因要?dú)w功于瀏覽器存儲(chǔ)技術(shù)的提升匿情。cookie存儲(chǔ)數(shù)據(jù)的功能已經(jīng)很難滿足開發(fā)所需兰迫，逐漸被WebStorage、IndexedDB所取代码秉，本文將介紹這幾種存儲(chǔ)方式的差異和優(yōu)缺點(diǎn)逮矛。

一、Cookie

1.Cookie的來源

Cookie 的本職工作并非本地存儲(chǔ)转砖，而是“維持狀態(tài)”须鼎。
因?yàn)?strong>HTTP協(xié)議是無狀態(tài)的，HTTP協(xié)議自身不對(duì)請(qǐng)求和響應(yīng)之間的通信狀態(tài)進(jìn)行保存府蔗，通俗來說晋控，服務(wù)器不知道用戶上一次做了什么，這嚴(yán)重阻礙了交互式Web應(yīng)用程序的實(shí)現(xiàn)姓赤。在典型的網(wǎng)上購物場(chǎng)景中赡译，用戶瀏覽了幾個(gè)頁面，買了一盒餅干和兩瓶飲料不铆。最后結(jié)帳時(shí)蝌焚，由于HTTP的無狀態(tài)性，不通過額外的手段誓斥，服務(wù)器并不知道用戶到底買了什么只洒，于是就誕生了Cookie。它就是用來繞開HTTP的無狀態(tài)性的“額外手段”之一劳坑。服務(wù)器可以設(shè)置或讀取Cookies中包含信息毕谴，借此維護(hù)用戶跟服務(wù)器會(huì)話中的狀態(tài)。

我們可以把Cookie 理解為一個(gè)存儲(chǔ)在瀏覽器里的一個(gè)小小的文本文件距芬，它附著在 HTTP 請(qǐng)求上涝开，在瀏覽器和服務(wù)器之間“飛來飛去”。它可以攜帶用戶信息框仔，當(dāng)服務(wù)器檢查 Cookie 的時(shí)候舀武，便可以獲取到客戶端的狀態(tài)。

在剛才的購物場(chǎng)景中离斩，當(dāng)用戶選購了第一項(xiàng)商品奕剃，服務(wù)器在向用戶發(fā)送網(wǎng)頁的同時(shí)，還發(fā)送了一段Cookie捐腿，記錄著那項(xiàng)商品的信息。當(dāng)用戶訪問另一個(gè)頁面柿顶，瀏覽器會(huì)把Cookie發(fā)送給服務(wù)器茄袖，于是服務(wù)器知道他之前選購了什么。用戶繼續(xù)選購飲料嘁锯，服務(wù)器就在原來那段Cookie里追加新的商品信息宪祥。結(jié)帳時(shí)聂薪，服務(wù)器讀取發(fā)送來的Cookie就行了。

2.什么是Cookie及應(yīng)用場(chǎng)景

Cookie指某些網(wǎng)站為了辨別用戶身份而儲(chǔ)存在用戶本地終端上的數(shù)據(jù)(通常經(jīng)過加密)蝗羊。 cookie是服務(wù)端生成藏澳，客戶端進(jìn)行維護(hù)和存儲(chǔ)。通過cookie,可以讓服務(wù)器知道請(qǐng)求是來源哪個(gè)客戶端耀找，就可以進(jìn)行客戶端狀態(tài)的維護(hù)翔悠，比如登陸后刷新，請(qǐng)求頭就會(huì)攜帶登陸時(shí)response header中的set-cookie,Web服務(wù)器接到請(qǐng)求時(shí)也能讀出cookie的值野芒，根據(jù)cookie值的內(nèi)容就可以判斷和恢復(fù)一些用戶的信息狀態(tài)蓄愁。

如上圖所示，Cookie 以鍵值對(duì)的形式存在狞悲。

典型的應(yīng)用場(chǎng)景有：

• 記住密碼撮抓，下次自動(dòng)登錄。

• 購物車功能摇锋。

• 記錄用戶瀏覽數(shù)據(jù)丹拯，進(jìn)行商品（廣告）推薦。

3.Cookie的原理及生成方式

Cookie的原理

第一次訪問網(wǎng)站的時(shí)候荸恕，瀏覽器發(fā)出請(qǐng)求乖酬，服務(wù)器響應(yīng)請(qǐng)求后，會(huì)在響應(yīng)頭里面添加一個(gè)Set-Cookie選項(xiàng)戚炫，將cookie放入到響應(yīng)請(qǐng)求中剑刑，在瀏覽器第二次發(fā)請(qǐng)求的時(shí)候，會(huì)通過Cookie請(qǐng)求頭部將Cookie信息發(fā)送給服務(wù)器双肤，服務(wù)端會(huì)辨別用戶身份施掏，另外，Cookie的過期時(shí)間茅糜、域七芭、路徑、有效期蔑赘、適用站點(diǎn)都可以根據(jù)需要來指定狸驳。

Cookie的生成方式主要有兩種：

• 生成方式一：http response header中的set-cookie

我們可以通過響應(yīng)頭里的 Set-Cookie 指定要存儲(chǔ)的 Cookie 值。默認(rèn)情況下缩赛，domain 被設(shè)置為設(shè)置 Cookie 頁面的主機(jī)名耙箍，我們也可以手動(dòng)設(shè)置 domain 的值。

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2018 07:28:00 GMT;//可以指定一個(gè)特定的過期時(shí)間（Expires）或有效期（Max-Age）

當(dāng)Cookie的過期時(shí)間被設(shè)定時(shí)酥馍，設(shè)定的日期和時(shí)間只與客戶端相關(guān)辩昆，而不是服務(wù)端。

• 生成方式二：js中可以通過document.cookie可以讀寫cookie旨袒，以鍵值對(duì)的形式展示

例如我們?cè)诰蚪鹕鐓^(qū)控制臺(tái)輸入以下三句代碼汁针，便可以在Chrome 的 Application 面板查看生成的cookie:

document.cookie="userName=hello"

document.cookie="gender=male"

document.cookie='age=20;domain=.baidu.com'

從上圖中我們可以得出：

Domain 標(biāo)識(shí)指定了哪些域名可以接受Cookie术辐。如果沒有設(shè)置domain，就會(huì)自動(dòng)綁定到執(zhí)行語句的當(dāng)前域施无。
如果設(shè)置為”.baidu.com”,則所有以”baidu.com”結(jié)尾的域名都可以訪問該Cookie辉词，所以在掘金社區(qū)上讀取不到第三條代碼存儲(chǔ)Cookie值。

4.Cookie的缺陷

• Cookie 不夠大

Cookie的大小限制在4KB左右猾骡，對(duì)于復(fù)雜的存儲(chǔ)需求來說是不夠用的瑞躺。當(dāng) Cookie 超過 4KB 時(shí)，它將面臨被裁切的命運(yùn)卓练。這樣看來隘蝎，Cookie 只能用來存取少量的信息。此外很多瀏覽器對(duì)一個(gè)站點(diǎn)的cookie個(gè)數(shù)也是有限制的襟企。

這里需注意：各瀏覽器的cookie每一個(gè)name=value的value值大概在4k嘱么，所以4k并不是一個(gè)域名下所有的cookie共享的,而是一個(gè)name的大小。

• 過多的 Cookie 會(huì)帶來巨大的性能浪費(fèi)

Cookie 是緊跟域名的顽悼。同一個(gè)域名下的所有請(qǐng)求曼振，都會(huì)攜帶 Cookie。大家試想蔚龙，如果我們此刻僅僅是請(qǐng)求一張圖片或者一個(gè) CSS 文件冰评，我們也要攜帶一個(gè) Cookie 跑來跑去（關(guān)鍵是 Cookie 里存儲(chǔ)的信息并不需要），這是一件多么勞民傷財(cái)?shù)氖虑槟靖ookie 雖然小甲雅，請(qǐng)求卻可以有很多，隨著請(qǐng)求的疊加坑填，這樣的不必要的 Cookie 帶來的開銷將是無法想象的抛人。

cookie是用來維護(hù)用戶信息的，而域名(domain)下所有請(qǐng)求都會(huì)攜帶cookie脐瑰，但對(duì)于靜態(tài)文件的請(qǐng)求妖枚，攜帶cookie信息根本沒有用，此時(shí)可以通過cdn（存儲(chǔ)靜態(tài)文件的）的域名和主站的域名分開來解決苍在。

• 由于在HTTP請(qǐng)求中的Cookie是明文傳遞的绝页，所以安全性成問題，除非用HTTPS寂恬。

5.Cookie與安全

對(duì)于 cookie 來說续誉，我們還需要注意安全性。

HttpOnly 不支持讀寫初肉，瀏覽器不允許腳本操作document.cookie去更改cookie屈芜，
所以為避免跨域腳本 (XSS) 攻擊，通過JavaScript的 Document.cookie API無法訪問帶有 HttpOnly 標(biāo)記的Cookie，它們只應(yīng)該發(fā)送給服務(wù)端井佑。如果包含服務(wù)端 Session 信息的 Cookie 不想被客戶端 JavaScript 腳本調(diào)用，那么就應(yīng)該為其設(shè)置 HttpOnly 標(biāo)記眠寿。

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly

標(biāo)記為 Secure 的Cookie只應(yīng)通過被HTTPS協(xié)議加密過的請(qǐng)求發(fā)送給服務(wù)端躬翁。但即便設(shè)置了 Secure 標(biāo)記，敏感信息也不應(yīng)該通過Cookie傳輸盯拱，因?yàn)镃ookie有其固有的不安全性盒发，Secure 標(biāo)記也無法提供確實(shí)的安全保障。

為了彌補(bǔ) Cookie 的局限性狡逢，讓“專業(yè)的人做專業(yè)的事情”宁舰，Web Storage 出現(xiàn)了。

HTML5中新增了本地存儲(chǔ)的解決方案----Web Storage奢浑，它分成兩類：sessionStorage和localStorage蛮艰。這樣有了WebStorage后，cookie能只做它應(yīng)該做的事情了——作為客戶端與服務(wù)器交互的通道雀彼，保持客戶端狀態(tài)壤蚜。

二、LocalStorage

1.LocalStorage的特點(diǎn)

• 保存的數(shù)據(jù)長(zhǎng)期存在徊哑，下一次訪問該網(wǎng)站的時(shí)候袜刷，網(wǎng)頁可以直接讀取以前保存的數(shù)據(jù)。
• 大小為5M左右
• 僅在客戶端使用莺丑，不和服務(wù)端進(jìn)行通信
• 接口封裝較好

基于上面的特點(diǎn)著蟹，LocalStorage可以作為瀏覽器本地緩存方案，用來提升網(wǎng)頁首屏渲染速度(根據(jù)第一請(qǐng)求返回時(shí)梢莽，將一些不變信息直接存儲(chǔ)在本地)萧豆。

2.存入/讀取數(shù)據(jù)

localStorage保存的數(shù)據(jù)，以“鍵值對(duì)”的形式存在蟹漓。也就是說炕横，每一項(xiàng)數(shù)據(jù)都有一個(gè)鍵名和對(duì)應(yīng)的值。所有的數(shù)據(jù)都是以文本格式保存葡粒。
存入數(shù)據(jù)使用setItem方法份殿。它接受兩個(gè)參數(shù)，第一個(gè)是鍵名嗽交，第二個(gè)是保存的數(shù)據(jù)卿嘲。
localStorage.setItem("key","value");
讀取數(shù)據(jù)使用getItem方法。它只有一個(gè)參數(shù)夫壁，就是鍵名拾枣。
var valueLocal = localStorage.getItem("key");

具體步驟，請(qǐng)看下面的例子：

<script>
if(window.localStorage){
  localStorage.setItem（'name','world'）
  localStorage.setItem（“gender','female'）
}
</script>

<body>
<div id="name"></div>
<div id="gender"></div>
<script>
var name=localStorage.getItem('name')
var gender=localStorage.getItem('gender')
document.getElementById('name').innerHTML=name
document.getElementById('gender').innerHTML=gender
</script>
</body>

3.使用場(chǎng)景

LocalStorage在存儲(chǔ)方面沒有什么特別的限制，理論上 Cookie 無法勝任的梅肤、可以用簡(jiǎn)單的鍵值對(duì)來存取的數(shù)據(jù)存儲(chǔ)任務(wù)司蔬，都可以交給 LocalStorage 來做。

這里給大家舉個(gè)例子姨蝴，考慮到 LocalStorage 的特點(diǎn)之一是持久俊啼，有時(shí)我們更傾向于用它來存儲(chǔ)一些內(nèi)容穩(wěn)定的資源。比如圖片內(nèi)容豐富的電商網(wǎng)站會(huì)用它來存儲(chǔ) Base64 格式的圖片字符串：

三左医、sessionStorage

sessionStorage保存的數(shù)據(jù)用于瀏覽器的一次會(huì)話授帕，當(dāng)會(huì)話結(jié)束（通常是該窗口關(guān)閉），數(shù)據(jù)被清空浮梢；sessionStorage 特別的一點(diǎn)在于跛十，即便是相同域名下的兩個(gè)頁面，只要它們不在同一個(gè)瀏覽器窗口中打開秕硝，那么它們的 sessionStorage 內(nèi)容便無法共享芥映；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的缝裤。除了保存期限的長(zhǎng)短不同屏轰，SessionStorage的屬性和方法與LocalStorage完全一樣。

1.sessionStorage的特點(diǎn)

• 會(huì)話級(jí)別的瀏覽器存儲(chǔ)
• 大小為5M左右
• 僅在客戶端使用憋飞，不和服務(wù)端進(jìn)行通信
• 接口封裝較好

基于上面的特點(diǎn)霎苗，sessionStorage 可以有效對(duì)表單信息進(jìn)行維護(hù)，比如刷新時(shí)榛做，表單信息不丟失唁盏。

2.使用場(chǎng)景

sessionStorage 更適合用來存儲(chǔ)生命周期和它同步的會(huì)話級(jí)別的信息。這些信息只適用于當(dāng)前會(huì)話检眯，當(dāng)你開啟新的會(huì)話時(shí)厘擂，它也需要相應(yīng)的更新或釋放。比如微博的 sessionStorage就主要是存儲(chǔ)你本次會(huì)話的瀏覽足跡：

lasturl 對(duì)應(yīng)的就是你上一次訪問的 URL 地址锰瘸，這個(gè)地址是即時(shí)的刽严。當(dāng)你切換 URL 時(shí)，它隨之更新避凝，當(dāng)你關(guān)閉頁面時(shí)舞萄，留著它也確實(shí)沒有什么意義了，干脆釋放吧管削。這樣的數(shù)據(jù)用 sessionStorage 來處理再合適不過倒脓。

3.sessionStorage 、localStorage 和 cookie 之間的區(qū)別

• 共同點(diǎn)：都是保存在瀏覽器端含思，且都遵循同源策略崎弃。
• 不同點(diǎn)：在于生命周期與作用域的不同

作用域：localStorage只要在相同的協(xié)議甘晤、相同的主機(jī)名、相同的端口下饲做，就能讀取/修改到同一份localStorage數(shù)據(jù)线婚。sessionStorage比localStorage更嚴(yán)苛一點(diǎn)，除了協(xié)議艇炎、主機(jī)名酌伊、端口外，還要求在同一窗口（也就是瀏覽器的標(biāo)簽頁）下

生命周期：localStorage 是持久化的本地存儲(chǔ)缀踪，存儲(chǔ)在其中的數(shù)據(jù)是永遠(yuǎn)不會(huì)過期的，使其消失的唯一辦法是手動(dòng)刪除虹脯；而 sessionStorage 是臨時(shí)性的本地存儲(chǔ)驴娃，它是會(huì)話級(jí)別的存儲(chǔ)，當(dāng)會(huì)話結(jié)束（頁面被關(guān)閉）時(shí)循集，存儲(chǔ)內(nèi)容也隨之被釋放唇敞。

Web Storage 是一個(gè)從定義到使用都非常簡(jiǎn)單的東西。它使用鍵值對(duì)的形式進(jìn)行存儲(chǔ)咒彤，這種模式有點(diǎn)類似于對(duì)象疆柔，卻甚至連對(duì)象都不是——它只能存儲(chǔ)字符串，要想得到對(duì)象镶柱，我們還需要先對(duì)字符串進(jìn)行一輪解析旷档。

說到底，Web Storage 是對(duì) Cookie 的拓展歇拆，它只能用于存儲(chǔ)少量的簡(jiǎn)單數(shù)據(jù)鞋屈。當(dāng)遇到大規(guī)模的、結(jié)構(gòu)復(fù)雜的數(shù)據(jù)時(shí)故觅，Web Storage 也愛莫能助了厂庇。這時(shí)候我們就要清楚我們的終極大 boss——IndexedDB！

四输吏、IndexedDB

IndexedDB 是一種低級(jí)API权旷，用于客戶端存儲(chǔ)大量結(jié)構(gòu)化數(shù)據(jù)(包括文件和blobs)。該API使用索引來實(shí)現(xiàn)對(duì)該數(shù)據(jù)的高性能搜索贯溅。IndexedDB 是一個(gè)運(yùn)行在瀏覽器上的非關(guān)系型數(shù)據(jù)庫拄氯。既然是數(shù)據(jù)庫了，那就不是 5M盗迟、10M 這樣小打小鬧級(jí)別了坤邪。理論上來說，IndexedDB 是沒有存儲(chǔ)上限的（一般來說不會(huì)小于 250M）罚缕。它不僅可以存儲(chǔ)字符串艇纺，還可以存儲(chǔ)二進(jìn)制數(shù)據(jù)。

1.IndexedDB的特點(diǎn)

• 鍵值對(duì)儲(chǔ)存。

IndexedDB 內(nèi)部采用對(duì)象倉庫（object store）存放數(shù)據(jù)黔衡。所有類型的數(shù)據(jù)都可以直接存入蚓聘，包括 JavaScript 對(duì)象。對(duì)象倉庫中盟劫，數(shù)據(jù)以"鍵值對(duì)"的形式保存夜牡，每一個(gè)數(shù)據(jù)記錄都有對(duì)應(yīng)的主鍵，主鍵是獨(dú)一無二的侣签，不能有重復(fù)塘装，否則會(huì)拋出一個(gè)錯(cuò)誤。

• 異步

IndexedDB 操作時(shí)不會(huì)鎖死瀏覽器影所，用戶依然可以進(jìn)行其他操作蹦肴，這與 LocalStorage 形成對(duì)比，后者的操作是同步的猴娩。異步設(shè)計(jì)是為了防止大量數(shù)據(jù)的讀寫阴幌，拖慢網(wǎng)頁的表現(xiàn)。

• 支持事務(wù)卷中。

IndexedDB 支持事務(wù)（transaction）矛双，這意味著一系列操作步驟之中，只要有一步失敗蟆豫，整個(gè)事務(wù)就都取消议忽，數(shù)據(jù)庫回滾到事務(wù)發(fā)生之前的狀態(tài)，不存在只改寫一部分?jǐn)?shù)據(jù)的情況无埃。

• 同源限制

IndexedDB 受到同源限制徙瓶，每一個(gè)數(shù)據(jù)庫對(duì)應(yīng)創(chuàng)建它的域名。網(wǎng)頁只能訪問自身域名下的數(shù)據(jù)庫嫉称，而不能訪問跨域的數(shù)據(jù)庫侦镇。

• 儲(chǔ)存空間大

IndexedDB 的儲(chǔ)存空間比 LocalStorage 大得多，一般來說不少于 250MB织阅，甚至沒有上限壳繁。

• 支持二進(jìn)制儲(chǔ)存。

IndexedDB 不僅可以儲(chǔ)存字符串荔棉，還可以儲(chǔ)存二進(jìn)制數(shù)據(jù)（ArrayBuffer 對(duì)象和 Blob 對(duì)象）闹炉。

2.IndexedDB的常見操作

在IndexedDB大部分操作并不是我們常用的調(diào)用方法，返回結(jié)果的模式润樱，而是請(qǐng)求——響應(yīng)的模式渣触。

• 建立打開IndexedDB ----window.indexedDB.open("testDB")

這條指令并不會(huì)返回一個(gè)DB對(duì)象的句柄，我們得到的是一個(gè)IDBOpenDBRequest對(duì)象壹若，而我們希望得到的DB對(duì)象在其result屬性中

除了result嗅钻，IDBOpenDBRequest接口定義了幾個(gè)重要屬性:

onerror: 請(qǐng)求失敗的回調(diào)函數(shù)句柄

onsuccess:請(qǐng)求成功的回調(diào)函數(shù)句柄

onupgradeneeded:請(qǐng)求數(shù)據(jù)庫版本變化句柄

<script>
function openDB(name){
var request=window.indexedDB.open(name)//建立打開IndexedDB
request.onerror=function (e){
console.log('open indexdb error')
}
request.onsuccess=function (e){
myDB.db=e.target.result//這是一個(gè) IDBDatabase對(duì)象皂冰，這就是IndexedDB對(duì)象
console.log(myDB.db)//此處就可以獲取到db實(shí)例
}
}
var myDB={
name:'testDB',
version:'1',
db:null
}
openDB(myDB.name)
</script>

控制臺(tái)得到一個(gè) IDBDatabase對(duì)象，這就是IndexedDB對(duì)象

• 關(guān)閉IndexedDB----indexdb.close()

function closeDB(db){
    db.close();
}

• 刪除IndexedDB----window.indexedDB.deleteDatabase(indexdb)

function deleteDB(name) {
  indexedDB.deleteDatabase(name)
}

3.WebStorage养篓、cookie 和 IndexedDB之間的區(qū)別

從上表可以看到秃流，cookie 已經(jīng)不建議用于存儲(chǔ)。如果沒有大量數(shù)據(jù)存儲(chǔ)需求的話柳弄，可以使用 localStorage 和 sessionStorage 舶胀。對(duì)于不怎么改變的數(shù)據(jù)盡量使用 localStorage 存儲(chǔ)，否則可以用 sessionStorage 存儲(chǔ)碧注。

總結(jié)

正是瀏覽器存儲(chǔ)嚣伐、緩存技術(shù)的出現(xiàn)和發(fā)展，為我們的前端應(yīng)用帶來了無限的轉(zhuǎn)機(jī)萍丐。近年來基于存儲(chǔ)纤控、緩存技術(shù)的第三方庫層出不絕，此外還衍生出了 PWA 這樣優(yōu)秀的 Web 應(yīng)用模型碉纺。總結(jié)下本文幾個(gè)核心觀點(diǎn)：

• Cookie 的本職工作并非本地存儲(chǔ)刻撒，而是“維持狀態(tài)”
• Web Storage 是 HTML5 專門為瀏覽器存儲(chǔ)而提供的數(shù)據(jù)存儲(chǔ)機(jī)制骨田，不與服務(wù)端發(fā)生通信
• IndexedDB 用于客戶端存儲(chǔ)大量結(jié)構(gòu)化數(shù)據(jù)

參考文章

• 把cookie聊清楚
• HTML5本地存儲(chǔ)——IndexedDB（一：基本使用）
• 詳說 Cookie, LocalStorage 與 SessionStorage
• 前端性能優(yōu)化原理與實(shí)踐
• localstorage 必知必會(huì)
• 瀏覽器數(shù)據(jù)庫 IndexedDB 入門教程

作者：浪里行舟
鏈接：瀏覽器存儲(chǔ)
來源：github
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)声怔，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處态贤。