一、背景介紹
SessionStorage, LocalStorage, Cookie這三者都可以被用來在瀏覽器端存儲數據，而且都是字符串類型的鍵值對。 區別在于前兩者屬于WebStorage，創建它們的目的便于客戶端存儲數據。 而Cookie早在網景公司的瀏覽器中就開始支持，最初目的是為了保持HTTP的狀態。
二、知識剖析
Cookie?
HTTP Cookie（也叫Web cookie或者瀏覽器Cookie）是服務器發送到用戶瀏覽器并保存在瀏覽器上的一塊數據，它會在瀏覽器下一次發起請求時被攜帶并發送到服務器上。比較經典的，可以它用來確定兩次請求是否來自于同一個瀏覽器，從而能夠確認和保持用戶的登錄狀態。Cookie的使用使得基于無狀態的HTTP協議上記錄穩定的狀態信息成為了可能。
sessionStorage
sessionStorage 屬性允許你訪問一個 session Storage 對象。它與 localStorage 相似，不同之處在于 localStorage里面存儲的數據沒有過期時間設置，而存儲在 sessionStorage 里面的數據在頁面會話結束時會被清除。頁面會話在瀏覽器打開期間一直保持，并且重新加載或恢復頁面仍會保持原來的頁面會話。在新標簽或窗口打開一個頁面會初始化一個新的會話，這點和 session cookies 的運行方式不同。
localStorage
localStorage 屬性允許你訪問一個 local Storage 對象。localStorage 與 sessionStorage 相似。不同之處在于，存儲在 localStorage里面的數據沒有過期時間（expiration time），而存儲在 sessionStorage 里面的數據會在瀏覽器會話（browsing session）結束時被清除，即瀏覽器關閉時。
三、常見問題
Cookie是如何工作的？
Cookie可用于客戶端數據的存儲，在沒有其它存儲辦法時，使用這種方式是可行的，但隨著現在瀏覽器開始支持各種各樣的存儲方式而逐漸被廢棄。由于服務器指定Cookie以后瀏覽器的每次請求都會攜帶Cookie數據，這會帶來額外的性能負擔（尤其是在移動環境下）。新的瀏覽器API已經允許開發者直接在本地存儲數據，如可以使用Web storage API （本地存儲和會話存儲）和IndexedDB（索引數據庫）。
Cookie主要用在以下三個方面：
1.會話狀態管理（如用戶登錄狀態、購物車）
2.個性化設置（如用戶自定義設置）
3.瀏覽器行為跟蹤（如跟蹤分析用戶行為）
Cookie的缺陷：
1.每個 HTTP 請求中都包含 Cookies，從而導致傳輸相同的數據減緩我們的 Web 應用程序。
2.每個 HTTP 請求中都包含 Cookies，從而導致發送未加密的數據到互聯網上。（除非用HTTPS）
3.Cookies 只能存儲有限的 4KB 數據，對于復雜的存儲需求來說是不夠用的。
LocalStorage和SessionStorage?
html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage。 不會被發送到服務器上。同時空間比Cookie大很多，一般支持5-10M。 與Cookie類似，每個域名下會有不同的localStorage和SessionStorage實例。
sessionStorage用于本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問并且當會話結束后（關閉標簽頁，不包括刷新和跳轉）數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。
localStorage可以在多個標簽頁中互相訪問用于持久化的本地存儲，可以在多個標簽頁中互相訪問,除非主動刪除數據，否則數據是永遠不會過期的。
注意SessionStorage中的Session指的是瀏覽器會話，而非服務器端通過Cookie實現的Session。
Storage的使用
LocalStorage/SessionStorage也是基于字符串的鍵值對存儲。可以通過setItem，getItem,clear,removeIteml來存取控制數據：
1.clear()：刪除所有值。
2.getItem(name)：根據指定的名字name獲取對應的值
3.key(index)：在指定的數字位置獲取該位置的名字。
4.removeItem(name)：刪除由name指定的名值對
5.setItem(name,value)：為指定名字設置一個對應的值
localStorage.setItem("name","wangerxiao");
//這樣就用localStorage存儲了一個名字為name的數據，數據的內容為 “wangerxiao"
localStorage.getItem("name");
//這樣就讀取了名字為“name”的數據的值。
但是，storage只能存儲字符串的數據，對于JS中常用的數組或對象卻不能直接存儲。如下：
var obj = { name:'Jim' };
sessionStorage.obj = obj;
localStorage.obj = obj;
var arr = [1,2,3];
sessionStorage.obj = arr;
localStorage.obj = arr;
注意：上面這種寫法是錯誤的
但我們可以通過JSON對象提供的parse和stringify將其他數據類型轉化成字符串，再存儲到storage中就可以了。
var obj = { name:'Jim' };
var str = JSON.stringify(obj);
//存入
sessionStorage.obj = str;
//讀取
str = sessionStorage.obj;
//重新轉換為對象
obj = JSON.parse(str);
四、解決方案
總結：sessionStorage 、localStorage 和 cookie 之間的異同
共同點：
都是保存在瀏覽器端，且同源的。
不同點：
1.cookie數據始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。cookie數據還有路徑（path）的概念，可以限制cookie只屬于某個路徑下。
2.存儲大小限制也不同，cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據，如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
3.數據有效期不同，sessionStorage：僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據；cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。
4.作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
5.Web Storage 支持事件通知機制，可以將數據更新的通知發送給監聽者。
6.Web Storage 的 api 接口使用更方便。
五、編碼實戰
如何在瀏覽器上查看sessionStorage 、localStorage 和 cookie？
以谷歌瀏覽器為例，按f12，選擇頂部的Application，便可以看到Storage信息和cookies信息。
以下為測試將數據存入localStorage。
var storage=window.localStorage;
//寫入a字段
storage["a"]=1;
//寫入b字段
storage.b=2;
//寫入c字段
storage.setItem("c",3);
console.log(typeof storage["a"]);
console.log(typeof storage["b"]);
console.log(typeof storage["c"]);
六、更多討論
討論點一、如何修改sessionStorage里存的值?
討論點二、如果是將對象轉換成json字符串后存儲到sessionStorage的值，那該如何更改？
七、參考文獻
參考一：謝燦勇的博客
參考二：Window.sessionStorage- Web API 接口 | MDN
參考三：Window.localStorage- Web API 接口 | MDN
