Html5 web 本地存儲 （localStorage、sessionStorage）

HTML5 提供了兩種在客戶端存儲數據的新方法localStorage,sessionStorage

1. sessionStorage（臨時存儲） ：爲每個數據源維持一個存儲區域，在瀏覽器打開期間存在，包括頁面從新加載

2. localStorage（長期存儲） ：與 sessionStorage 同樣，可是瀏覽器關閉後，數據依然會一直存在

web storage的瀏覽器支持狀況

瀏覽器的支持除了IE７及如下不支持外，其餘標準瀏覽器都徹底支持(ie及FF需在web服務器裏運行)，值得一提的是IE老是辦好事，例如IE七、IE6中的UserData其實就是javascript本地存儲的解決方案。經過簡單的代碼封裝能夠統一到全部的瀏覽器都支持web storage。要判斷瀏覽器是否支持localStorage能夠使用下面的代碼：

if(window.localStorage){
alert("瀏覽支持localStorage") 
}
else
{ 
alert("瀏覽暫不支持localStorage") 
} 
//或者 if(typeof window.localStorage == 'undefined'){ alert("瀏覽暫不支持localStorage") }

API

1，保存數據到本地

sessionStorage.setItem('key', value)   //name 是本地存儲的值的名字， value是本地存儲值，注意value必須是字符串的形式

localStorage.setItem('key', value)   //setItem把值存到本地，其中name 是本地存儲的值的名字， value是本地存儲值，注意value必須是字符串的形式

2，從本地獲取數據

var data1 = JSON.parse(sessionStorage.getItem('key'));

var data2 = JSON.parse(localStorage.getItem('key'));

3，從本地刪除某個數據

sessionStorage.removeItem('key');

localStorage.removeItem('key');

4，刪除全部保存在本地的數據

sessionStorage.clear();

localStorage.clear();

chrome瀏覽器查看的方法

按F12,而後選擇application就能夠看到了

 

Cookie、session和localStorage、以及sessionStorage之間的區別:https://blog.csdn.net/ruby_xc/article/details/65939988