摘要：如圖圖顧名思義，，是級(jí)別的存儲(chǔ)。如筆者寫的一篇淺析文章聊一聊百度移動(dòng)端首頁前端速度那些事兒讀者們可以嘗試使用。

歡迎大家收看聊一聊系列，這一套系列文章，可以幫助前端工程師們了解前端的方方面面（不僅僅是代碼）：https://segmentfault.com/blog/frontenddriver

在web開發(fā)越來越復(fù)雜的今天，前端擁有的能力也越來越多。其中最重要的一項(xiàng)莫過于web存儲(chǔ)。開發(fā)者們?nèi)绻褂玫卯?dāng)，這些存儲(chǔ)可以幫助我們提升網(wǎng)頁的性能與靈活度。本文不講個(gè)中的細(xì)節(jié)，只講各種前端存儲(chǔ)的利弊，與各類存儲(chǔ)的應(yīng)用場(chǎng)景。畢竟這些技術(shù)的細(xì)節(jié)在網(wǎng)上隨處可見，如果讀者你決定使用的話，再去細(xì)查也不遲。我們前端人手里都有哪些存儲(chǔ)武器，都用在什么地方，請(qǐng)讀者隨我一一聊開去......

cookie是什么就用不著我多說了吧，可是有同學(xué)會(huì)問了，這也算存儲(chǔ)？當(dāng)然算，它也可以存東西不是，而且它會(huì)在用戶訪問服務(wù)器的時(shí)候被帶上。但是，筆者在這里建議，不要使用過量，因?yàn)閏ookie在每次請(qǐng)求的時(shí)候都會(huì)被帶上。你總不想每次訪問自己網(wǎng)站接口或者文件的時(shí)候都帶上一堆可能用不到的信息把？這樣會(huì)增大請(qǐng)求包的大小。

眾所周知，cookie可以設(shè)置訪問域。即，如果你設(shè)置cookie的時(shí)候，設(shè)定了cookie的訪問域名為一個(gè)頂級(jí)域名，則可以達(dá)到幾個(gè)子域名共享cookie的效果。如：騰訊網(wǎng)與微信網(wǎng)頁版共享了pac_uid(如圖1.3.1與圖1.3.2)。

圖1.2.1

圖1.2.2

訪問的限制在種下cookie的時(shí)候指定。所以，我們可以設(shè)定cookie的訪問域名限制(當(dāng)然，不能跨域啦)。
有些重要信息，如用戶的唯一標(biāo)識(shí)，建議給這些cookie字段加上HttpOnly標(biāo)識(shí)。加上了這個(gè)標(biāo)識(shí)的話，我們的客戶端js是無法讀到與寫入加了標(biāo)識(shí)的cookie字段的，這樣非常安全。如果有不了解的讀者，建議百度一下"cookie httpOnly"。

如果設(shè)定了cookie的超時(shí)時(shí)間的話，那么cookie將在到期的時(shí)候失效。如果沒有設(shè)定，那么cookie就是session級(jí)別的啦。這里請(qǐng)讀者們注意一下。cookie的session含義與我們接下來要講的sessionStorage的session含義有區(qū)別。cookie的session是，在未關(guān)閉瀏覽器的情況下，所有的tab級(jí)別的頁面或新開，或刷新，均屬于一個(gè)session，比如，我們打開www.qq.com，在其中種下。test=doctorhou，如圖1.3.1

document.cookie = "test=doctorhou";

圖1.3.1

我們?cè)偎⑿乱幌庐?dāng)前頁面，發(fā)現(xiàn)cookie還在，如圖1.4.2

圖1.3.2

關(guān)閉種cookie的tab，我們?cè)傩麻_一個(gè)tab，發(fā)現(xiàn)cookie還是存在的，如圖1.4.3

圖1.3.3

退出瀏覽器，再打開www.qq.com發(fā)現(xiàn)test=doctorhou這一項(xiàng)cookie已經(jīng)不在了。如圖1.3.4

圖1.3.4

證明cookie的session含義是在瀏覽器退出時(shí)才結(jié)束。

一般非到不得已，不要在cookie里面存東西。如果要存儲(chǔ)的話。建議存儲(chǔ)一些同步訪問頁面的時(shí)候必須要被帶到服務(wù)端的信息。

比如，網(wǎng)站的用戶登錄信息。這個(gè)是在訪問時(shí)必須要在服務(wù)端獲取的信息，所以種在cookie里面很必要。有的同學(xué)會(huì)說了，那一些用戶信息呢？比如用戶在我網(wǎng)站都買了什么東西，之類的。這里建議存儲(chǔ)在服務(wù)端(存在數(shù)據(jù)庫里面，或者什么里面)。然后使用用戶的cookie唯一ID去數(shù)據(jù)庫中查詢。我們的目標(biāo)是，沒有蛀，哦不，越少越好。

