簡單說下cookie，LocalStorage與SessionStorage.md

最近在網上看到有人討論這三個的一些概念與區別，發現本身也一直沒有較好的總結，因此查閱了一些資料來闡述一下。

基本概念

cookie

cookie英文意思是小甜餅，是原來的網景公司創造，目前是在客戶端存儲數據的一種選項，cookie通常是由服務器端生成，綁定在特定的域名之下，當設定一個cookie以後再給建立它的域名發送請求都會包含這個cookie，大多數瀏覽器對cookie的尺寸也有限制大約4kb左右。

LocalStorage與SessionStorage

sessionStorage 與 localStorage 的接口相似，都是HTML5中的新的API，也是用於客戶端的儲存，但SessionStorage保存數據的生命週期與 localStorage 不一樣。作事後端開發的同窗應該知道 Session 這個詞的意思，直譯過來是「會話」。而 sessionStorage 是一個前端的概念，它只是能夠將一部分數據在當前會話中保存下來，刷新頁面數據依舊存在。但當頁面關閉後，sessionStorage 中的數據就會被清空。

三者的異同

有一個圖能夠很清晰的反應：

共同點：都是保存在瀏覽器端，且同源的。

區別：

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 接口使用更方便。

安全性的問題

咱們必須知道這三種都有可能面臨安全問題，最安全的方法確定是服務器端session方法。但會話數據僅在一段時間內有效，這個時間就是server端設置的session有效期。

參考資料

What is the difference between localStorage, sessionStorage, session and cookies?

詳說 Cookie, LocalStorage 與 SessionStorage