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

隨著瀏覽器的處理能力不斷增強，越來越多的網站開始考慮將數據存儲在「客戶端」，那就不得不談談本地存儲了。本地存儲的好處顯而易見，一是避免取回數據前頁面一片空白，如果不需要最新數據也可以減少向服務端請求的次數，從而減少用戶等待從服務器獲取數據的時間，二是網絡狀態不佳時仍可以顯示離線數據。

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

用chrome瀏覽器打開一個網頁，進入開發者模式，點擊Resources，我們可以看到：

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

1、cookie

HTTP cookie，通常直接叫做cookie，是客戶端用來存儲數據的一種選項，它既可以在客戶端設置也可以在服務器端設置。cookie會跟隨任意HTTP請求一起發送。

優點：兼容性好

缺點：一是增加了網絡流量；二則是它的數據容量有限，最多只能存儲4KB的數據，瀏覽器之間各有不同；三是不安全。

2、userData

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

缺點：userData不是 web 標準的一部分，只有IE支持。

3、web存儲機制

web storage，包括兩種：sessionStorage 和 localStorage，前者嚴格用于一個瀏覽器會話中存儲數據，因為數據在瀏覽器關閉后會立即刪除；后者則用于跨會話持久化地存儲數據。

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

4、indexedDB

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

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

5、Flash cookie

Flash本地存儲，類似于HTTP cookie，它是利用 SharedObject類來實現本地存儲信息。它默認允許每個站點存儲不超過100K的數據，遠大于cookie，而且能夠跨瀏覽器。

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

6、Google Gears

Google Gears是Google在07年發布的一個開源瀏覽器插件，Gears 內置了一個基于SQLite的嵌入式 SQL數據庫，并提供了統一API 對 數據庫進行訪問，在取得用戶授權之后，每個站點可以在SQL數據庫中存儲「不限大小」的數據。

缺點：需要安裝 Google Gears 組件

下面將對 cookie 進行詳細的介紹。

下面來詳細談談cookie。

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

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

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

那cookie具體能干什么呢？

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

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

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

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

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

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

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

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

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

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

依舊是進入開發者模式，我們來看下Resources下的Cookies

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

我們先手動添加幾個cookie，然后再來一一看下屬性（具體設置cookie的方法在下一小節詳解）。

代碼如下：

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 這兩個選項共同決定了cookie能被哪些頁面共享。

標紅區域是默認情況，正如例1中未設置domain和path最終顯示的情況。

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

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

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

標紅區域為默認情況，即Session，表示瀏覽器會話結束時(即關閉瀏覽器)就會刪除cookie。

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

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

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

默認情況為空，不指定 secure 選項，即不論是 http 請求還是 https 請求，均會發送cookie。

標紅區域為指定 secure 后的情況，同時也說明指定 secure 后 cookie 仍可見。

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

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

HTTP那列用來表示是否設置了httponly屬性，若設置了httponly，則會打勾（即標紅區域）

我們用 js 獲取下cookie，可以發現訪問不到 NID 這個cookie，說明js是無法讀取和修改 httponly cookies，當然也不能設置 cookie 為 httponly，這只能通過服務器端去設置。

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

將 cookie 的屬性介紹后，下一步就該談談如何利用這些屬性去設置 cookie 了~

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

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

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

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

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

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

可以參照第3小節的四個例子測試下。

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，只能重復執行 document.cookie（如上）。這可能和平時寫的 js 不太一樣，一般重復賦值是會覆蓋的，但對于cookie，重復執行 document.cookie 并「不覆蓋」，而是「添加」（針對「不同名」的）。

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

如下圖，我們以test1作為實例試驗下。

再執行次 document.cookie = "test1=newCookie;"

我們發現，原來值為myCookie1的cookie不見了，test1原來的值myCookie1被newCookie覆蓋了，這也是這章要講解的，修改cookie的方法。還沒結束哦，我們再試下能不能修改參數。

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

如上圖，我們成功更改了名為test1的cookie的過期時間及安全標志。

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

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

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

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

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

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

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

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

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

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

參考資料：

《JavaScript高級程序設計》

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

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