sessionStorage屬于webstorage的一種，sessionStorage與我們稍后要說的localStorage類似，可以存儲(chǔ)k-v形式的數(shù)據(jù)，使用方法非常簡(jiǎn)單set便可以存儲(chǔ)，如圖2.1.1。

sessionStorage.setItem("test", "doctorhou");

圖2.1.1

使用sessionStorage.getItem便可以直接獲取。如圖2.1.2：

sessionStorage.getItem("test");

圖2.1.2

顧名思義，sessionStorage，是session級(jí)別的存儲(chǔ)。其存儲(chǔ)于客戶端。服務(wù)端是無法直接拿到的。

不同于cookie，sessionStorage的訪問限制更高一些，只有當(dāng)前設(shè)定sessionStorage的域下才能訪問，而且不同的兩個(gè)tab之間不能互通。例，我在www.qq.com下種下了sessionStorage，在wx.qq.com下是，無法訪問的。如圖2.2.1、圖2.2.2：

圖2.2.1

圖2.2.2

在新開的tab下，或者關(guān)閉本TAB再打開后(也是www.qq.com)，也是無法訪問到之前種的sessionStorage的。如圖2.2.3：

圖2.2.3

而本tab刷新的時(shí)候，sessionStorage確是可以訪問的，如圖2.2.4

圖2.2.4

以上種種，證明sessionStorage里面的session，并不同于cookie，是以tab為級(jí)別的session。

既然是存儲(chǔ)于客戶端而且存儲(chǔ)級(jí)別僅僅是一個(gè)session的話，還是建議存儲(chǔ)一些當(dāng)前頁面刷新需要存儲(chǔ)，且不需要在tab關(guān)閉時(shí)候留下的信息。剛剛說了，只有頁面刷新才不會(huì)清除掉sessionStorage。剩下的均會(huì)清理掉sessionStorage，當(dāng)然，也許可以用sessionStorage來檢測(cè)用戶是否是刷新進(jìn)入的頁面。對(duì)于音樂播放器恢復(fù)播放進(jìn)度條等功能等還是挺實(shí)用的。

localStorage與sessionStorage較為相似，接口也簡(jiǎn)單，通過localStorage.setItem/localStorage.getItem即可輕松使用，如圖3.1.1。

localStorage.setItem("test", "doctorhou");
localStorage.getItem("test");

圖3.1.1

localStorage可以存儲(chǔ)k-v形式的數(shù)據(jù)。存儲(chǔ)的值需要是字符串類型，沒法直接存儲(chǔ)對(duì)象，但是可以將對(duì)象序列化為字符串再存入。如果強(qiáng)行存入object的話，就會(huì)被調(diào)用object.toString從而悲劇。悲劇的存法，效果如圖3.1.2：

var doctorhou = {
    name: "doctorhou",
    describe: "高大、威猛、帥氣"
};
localStorage.setItem("test", doctorhou);
localStorage.getItem("test");

圖3.1.2

正確的存取方法，效果如圖3.1.3：

var doctorhou = {
    name: "doctorhou",
    describe: "高大、威猛、帥氣"
};
localStorage.setItem("test", JSON.stringify(doctorhou));
JSON.parse(localStorage.getItem("test"));

圖3.1.3

localStorage的存儲(chǔ)周期比sessionStorage長，如果用戶不清理的話，是可以永久存儲(chǔ)的。

localStorage與sessionStorage雖然相似，但是訪問限制卻不盡相同，localStorage的訪問域默認(rèn)設(shè)定為設(shè)置localStorage的當(dāng)前域，其他域名不可以取。這點(diǎn)與sessionStorage相同，但是與sessionStorage不同的是，localStorage設(shè)定后，新開tab是可以訪問到的，如圖3.2.1與圖3.2.2

圖3.2.1

圖3.2.2

localStorage理論上講是永久性質(zhì)的存儲(chǔ)。但是，免不了用戶會(huì)使用瀏覽器清除數(shù)據(jù)，或者瀏覽器有時(shí)候?yàn)榱斯?jié)省，去清除數(shù)據(jù)。

localStorage的大小一般限定為4M左右，這點(diǎn)可以根據(jù)實(shí)際瀏覽器來測(cè)試。那么，如何檢測(cè)自己已經(jīng)消耗了多少空間呢？可以直接將localStorage序列化，看看其字節(jié)數(shù)，就可以算出其已經(jīng)占用的空間了(可能會(huì)有點(diǎn)誤差，這樣做會(huì)把一些轉(zhuǎn)移符號(hào)算進(jìn)去，可以消除掉后再算)。如圖3.4.1，我們看出了自己大約已經(jīng)使用了61個(gè)字節(jié)的

