摘要：下面來看看常用的本地存儲(chǔ)。缺點(diǎn)不支持，低版本不支持，并且不支持查詢語(yǔ)言，簡(jiǎn)稱為，是在瀏覽器中保存結(jié)構(gòu)化數(shù)據(jù)的一種數(shù)據(jù)庫(kù)。它類似數(shù)據(jù)庫(kù)的結(jié)構(gòu)化數(shù)據(jù)存儲(chǔ)機(jī)制，代替了廢棄已久的，它能夠在客戶端存儲(chǔ)大量的結(jié)構(gòu)化數(shù)據(jù)，并且使用索引高效檢索的。

隨著瀏覽器的處理能力不斷增強(qiáng)，越來越多的網(wǎng)站開始考慮將數(shù)據(jù)存儲(chǔ)在「客戶端」，那就不得不談?wù)劚镜卮鎯?chǔ)了。本地存儲(chǔ)的好處顯而易見，一是避免取回?cái)?shù)據(jù)前頁(yè)面一片空白，如果不需要最新數(shù)據(jù)也可以減少向服務(wù)端請(qǐng)求的次數(shù)，從而減少用戶等待從服務(wù)器獲取數(shù)據(jù)的時(shí)間，二是網(wǎng)絡(luò)狀態(tài)不佳時(shí)仍可以顯示離線數(shù)據(jù)。

下面來看看常用的本地存儲(chǔ)。

用chrome瀏覽器打開一個(gè)網(wǎng)頁(yè)，進(jìn)入開發(fā)者模式，點(diǎn)擊Resources，我們可以看到：

以上的 indexedDB、Local Storage、Session Storage、Cookies，就是常用的本地存儲(chǔ)其中幾種。下面我們一一了解。

1、cookie

HTTP cookie，通常直接叫做cookie，是客戶端用來存儲(chǔ)數(shù)據(jù)的一種選項(xiàng)，它既可以在客戶端設(shè)置也可以在服務(wù)器端設(shè)置。cookie會(huì)跟隨任意HTTP請(qǐng)求一起發(fā)送。

優(yōu)點(diǎn)：兼容性好

缺點(diǎn)：一是增加了網(wǎng)絡(luò)流量；二則是它的數(shù)據(jù)容量有限，最多只能存儲(chǔ)4KB的數(shù)據(jù)，瀏覽器之間各有不同；三是不安全。

2、userData

userData是微軟通過一個(gè)自定義行為引入的持久化用戶數(shù)據(jù)的概念。用戶數(shù)據(jù)允許每個(gè)文檔最多128KB數(shù)據(jù)，每個(gè)域名最多1MB數(shù)據(jù)。

缺點(diǎn)：userData不是 web 標(biāo)準(zhǔn)的一部分，只有IE支持。

3、web存儲(chǔ)機(jī)制

web storage，包括兩種：sessionStorage 和 localStorage，前者嚴(yán)格用于一個(gè)瀏覽器會(huì)話中存儲(chǔ)數(shù)據(jù)，因?yàn)閿?shù)據(jù)在瀏覽器關(guān)閉后會(huì)立即刪除；后者則用于跨會(huì)話持久化地存儲(chǔ)數(shù)據(jù)。

缺點(diǎn)：IE不支持 SessionStorage，低版本IE ( IE6, IE7 ) 不支持 LocalStorage，并且不支持查詢語(yǔ)言

4、indexedDB

indexed Database API，簡(jiǎn)稱為indexedDB，是在瀏覽器中保存結(jié)構(gòu)化數(shù)據(jù)的一種「數(shù)據(jù)庫(kù)」。它類似SQL數(shù)據(jù)庫(kù)的結(jié)構(gòu)化數(shù)據(jù)存儲(chǔ)機(jī)制，代替了廢棄已久的web SQL Database API，它能夠在客戶端存儲(chǔ)大量的結(jié)構(gòu)化數(shù)據(jù)，并且使用索引高效檢索的API。

缺點(diǎn)：兼容性不好，未得到大部分瀏覽器的支持。

5、Flash cookie

