1、引言
隨着瀏覽器的處理能力不斷增強，越來越多的網站開始考慮將數據存儲在「客戶端」，那麼久不得不談本地存儲了。
本地存儲的好處：
一是避免取回數據前頁面一片空白，如果不需要最新數據也可以減少向服務器的請求次數，從而減少用戶等待從服務端獲取數據的時間。
二是網絡狀態不佳時仍可以顯示離線數據。
2、本地存儲
用chrome瀏覽器打開一個網頁，F12進入開發者模式，點擊Application，我們可以看到：
以上的Local Stroage 、 Session Stroage 、 IndexedDB 、Cookies，就是常用的本地存儲其中的幾種。
3、常用的本地存儲
1） cookie
是客戶端用來存儲數據的一種選項，它既可以在客戶端設置也可以在服務器端設置。cookie會跟隨任意HTTP請求一起發送。
優點：兼容性好
缺點：一是增加了網絡流量，二是數據容量有限，最多隻能存儲4kb的數據，瀏覽器之間各有不同，三是不安全。
2）userData
是微軟通過一個自定義行爲引入的持久化用戶數據的概念。用戶數據允許每個文檔最多128kb的數據，每個域名最多1MB的數據。
缺點：不是web標準的一部分，只有ie支持。
3）web存儲機制
web Stroage，包括：Session Stroage和Local Stroage，
前者嚴格用於一個瀏覽器會話中存儲數據，因爲數據在瀏覽器關閉後會立即刪除；後者則用於跨會話的持久化地存儲數據。
缺點：ie不支持Session Stroage，低版本的ie（ie6、7）不支持Local Stroage，並且不支持查詢語言。
4）IndexedDB
Indexed Database api的簡稱，是在瀏覽器保存結構化數據的一種「數據庫」。類似SQL數據庫的結構化數據存儲機制，代替了廢棄已久的web SQL Database api。
優點：能夠在客戶端存儲大量的結構化數據，並且使用索引高效檢索的api。
缺點：兼容性不好，未得到大部分瀏覽器的支持。
4、cookie的用途
document 對象的cookie 屬性
cookie是一小段文本信息，伴隨着用戶請求在web服務器和瀏覽器之間傳遞。它存儲於訪問者的計算機中，每當同一臺計算機通過瀏覽器請求某個頁面時，就會發送這個 cookie。
首先聲明，它是「瀏覽器」提供的一種機制，
它將 document 對象的cookie 屬性提供給 JavaScript，可以使用JavaScript來創建和取回 cookie 的值，因此我們可以通過document.cookie訪問它。
cookie是存於用戶硬盤的一個文件，這個文件通常對應於一個域名，也就是說，cookie可以跨越一個域名下的多個網頁，但不能跨越多個域名使用。
cookie的根本用途
cookie 將信息存儲於用戶硬盤，因此可以作爲全局變量，這是它最大的一個優點。它最根本的用途是 Cookie 能夠幫助 Web 站點保存有關訪問者的信息。
列舉cookie的幾種小用途
1）保存用戶登錄信息。這應該是最常用的了。當您訪問一個需要登錄的界面，例如微博、百度及一些論壇，在登錄過後一般都會有類似"下次自動登錄"的選項，勾選過後下次就不需要重複驗證。這種就可以通過cookie保存用戶的id。
2）創建購物車。購物網站通常把已選物品保存在cookie中，這樣可以實現不同頁面之間數據的同步(同一個域名下是可以共享cookie的)，同時在提交訂單的時候又會把這些cookie傳到後臺。
3）跟蹤用戶行爲。例如百度聯盟會通過cookie記錄用戶的偏好信息，然後向用戶推薦個性化推廣信息，所以瀏覽其他網頁的時候經常會發現旁邊的小廣告都是自己最近百度搜過的東西。這是可以禁用的，這也是cookie的缺點之一。
cookie是怎麼起作用的呢？
在上一節中我們知道 cookie 是存在用戶硬盤中，用戶每次訪問站點時，Web應用程序都可以讀取 Cookie 包含的信息。當用戶再次訪問這個站點時，瀏覽器就會在本地硬盤上查找與該 URL 相關聯的 Cookie。如果該 Cookie 存在，瀏覽器就將它添加到request header的Cookie字段中，與http請求一起發送到該站點。
4、cookie的格式和常見的屬性
字符串規律：（1）每個 cookie 都以名/值對的形式，即 name=value，（2）名稱和值都必須是URL編碼的，（3）且兩對cookie間以 分號 和 空格 隔開。
紅色標註的那行，稍微猜想一下，也可以知道它是與cookie相關的值和屬性。name、value 不必多說，自然是 cookie 的名和值。domian 、Path 、 Expires/max-age 、
Size 、Http 、 Secure等軍屬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失效時間
expries 和 max-age 是用來決定cookie的生命週期的，也就是cookie何時會被刪除。
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
默認情況爲空，不指定 secure 選項，即不論是 http 請求還是 https 請求，均會發送cookie。
是 cookie 的安全標誌，是cookie中唯一的一個非鍵值對兒的部分。指定後，cookie只有在使用SSL連接（如HTTPS請求或其他安全協議請求的）時纔會發送到服務器。
httponly（即http）
httponly屬性是用來限制客戶端腳本對cookie的訪問。將 cookie 設置成 httponly 可以減輕xss（跨站腳本攻擊 Cross Site Scripting）攻擊的危害，
防止cookie被竊取，以增強cookie的安全性。（由於cookie中可能存放身份驗證信息，放在cookie中容易泄露）
默認情況是不指定 httponly，即可以通過 js 去訪問。
5、如何利用以上屬性去設置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的名字和值是必需的。
客戶端設置
客戶端設置cookie的格式和Set-Cookie頭中使用的格式一樣。如下：
document.cookie = "name=value[; expires=GMTDate][; domain=domain][; path=path][; secure]"
若想要添加多個cookie，只能重複執行 document.cookie（如上）。這可能和平時寫的 js 不太一樣，一般重複賦值是會覆蓋的，
但對於cookie，重複執行 document.cookie 並「不覆蓋」，而是「添加」（針對「不同名」的）。
6、cookie的缺點
安全性：由於cookie在http中是明文傳遞的，其中包含的數據都可以被他人訪問，可能會被篡改、盜用。
大小限制：cookie的大小限制在4kb左右，不適合大量存儲。
增加流量：cookie每次請求都會被自動添加到Request Header中，無形中增加了流量。cookie信息越大，對服務器請求的時間越長。