JSON.stringify(localStorage)

圖3.4.1

由于localStorage的穩(wěn)定性質(zhì)，及其長效的存儲(chǔ)。筆者建議如果有一些數(shù)據(jù)，服務(wù)器難以承載其壓力，但又要與用戶的信息綁定的話，可以使用localStorage存儲(chǔ)一些狀態(tài)，這樣即能緩解服務(wù)端壓力，也可以存儲(chǔ)用戶的數(shù)據(jù)。當(dāng)然，也有一些小技巧，可以用localStorage提高網(wǎng)站訪問的速度。如筆者寫的一篇淺析文章：
聊一聊百度移動(dòng)端首頁前端速度那些事兒
讀者們可以嘗試使用。

這兩位可是web存儲(chǔ)中的重型武器。為什么放在一起說呢，是因?yàn)椋瑆ebsql的標(biāo)準(zhǔn)，官方已經(jīng)不打算維護(hù)了，轉(zhuǎn)而維護(hù)了新的indexeddb，讀者可能會(huì)問了，那直接說indexeddb就好了，為啥還要說websql，因?yàn)閣ebsql雖然過時(shí)了，但是其兼容性卻出奇的好，幾乎是移動(dòng)端均可用呀。我們來看一下caniuse上的兼容性數(shù)據(jù)：

websql的兼容性如圖4.1.1

圖4.1.1

indexeddb的兼容性卻不是很好，android4.4之前以及ios7以前都無法使用。如圖4.1.2

圖4.1.2

所以筆者建議如下，能用indexeddb的時(shí)候，就要使用indexeddb，因?yàn)槠浯砹宋磥淼陌l(fā)展方向。如果用不了indexeddb的盡量使用websql進(jìn)行代替。其實(shí)就是使用一段膩?zhàn)幽_本(polyfill)即可，做一下兼容。接下來我們會(huì)嘗試做一點(diǎn)膩?zhàn)幽_本。

websql更像是關(guān)系型數(shù)據(jù)庫，并且使用sql語句進(jìn)行操作，效果如圖4.1.2

圖4.1.2

indexeddb更像是nosql，直接使用js的方法操作數(shù)據(jù)即可，效果如圖4.1.3

圖4.1.3

indexeddb和websql在這一點(diǎn)上與localStorage一致，均是在創(chuàng)建數(shù)據(jù)庫的域名下才能訪問。而且不能指定訪問域名。

這兩位的存儲(chǔ)時(shí)間也是永久，除非用戶清除數(shù)據(jù)，可以用作長效的存儲(chǔ)。

理論上講，這兩種存儲(chǔ)的方式是沒有大小限制的。然而indexeddb的數(shù)據(jù)庫超過50M的時(shí)候?yàn)g覽器會(huì)彈出確認(rèn)。基本上也相當(dāng)于沒有限制了。

我這邊做了個(gè)實(shí)驗(yàn)，indexeddb查詢少量數(shù)據(jù)也就花費(fèi)了20MS左右。還是很快的。如圖4.5.1

圖4.5.1

大量數(shù)據(jù)的情況下，相對(duì)耗時(shí)會(huì)變長一些，但是也就在30MS左右，也是相當(dāng)給力了。如圖4.5.2所示，10W數(shù)據(jù)+，畢竟nosql。

for (var i = 0; i < 100000; i++) { 
    store.add({id: 2, name: "doctorhou"});
}

圖4.5.2

而websql這邊的效率也不錯(cuò)，10w+數(shù)據(jù)，簡(jiǎn)單查詢一下，只花費(fèi)了20MS左右，如圖4.5.3所示

圖4.5.3

當(dāng)我們是在做一個(gè)離線應(yīng)用，或者webapp的時(shí)候，可以考慮使用本地?cái)?shù)據(jù)庫中存取數(shù)據(jù)。如果不存大量的數(shù)據(jù)的話，其實(shí)localStorage就夠用了。亦或者，你想把一張用戶的皮膚圖片之類的大量數(shù)據(jù)存入客戶端緩存起來，localStorage已經(jīng)不夠用了的話，也可以嘗試一下websql與indexeddb。

接下來的一篇文章，我將會(huì)和讀者們一起聊聊前端調(diào)試那些事兒，不要走開，請(qǐng)關(guān)注我.....

https://segmentfault.com/a/1190000005964730

如果喜歡本文請(qǐng)點(diǎn)擊下方的推薦哦，你的推薦會(huì)變?yōu)槲依^續(xù)更文的動(dòng)力。

以上內(nèi)容僅代表筆者個(gè)人觀點(diǎn)，如有意見筆者愿意學(xué)習(xí)參考各讀者的建議。