Flash本地存儲(chǔ)，類似于HTTP cookie，它是利用 SharedObject類來實(shí)現(xiàn)本地存儲(chǔ)信息。它默認(rèn)允許每個(gè)站點(diǎn)存儲(chǔ)不超過100K的數(shù)據(jù)，遠(yuǎn)大于cookie，而且能夠跨瀏覽器。

缺點(diǎn)：瀏覽器需安裝 Flash 控件，畢竟它是通過Flash的類來存儲(chǔ)。所幸的是，沒有安裝Flash的用戶極少。

6、Google Gears

Google Gears是Google在07年發(fā)布的一個(gè)開源瀏覽器插件，Gears 內(nèi)置了一個(gè)基于SQLite的嵌入式 SQL數(shù)據(jù)庫(kù)，并提供了統(tǒng)一API 對(duì) 數(shù)據(jù)庫(kù)進(jìn)行訪問，在取得用戶授權(quán)之后，每個(gè)站點(diǎn)可以在SQL數(shù)據(jù)庫(kù)中存儲(chǔ)「不限大小」的數(shù)據(jù)。

缺點(diǎn)：需要安裝 Google Gears 組件

下面將對(duì) cookie 進(jìn)行詳細(xì)的介紹。

下面來詳細(xì)談?wù)刢ookie。

Cookie是一小段文本信息，伴隨著用戶請(qǐng)求在 Web 服務(wù)器和瀏覽器之間傳遞。它存儲(chǔ)于訪問者的計(jì)算機(jī)中，每當(dāng)同一臺(tái)計(jì)算機(jī)通過瀏覽器請(qǐng)求某個(gè)頁(yè)面時(shí)，就會(huì)發(fā)送這個(gè) cookie。

首先聲明，它是「瀏覽器」提供的一種機(jī)制，它將 ?document 對(duì)象的 cookie 屬性提供給 JavaScript?？梢允褂肑avaScript來創(chuàng)建和取回 cookie 的值，因此我們可以通過document.cookie訪問它。

cookie是存于用戶硬盤的一個(gè)文件，這個(gè)文件通常對(duì)應(yīng)于一個(gè)域名，也就是說，cookie可以跨越一個(gè)域名下的多個(gè)網(wǎng)頁(yè)，但不能跨越多個(gè)域名使用。

那cookie具體能干什么呢？

cookie 將信息存儲(chǔ)于用戶硬盤，因此可以作為全局變量，這是它最大的一個(gè)優(yōu)點(diǎn)。它最根本的用途是 Cookie 能夠幫助 Web 站點(diǎn)保存有關(guān)訪問者的信息，以下列舉cookie的幾種小用途。

保存用戶登錄信息。這應(yīng)該是最常用的了。當(dāng)您訪問一個(gè)需要登錄的界面，例如微博、百度及一些論壇，在登錄過后一般都會(huì)有類似"下次自動(dòng)登錄"的選項(xiàng)，勾選過后下次就不需要重復(fù)驗(yàn)證。這種就可以通過cookie保存用戶的id。

創(chuàng)建購(gòu)物車。購(gòu)物網(wǎng)站通常把已選物品保存在cookie中，這樣可以實(shí)現(xiàn)不同頁(yè)面之間數(shù)據(jù)的同步(同一個(gè)域名下是可以共享cookie的)，同時(shí)在提交訂單的時(shí)候又會(huì)把這些cookie傳到后臺(tái)。

跟蹤用戶行為。例如百度聯(lián)盟會(huì)通過cookie記錄用戶的偏好信息，然后向用戶推薦個(gè)性化推廣信息，所以瀏覽其他網(wǎng)頁(yè)的時(shí)候經(jīng)常會(huì)發(fā)現(xiàn)旁邊的小廣告都是自己最近百度搜過的東西。這是可以禁用的，這也是cookie的缺點(diǎn)之一。

那么，cookie是怎么起作用的呢？

在上一節(jié)中我們知道 cookie 是存在用戶硬盤中，用戶每次訪問站點(diǎn)時(shí)，Web應(yīng)用程序都可以讀取 Cookie 包含的信息。當(dāng)用戶再次訪問這個(gè)站點(diǎn)時(shí)，瀏覽器就會(huì)在本地硬盤上查找與該 URL 相關(guān)聯(lián)的 Cookie。如果該 Cookie 存在，瀏覽器就將它添加到request header的Cookie字段中，與http請(qǐng)求一起發(fā)送到該站點(diǎn)。

