以前從沒有聽說過local storage, 在網上查了一些資料，得到如下結論
從存儲位置看，分為服務器端存儲和客戶端存儲兩種
服務器端: session
瀏覽器端: cookie, localStorage, sessionStorage
轉載自 http://www.lixuejiang.me/2016/09/11/cookie-session-localstorage-sessionStorage%E5%8C%BA%E5%88%AB%E5%92%8C%E4%BB%8B%E7%BB%8D/
cookie
cookie的內容主要包括：名字，值，過期時間，路徑和域。路徑與域一起構成cookie的作用范圍。若不設置過期時間，則表示這個cookie的生命周期為瀏覽器會話期間，關閉瀏覽器窗口，cookie就消失。這種生命期為瀏覽器會話期的cookie被稱為會話cookie。會話cookie一般不存儲在硬盤上而是保存在內存里，當然這種行為並不是規范規定的。若設置了過期時間，瀏覽器就會把cookie保存到硬盤上，關閉后再次打開瀏覽器，這些cookie仍然有效直到超過設定的過期時間。存儲在硬盤上的cookie可以在不同的瀏覽器進程間共享，比如兩個IE窗口。而對於保存在內存里的cookie，不同的瀏覽器有不同的處理方式。以下是cookie的操作方式：
//設置cookie function setCookie(cname, cvalue, exdays) { var d = new Date(); d.setTime(d.getTime() + (exdays*24*60*60*1000)); var expires = "expires="+d.toUTCString(); document.cookie = cname + "=" + cvalue + "; " + expires; } //獲取cookie function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for(var i=0; i<ca.length; i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1); if (c.indexOf(name) != -1) return c.substring(name.length, c.length); } return ""; } //清除cookie function clearCookie(name) { setCookie(name, "", -1); }
由於cookie是存儲在客戶端，如果cookie被竊取，會造成安全性問題，如跨站請求偽造。另外由於每次客戶端像服務端發起請求的時候都會帶上cookie，所以會增加每次http請求的傳輸量。因此提出了cookie隔離的概念。
cookie隔離
把js，css，圖片等靜態資源放在非主域名下，這樣在請求這些資源的時候就不會帶上主域名的cookie。從而降低傳輸成本和服務端的壓力
session
- session存放在服務端，類似散列表的形勢，每一個session有一個sessionId。
- 客戶端發起請求的時候會帶上sessionID
- 如果沒有sessionID，在服務端會新建一個sessionId，然后返回給客戶端
localStorage
localStorage是html5提出的，在此之前，IE已經有userData這種實現方式. localStorage是windows的一個對象：
基本操作
Set
localStorage.name = 'ggbond'; localStorage["name"] = "ggbond"; localStorage.setItem("name","ggbond");
get
var name = localStorage["name"]; var name = localStorage.name; var name = localStorage.getItem("name");
foreach
localStorage提供了key方法，來獲取里面所有的key
var storage = window.localStorage; function showStorage(){ for(var i=0;i<storage.length;i++){ //key(i)獲得相應的鍵，再用getItem()方法獲得對應的值 document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>"); } }
delete
localStorage.removeItem("name");
clearAll
localStorage.clear()
相關事件
HTML5的本地存儲，還提供了一個storage事件，可以對鍵值對的改變進行監聽，使用方法如下：
if(window.addEventListener){ window.addEventListener("storage",handle_storage,false); }else if(window.attachEvent){ window.attachEvent("onstorage",handle_storage); } function handle_storage(e){ if(!e){e=window.event;} //showStorage(); }
對於事件變量e，是一個StorageEvent對象，提供了一些實用的屬性，可以很好的觀察鍵值對的變化，如下表：
| Property | Type | Description |
|---|---|---|
| key | String | The named key that was added, removed, or moddified |
| oldValue | Any | The previous value(now overwritten), or null if a new item was added |
| newValue | Any | The new value, or null if an item was added |
| url/uri | String | The page that called the method that triggered this change |
sessionStorage
sessionStorage 方法針對一個 session 進行數據存儲。當用戶關閉瀏覽器窗口后，數據會被刪除。操作方法和localStorage類似
以下文章我覺得寫的很好，轉載自 http://jerryzou.com/posts/cookie-and-web-storage/
Cookie
Cookie 是小甜餅的意思。顧名思義，cookie 確實非常小，它的大小限制為4KB左右，是網景公司的前雇員 Lou Montulli 在1993年3月的發明。它的主要用途有保存登錄信息，比如你登錄某個網站市場可以看到“記住密碼”，這通常就是通過在 Cookie 中存入一段辨別用戶身份的數據來實現的。
localStorage
localStorage 是 HTML5 標准中新加入的技術，它並不是什么划時代的新東西。早在 IE 6 時代，就有一個叫 userData 的東西用於本地存儲，而當時考慮到瀏覽器兼容性，更通用的方案是使用 Flash。而如今，localStorage 被大多數瀏覽器所支持，如果你的網站需要支持 IE6+，那以 userData 作為你的 polyfill 的方案是種不錯的選擇。
sessionStorage
sessionStorage 與 localStorage 的接口類似，但保存數據的生命周期與 localStorage 不同。做過后端開發的同學應該知道 Session 這個詞的意思，直譯過來是“會話”。而 sessionStorage 是一個前端的概念，它只是可以將一部分數據在當前會話中保存下來，刷新頁面數據依舊存在。但當頁面關閉后，sessionStorage 中的數據就會被清空。
三者的異同
| 特性 | Cookie | localStorage | sessionStorage |
|---|---|---|---|
| 數據的生命期 | 一般由服務器生成，可設置失效時間。如果在瀏覽器端生成Cookie，默認是關閉瀏覽器后失效 | 除非被清除，否則永久保存 | 僅在當前會話下有效，關閉頁面或瀏覽器后被清除 |
| 存放數據大小 | 4K左右 | 一般為5MB | |
| 與服務器端通信 | 每次都會攜帶在HTTP頭中，如果使用cookie保存過多數據會帶來性能問題 | 僅在客戶端（即瀏覽器）中保存，不參與和服務器的通信 | |
| 易用性 | 需要程序員自己封裝，源生的Cookie接口不友好 | 源生接口可以接受，亦可再次封裝來對Object和Array有更好的支持 | |
應用場景
有了對上面這些差別的直觀理解，我們就可以討論三者的應用場景了。
因為考慮到每個 HTTP 請求都會帶着 Cookie 的信息，所以 Cookie 當然是能精簡就精簡啦，比較常用的一個應用場景就是判斷用戶是否登錄。針對登錄過的用戶，服務器端會在他登錄時往 Cookie 中插入一段加密過的唯一辨識單一用戶的辨識碼，下次只要讀取這個值就可以判斷當前用戶是否登錄啦。曾經還使用 Cookie 來保存用戶在電商網站的購物車信息，如今有了 localStorage，似乎在這個方面也可以給 Cookie 放個假了~
而另一方面 localStorage 接替了 Cookie 管理購物車的工作，同時也能勝任其他一些工作。比如HTML5游戲通常會產生一些本地數據，localStorage 也是非常適用的。如果遇到一些內容特別多的表單，為了優化用戶體驗，我們可能要把表單頁面拆分成多個子頁面，然后按步驟引導用戶填寫。這時候 sessionStorage 的作用就發揮出來了。
安全性的考慮
需要注意的是，不是什么數據都適合放在 Cookie、localStorage 和 sessionStorage 中的。使用它們的時候，需要時刻注意是否有代碼存在 XSS 注入的風險。因為只要打開控制台，你就隨意修改它們的值，也就是說如果你的網站中有 XSS 的風險，它們就能對你的 localStorage 肆意妄為。所以千萬不要用它們存儲你系統中的敏感數據。