一、概念：

1、cookie

Cookie 是小甜餅的意思。顧名思義，cookie 確實非常小，它的大小限制為4KB左右。它的主要用途是保存登錄信息，比如你登錄某個網站市場可以看到“記住密碼”，這通常就是通過在 Cookie 中存入一段辨別用戶身份的數據來實現的。

2、sessionStorage

用于本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問，刷新頁面數據依舊存在，會話結束后（頁面關閉）數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。

3、localStorage

用于持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。

是 HTML5 標準中新加入的技術，它并不是什么新東西。早在 IE 6 時代，就有一個叫 userData 的東西用于本地存儲，而當時考慮到瀏覽器兼容性，更通用的方案是使用 Flash。而如今，localStorage 被大多數瀏覽器所支持，如果你的網站需要支持 IE6+，那以 userData 作為你的 polyfill 的方案是種不錯的選擇。

web storage和cookie的區(qū)別:

Cookie的大小是受限的，并且每次你請求一個新的頁面的時候Cookie都會被發(fā)送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用。

除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發(fā)者自己封裝setCookie，getCookie。

但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互，作為HTTP規(guī)范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數據而生。

三、區(qū)別local和session例子：

如下例子中存在localStorage中關閉頁面再打開后仍然在之前的基礎上累加：（如果是存在sessionStorage中則重新打開頁面重新開始累加）

常用API：

存儲時以鍵/值對存儲

可以按自己的需要轉換該格式，如下的代碼中的字符串值轉換為數字類型:

四、開發(fā)一個簡單的網站列表程序：

例子網址：www.runoob.com/try/try.php

loadAll()執(zhí)行的時候往list中插入了整個table

五、cookie和storage應用場景

因為每個 HTTP 請求都會帶著 Cookie 的信息，所以 Cookie 當然是能精簡就精簡，比較常用的一個應用場景就是判斷用戶是否登錄。針對登錄過的用戶，服務器端會在他登錄時往 Cookie 中插入一段加密過的唯一辨識單一用戶的辨識碼，下次只要讀取這個值就可以判斷當前用戶是否登錄啦。

曾經還使用 Cookie 來保存用戶在電商網站的購物車信息，如今 localStorage 接替了 Cookie 管理購物車的工作，同時也能勝任其他一些工作。比如HTML5游戲通常會產生一些本地數據，localStorage 也是非常適用的。

如果遇到一些內容特別多的表單，為了優(yōu)化用戶體驗，我們可能要把表單頁面拆分成多個子頁面，然后按步驟引導用戶填寫。這時候 sessionStorage 的作用就發(fā)揮出來了。

六、安全性

不是什么數據都適合放在 Cookie、localStorage 和 sessionStorage 中的。使用它們的時候，需要時刻注意是否有代碼存在 XSS 注入的風險。因為只要打開控制臺，你就隨意修改它們的值，也就是說如果你的網站中有 XSS 的風險，它們就能對你的 localStorage 肆意妄為。所以千萬不要用它們存儲你系統(tǒng)中的敏感數據。