要注意的是，添加到 request header 中是「瀏覽器的行為」，存儲(chǔ)在cookie的數(shù)據(jù)「每次」都會(huì)被瀏覽器「自動(dòng)」放在http請(qǐng)求中。因此，如果這些數(shù)據(jù)不是每次都要發(fā)給服務(wù)器的話，這樣做無(wú)疑會(huì)增加網(wǎng)絡(luò)流量，這也是cookie的缺點(diǎn)之一。為了避免這點(diǎn)，我們必須考慮什么樣的數(shù)據(jù)才應(yīng)該放在cookie中，而不是濫用cookie。每次請(qǐng)求都需要攜帶的信息，最典型的就是身份驗(yàn)證了，其他的大多信息都不適合放在cookie中。

明白了工作原理后，接著我們來看看cookie長(zhǎng)什么樣，然后再一步步深入了解該怎么去用它。

那么，如何獲取 cookie 呢？從第1小節(jié)了解到，瀏覽器提供了 cookie 屬性給 JavaScript，因此可以通過 document.cookie 來訪問這個(gè)頁(yè)面中的cookie。

這是一串字符串，仔細(xì)觀察，我們可以發(fā)現(xiàn)規(guī)律。每個(gè) cookie 都以名/值對(duì)的形式，即 name=value，名稱和值都必須是URL編碼的，且兩對(duì)cookie間以分號(hào)和空格隔開。（ps：千萬(wàn)不要忘了空格，特別是在獲取某個(gè) cookie 時(shí)）

依舊是進(jìn)入開發(fā)者模式，我們來看下Resources下的Cookies

紅色標(biāo)注的那行，稍微猜想一下，也可以知道它是與cookie相關(guān)的值和屬性。name、value 不必多說，自然是 cookie 的名和值。domain、Path、Expries/Max-age、httponly(即HTTP選項(xiàng)）、Secure 等均是 cookie 的屬性，我們一一了解下。

我們先手動(dòng)添加幾個(gè)cookie，然后再來一一看下屬性（具體設(shè)置cookie的方法在下一小節(jié)詳解）。

代碼如下：

document.cookie = "test1=myCookie1;"
document.cookie = "test2=myCookie2; domain=.google.com.hk; path=/webhp"
document.cookie = "test3=myCookie3; domain=.google.com.hk; expires=Sat, 04 Nov 2017 16:00:00 GMT; secure"
document.cookie = "test4=myCookie4; domain=.google.com.hk; max-age=10800;"

domain 和 path 這兩個(gè)選項(xiàng)共同決定了cookie能被哪些頁(yè)面共享。

標(biāo)紅區(qū)域是默認(rèn)情況，正如例1中未設(shè)置domain和path最終顯示的情況。

domain 參數(shù)是用來控制 cookie對(duì)「哪個(gè)域」有效，默認(rèn)為設(shè)置 cookie的那個(gè)域。這個(gè)值可以包含子域，也可以不包含它。如上圖的例子，Domain選項(xiàng)中，可以是".google.com.hk"(不包含子域,表示它對(duì)google.com.hk的所有子域都有效)，也可以是"www.google.com.hk"(包含子域)。

path用來控制cookie發(fā)送的指定域的「路徑」，默認(rèn)為"/"，表示指定域下的所有路徑都能訪問。它是在域名的基礎(chǔ)下，指定可以訪問的路徑。例如cookie設(shè)置為"domain=.google.com.hk; path=/webhp"，那么只有".google.com.hk/webhp"及"/webhp"下的任一子目錄如"/webhp/aaa"或"/webhp/bbb"會(huì)發(fā)送cookie信息，而".google.com.hk"就不會(huì)發(fā)送，即使它們來自同一個(gè)域。

expries 和 max-age 是用來決定cookie的生命周期的，也就是cookie何時(shí)會(huì)被刪除。

標(biāo)紅區(qū)域?yàn)槟J(rèn)情況，即Session，表示瀏覽器會(huì)話結(jié)束時(shí)(即關(guān)閉瀏覽器)就會(huì)刪除cookie。

