幾種瀏覽器存儲方法及其優缺點

在作項目的過程當中，咱們常常遇到須要把信息存儲在本地的狀況，好比權限驗證的token、用戶信息、埋點計數、客戶配置的皮膚信息或語言種類等，咱們能夠暫存一下避免瀏覽器沒必要要的請求和客戶多餘操做，給客戶使用帶來方便。

那麼瀏覽器存儲有哪些方法呢，主要有cookie、localStorage、sessionStorage

cookie屬於文檔對象模型DOM樹根節點document，而 sessionStorage 和 localStorage 屬於瀏覽器對象模型BOM的對象window

其中 sessionStorage 和 localStorage 是 HTML5 Web Storage API 提供的

• sessionStorage：爲每個給定的源（given origin）維持一個獨立的存儲區域，該存儲區域在頁面會話期間可用（即只要瀏覽器處於打開狀態，包括頁面從新加載和恢復）
• localStorage：一樣的功能，可是在瀏覽器關閉，而後從新打開後數據仍然存在。

1. cookie

h5以前，存儲主要用cookies，缺點是在請求頭上帶着數據，致使流量增長。大小限制4k

操做方式：

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/"    // 設置cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT"    // 刪除cookie

設置cookie的方法比較簡單，其中有幾個參數能夠添加

expires

過時時間，當過了到期日期時，瀏覽器會自動刪除該cookie，若是想刪除一個cookie，只須要把它過時時間設置成過去的時間便可
好比但願設置過時時間一年：new Date().getTime() + 365 * 24 * 60 * 60 * 1000

若是不設置過時時間，則表示這個cookie生命週期爲瀏覽器會話期間，只要關閉瀏覽器窗口，cookie就消失了。

path

路徑，值能夠是一個目錄，或者是一個路徑。

若是cc.com/test/index.html 創建了一個cookie，那麼在cc.com/test/目錄裏的全部頁面，以及該目錄下面任何子目錄裏的頁面均可以訪問這個cookie。所以在cc.com/test/test2/test3 裏的任何頁面均可以訪問cc.com/test/index.html創建的cookie。若cc.com/test/ 若想訪問cc.com/test/index.html設置的cookes，須要把cookies的path屬性設置成「/」。
在指定路徑的時候，凡是來自同一服務器，URL裏有相同路徑的全部WEB頁面均可以共享cookies。

domain

主機名，是指同一個域下的不一樣主機，例如：www.baidu.com和map.baidu.com就是兩個不一樣的主機名。默認狀況下，一個主機中建立的cookie在另外一個主機下是不能被訪問的，但能夠經過domain參數來實現對其的控制：document.cookie = "name=value;domain=.baidu.com"
這樣，全部*.baidu.com的主機均可以訪問該cookie。

2. localStorage

以鍵值對(Key-Value)的方式存儲，永久存儲，永不失效，除非手動刪除。IE8+支持，每一個域名限制5M

打開同域的新頁面也能訪問獲得

操做方式：

window.localStorage.username = 'hehe'                   // 設置
window.localStorage.setItem('username', 'hehe')         // 設置
window.localStorage.getItem('username')                 // 讀取
window.localStorage.removeItem('username')             // 刪除
window.localStorage.key(1)                             // 讀取索引爲1的值
window.localStorage.clear()                            // 清除全部

能夠存儲數組、數字、對象等能夠被序列化爲字符串的內容

3. sessionStorage

sessionStorage操做的方法與localStroage是同樣的，區別在於 sessionStorage 在關閉頁面後即被清空，而 localStorage 則會一直保存。不少時候數據只須要在用戶瀏覽一組頁面期間使用，關閉窗口後數據就能夠丟棄了，這種狀況使用sessionStorage就比較方便。

注意，刷新頁面sessionStorage不會清除，可是打開同域新頁面訪問不到

4. cookie、localStorage、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 接口使用更方便，cookie的原生接口不友好，須要本身封裝。

5. 安全性

須要注意的是，不是什麼數據都適合放在 Cookie、localStorage 和 sessionStorage 中的，由於它們保存在本地容易被篡改，使用它們的時候，須要時刻注意是否有代碼存在 XSS 注入的風險。因此千萬不要用它們存儲你係統中的敏感數據。

---

網上的帖子大多深淺不一，甚至有些先後矛盾，在下的文章都是學習過程當中的總結，若是發現錯誤，歡迎留言指出~

參考：

1. 請描述一下 cookies，sessionStorage 和 localStorage 的區別？
2. 前端HTML5幾種存儲方式的總結
3. 詳說 Cookie, LocalStorage 與 SessionStorage