淺談cookie，sessionStorage和localStorage區別

在客戶端存儲數據可使用的技術有以下四種：

1.   Cookie技術：瀏覽器兼容性好，但操做比較複雜，須要程序員本身封裝，源生的Cookie接口不友好

2.   H5 WebStorage：不能超過8MB，操做簡單；

3.   IndexedDB：可存大量數據，還不是標準技術；

4.   Flash存儲：依賴於Flash播放器，Adobe已宣佈將放棄Flash,能夠再也不考慮此技術。

這裏主要討論cookie和WebStorage:

        共同之處：Cookie和WebStorage都是用來跟蹤瀏覽器用戶身份的會話方式。

        名詞解釋：Session：會話，瀏覽器從打開某個網站的一個頁面開始，中間可能打開不少頁面，直到關閉瀏覽器，整個過程稱爲「瀏覽器與Web服務器的一次會話。

         Cookie 是小甜餅的意思。顧名思義，cookie 確實很是小，它的大小限制爲4KB左右，它的主要用途有保存登陸信息，好比你登陸某個網站市場能夠看到「記住密碼」，這一般就是經過在 Cookie 中存入一段辨別用戶身份的數據來實現的。

        WebStorage技術中，瀏覽器爲用戶提供了兩個對象：

        (1)window.sessionStorage：類數組對象，會話級數據存儲；

        (2)window.localStorage：類數組對象，本地存儲(跨會話級存儲)；

        sessionStorage，是在瀏覽器進程所分得的內存中存儲着一次Web會話可用的數據，可供這次會話中全部的頁面共同使用；瀏覽器一旦關閉就消失了。做用：在同一個會話中的全部頁面間共享數據。

        localStorage是在瀏覽器所能管理的外存(硬盤)中存儲着用戶的瀏覽數據，可供這次會話以及後續的會話中的頁面共同使用，即便瀏覽器關閉也不會消失，能夠說在本地電腦永久存在，除非JavaScript腳步刪除或者用戶主動清空瀏覽器緩存。做用：在當前客戶端所對應的全部會話中共享數據，如登陸用戶名。

        sessionStorage有以下方法，localStorage一樣也可以使用這些方法：

    sessionStorage[key] = value       //保存一個數據

    sessionStorage.setItem(key, value) //保存一個數據

    var v = sessionStorage[key]       //讀取一個數據

    var v = sessionStorage.getItem(key) //讀取一個數據

    sessionStorage.removeItem(key) //刪除一個數據

    sessionStorage.clear()    //清除全部數據

    sessionStorage.length    //數據的數量

    sessionStorage.key(i)    //獲取第i個key

        localStorage中若數據發生了修改，都會觸發一次window.onstorage事件，能夠監聽此事件，實現監視localStorage數據改變的目的，用於在一個窗口中監視其它窗口中對localStorage數據的修改。但注意window.onstorage不能監視sessionStorage數據的修改！

應用場景

        有了對上面這些差異的直觀理解，咱們就能夠討論三者的應用場景了。

由於考慮到每一個 HTTP 請求都會帶着 Cookie 的信息，因此 Cookie 固然是能精簡就精簡啦，比較經常使用的一個應用場景就是判斷用戶是否登陸。針對登陸過的用戶，服務器端會在他登陸時往 Cookie 中插入一段加密過的惟一辨識單一用戶的辨識碼，下次只要讀取這個值就能夠判斷當前用戶是否登陸啦。曾經還使用 Cookie 來保存用戶在電商網站的購物車信息，現在有了 localStorage，彷佛在這個方面也能夠給 Cookie 放個假了。

        而另外一方面 localStorage 接替了 Cookie 管理購物車的工做，同時也能勝任其餘一些工做。好比HTML5遊戲一般會產生一些本地數據，localStorage 也是很是適用的。若是遇到一些內容特別多的表單，爲了優化用戶體驗，咱們可能要把表單頁面拆分紅多個子頁面，而後按步驟引導用戶填寫。這時候 sessionStorage 的做用就發揮出來了。

安全性的考慮

        須要注意的是，不是什麼數據都適合放在 Cookie、localStorage 和 sessionStorage 中的。使用它們的時候，須要時刻注意是否有代碼存在 XSS 注入的風險。由於只要打開控制檯，你就隨意修改它們的值，也就是說若是你的網站中有 XSS 的風險，它們就能對你的 localStorage 肆意妄爲。因此千萬不要用它們存儲你係統中的敏感數據。

 

參考資料:

<<JavaScript高級程序設計>>

詳說 Cookie, LocalStorage 與 SessionStorage（https://segmentfault.com/a/1190000002723469）