當(dāng)然，用戶也可以通過expries設(shè)置刪除時(shí)間。這個(gè)值是個(gè)GMT格式的日期，類似例三中的Sat, 04 Nov 2017 16:00:00 GMT，這表明這個(gè) cookie 將在2017-11-04的16時(shí)整失效，在此期間瀏覽器關(guān)閉后此cookie仍會(huì)保存在用戶的機(jī)器中。GMT格式可以通過 toGMTString() 和 toUTCString() 獲得。如果設(shè)置的失效時(shí)間是個(gè)以前的時(shí)間，則 cookie 會(huì)被立即刪除，這也是用來刪除 cookie 的方法。

在新的http協(xié)議中已經(jīng)使用 max-age 屬性來取代 expries。expries 表示的是失效時(shí)間，準(zhǔn)確講是「時(shí)刻」，max-age表示的是生效的「時(shí)間段」，以「秒」為單位。若 max-age 為正值，則表示 cookie 會(huì)在 max-age 秒后失效。如例四中設(shè)置"max-age=10800;"，也就是生效時(shí)間是3個(gè)小時(shí)，那么 cookie 將在三小時(shí)后失效。若 max-age 為負(fù)值，則cookie將在瀏覽器會(huì)話結(jié)束后失效，即 session，max-age的默認(rèn)值為-1。若 max-age 為0，則表示刪除cookie。

secure是 cookie 的安全標(biāo)志，通過cookie直接包含一個(gè)secure單詞來指定，也是cookie中唯一一個(gè)非名值對(duì)兒的部分。指定后，cookie只有在使用SSL連接（如HTTPS請(qǐng)求）時(shí)才會(huì)發(fā)送到服務(wù)器。

默認(rèn)情況為空，不指定 secure 選項(xiàng)，即不論是 http 請(qǐng)求還是 https 請(qǐng)求，均會(huì)發(fā)送cookie。

標(biāo)紅區(qū)域?yàn)橹付?secure 后的情況，同時(shí)也說明指定 secure 后 cookie 仍可見。

注意：只有保證網(wǎng)頁(yè)是https協(xié)議(或其他安全協(xié)議)請(qǐng)求的，才能客戶端在客戶端通過 js 去設(shè)置secure 類型的 cookie。

httponly屬性是用來限制客戶端腳本對(duì)cookie的訪問。將 cookie 設(shè)置成 httponly 可以減輕xss攻擊的危害，防止cookie被竊取，以增強(qiáng)cookie的安全性。（由于cookie中可能存放身份驗(yàn)證信息，放在cookie中容易泄露）

HTTP那列用來表示是否設(shè)置了httponly屬性，若設(shè)置了httponly，則會(huì)打勾（即標(biāo)紅區(qū)域）

我們用 js 獲取下cookie，可以發(fā)現(xiàn)訪問不到 NID 這個(gè)cookie，說明js是無(wú)法讀取和修改 httponly cookies，當(dāng)然也不能設(shè)置 cookie 為 httponly，這只能通過服務(wù)器端去設(shè)置。

默認(rèn)情況是不指定 httponly，即可以通過 js 去訪問。

將 cookie 的屬性介紹后，下一步就該談?wù)勅绾卫眠@些屬性去設(shè)置 cookie 了~

服務(wù)器通過發(fā)送一個(gè)名為 Set-Cookie 的HTTP頭來創(chuàng)建一個(gè)cookie，作為 Response Headers 的一部分。如下圖所示，每個(gè)Set-Cookie 表示一個(gè) cookie（如果有多個(gè)cookie,需寫多個(gè)Set-Cookie），每個(gè)屬性也是以名/值對(duì)的形式（除了secure），屬性間以分號(hào)加空格隔開。格式如下：

Set-Cookie: name=value[; expires=GMTDate][; domain=domain][; path=path][; secure]

只有cookie的名字和值是必需的。

注意，通過 Set-Cookie 指定的可選項(xiàng)(域、路徑、失效時(shí)間、secure標(biāo)志)只會(huì)在「瀏覽器端」使用，它們都是服務(wù)器給瀏覽器的指示，以指定何時(shí)應(yīng)該發(fā)送cookie。這些參數(shù)不會(huì)被發(fā)送至服務(wù)器端，只有name和value才會(huì)被發(fā)送。

