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

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

下面來看看常用的本地存儲。

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

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

1、cookie

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

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

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

2、userData

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

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

3、web存儲機(jī)制

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

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

4、indexedDB

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

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

5、Flash cookie

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

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

6、Google Gears

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

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

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

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

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

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

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

那cookie具體能干什么呢？

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

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

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

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

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

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

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

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

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

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

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

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

我們先手動添加幾個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 這兩個選項(xiàng)共同決定了cookie能被哪些頁面共享。

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

domain 參數(shù)是用來控制 cookie對「哪個域」有效，默認(rèn)為設(shè)置 cookie的那個域。這個值可以包含子域，也可以不包含它。如上圖的例子，Domain選項(xiàng)中，可以是".google.com.hk"(不包含子域,表示它對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"會發(fā)送cookie信息，而".google.com.hk"就不會發(fā)送，即使它們來自同一個域。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

可以參照第3小節(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;"

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

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

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

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

我們發(fā)現(xiàn)，原來值為myCookie1的cookie不見了，test1原來的值myCookie1被newCookie覆蓋了，這也是這章要講解的，修改cookie的方法。還沒結(jié)束哦，我們再試下能不能修改參數(shù)。

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

如上圖，我們成功更改了名為test1的cookie的過期時間及安全標(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時需要注意的地方，可以修改原cookie的expries、secure屬性，但不能修改domain、path屬性。修改cookie時domain、path必須與原cookie保持一致。

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

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

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

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

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

增加流量：cookie每次請求都會被自動添加到Request Header中，無形中增加了流量。cookie信息越大，對服務(wù)器請求的時間也越長。

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

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

參考資料：

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

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

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