Cookie localStorage sessionStorage

三者的異同

特性	Cookie	localStorage	sessionStorage
數據的生命期	可設置失效時間，默認是關閉瀏覽器後失效	除非被清除，不然永久保存	僅在當前會話下(tab標籤頁)有效，新開tab標籤頁或關閉瀏覽器後被清除
存放數據大小	4K左右	通常爲5MB	通常爲5MB
與服務器端通訊	每次都會攜帶在HTTP頭中，若是使用cookie保存過多數據會帶來性能問題	僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊	僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊
易用性	須要程序員本身封裝，源生的Cookie接口不友好	源生接口能夠接受，亦可再次封裝來對Object和Array有更好的支持	源生接口能夠接受，亦可再次封裝來對Object和Array有更好的支持

做用域不一樣，sessionStorage不能在不一樣的瀏覽器窗口中共享，即便是同一個頁面；localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。Web Storage 支持事件通知機制，能夠將數據更新的通知發送給監聽者。WebStorage 的 api 接口使用更方便。

 

應用場景

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

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

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

安全性的考慮

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

 

 

 

Storage類的相關成員以下：

成員名	方法參數	描述
length	屬性	獲取存儲數據的條數
key(n)	n:索引值	根據索引值，返回鍵名
getItem(key)	key:鍵名	根據鍵名，獲取數據值
setItem(key,value)	key:鍵名 value:鍵值	根據鍵名和鍵值設置數據項，若是鍵名已經存在，則覆蓋值
removeItem(key)	key:鍵名	根據鍵名刪除一個數據項
clear()	無	清空當前的Storage對象

其用法：

參數設置很簡單，以下例：

localStorage.setItem('age', 40); 

訪問一個存儲的數據同樣很容易：

 = .getItem('age'); 

能夠這樣刪除一個特定的鍵值對：

localStorage.removeItem('age'); 

或者刪除全部的鍵值對：

localStorage.clear(); 

sessionStorage與頁面 js 數據對象的區別:

sessionStorage只要是同源的同學口（Tab）中，刷新頁面或者進入不一樣的頁面數據對象仍然被保存，也就是說只要瀏覽器窗口不關閉，加載頁面（同源）或刷新頁面，數據仍存在。