客戶端設(shè)置cookie的格式和Set-Cookie頭中使用的格式一樣。如下：

document.cookie = "name=value[; expires=GMTDate][; domain=domain][; path=path][; secure]"

可以參照第3小節(jié)的四個(gè)例子測(cè)試下。

document.cookie = "test1=myCookie1;"
document.cookie = "test2=myCookie2; domain=.google.com.hk; path=/webhp"
document.cookie = "test3=myCookie3; domain=.google.com.hk; expires=Sat, 04 Nov 2017 16:00:00 GMT; secure"
document.cookie = "test4=myCookie4; domain=.google.com.hk; max-age=10800;"

若想要添加多個(gè)cookie，只能重復(fù)執(zhí)行 document.cookie（如上）。這可能和平時(shí)寫的 js 不太一樣，一般重復(fù)賦值是會(huì)覆蓋的，但對(duì)于cookie，重復(fù)執(zhí)行 document.cookie 并「不覆蓋」，而是「添加」（針對(duì)「不同名」的）。

上一節(jié)的最后是否有些疑惑？針對(duì)不同名的cookie，執(zhí)行document.cookie是添加，那「同名」的呢？實(shí)地演練一下~

如下圖，我們以test1作為實(shí)例試驗(yàn)下。

再執(zhí)行次 document.cookie = "test1=newCookie;"

我們發(fā)現(xiàn)，原來值為myCookie1的cookie不見了，test1原來的值myCookie1被newCookie覆蓋了，這也是這章要講解的，修改cookie的方法。還沒結(jié)束哦，我們?cè)僭囅履懿荒苄薷膮?shù)。

document.cookie = "test1=newCookie; max-age=3600; secure"  

如上圖，我們成功更改了名為test1的cookie的過期時(shí)間及安全標(biāo)志。

document.cookie = "test1=newCookie; domain=.google.com.hk; max-age=3600; secure"
document.cookie = "test1=newCookie; path=/webhp; max-age=3600; secure"

我們發(fā)現(xiàn)沒有覆蓋原來的cookie，而是新增了cookie。這也是修改cookie時(shí)需要注意的地方，可以修改原cookie的expries、secure屬性，但不能修改domain、path屬性。修改cookie時(shí)domain、path必須與原cookie保持一致。

cookie的刪除其實(shí)特別簡(jiǎn)單，也是對(duì)此cookie重新賦值，上面介紹expries和max-age時(shí)也有提到，將expries設(shè)為一個(gè)過去的時(shí)間或?qū)?b>max-age設(shè)為0，都可以刪除cookie。同時(shí)也要特別注意此cookie的domain、path要與原來保持一致。

若 cookie 的名或值中包含分號(hào)、逗號(hào)和空格這三個(gè)特殊字符，那么它需要經(jīng)過URL編碼。一般可以使用encodeURIComponent進(jìn)行編碼，它對(duì)應(yīng)的解碼函數(shù)是decodeURIComponent。若要給 cookie 指定額外的信息，只要將參數(shù)追加到該字符串（如下例）。

document.cookie = encodeURIComponent("test") + "=" + encodeURIComponent("myCookie") + "; max-age=3600";

安全性：由于cookie在HTTP中是明文傳遞的，其中包含的數(shù)據(jù)都可以被他人訪問，可能會(huì)被篡改、盜用。

大小限制：cookie的大小限制在4KB左右，若要做大量存儲(chǔ)顯然不是理想的選擇。

增加流量：cookie每次請(qǐng)求都會(huì)被自動(dòng)添加到Request Header中，無(wú)形中增加了流量。cookie信息越大，對(duì)服務(wù)器請(qǐng)求的時(shí)間也越長(zhǎng)。

?因此要慎用cookie，不要在cookie中存儲(chǔ)重要和敏感的數(shù)據(jù)。

?關(guān)于 cookie 的部分就先聊到這啦~有不對(duì)的地方歡迎指正~

參考資料：

《JavaScript高級(jí)程序設(shè)計(jì)》

http://www.quirksmode.org/js/...

https://www.nczonline.net/blo...