H5 web存儲

H5提供了兩種在客戶端存儲數據的方式：
localStorage 持久化的本地存儲（瀏覽器關閉從新打開數據依然存在）
sessionStorage 針對一個session的本地存儲
以前這些都是由cookie來完成的，cookie的特色是存儲量小，在服務器和客戶端之間來回傳遞，傳輸效率不高。通常能夠在判斷註冊的用戶是否登陸該本網站。
webStorage API 繼承於Window對象，並提供了兩個新的屬性-Window.localStorage 和 Window.sessionStorage.
webStorage的優點：

1. 相比cookie存儲容量增長
2. 能夠將請求的表單數據存於本地，減小http請求，節約帶寬
3. webStorage擁有易用的API

webStorage的侷限性：

1. 不一樣瀏覽器webStorage 和LocalStorage的大小不統一。
2. 在瀏覽器的隱私模式下面是不可讀取的
3. 本質上是對字符串的讀取，所以存儲內容過多時頁面會變卡
4. 不能被爬蟲抓取到

使用webStorage
1.存儲數據：
　　localStorage.name = 'value';
　　localStorage['name'] = 'value';
　　localStorage.setItem('name','value');
　　注意鍵和值老是字符串。建議使用webStorage API(setItem,getItem,removeItem,key,length)
2.獲取數據：
　　var value = localStorage.getItem('name');
　　var value = localStorage.name;
　　var value = localStorage['name'];
3.刪除數據：
　　清空全部數據
　　　　localStorage.clear();
　　刪除特定數據；
　　　　localStorage.removeItem('name');
4.檢測瀏覽器是否支持：
　　function storageAvailable(type) {
　　　　try {
　　　　　　var storage = window[type],
　　　　　　x = '__storage_test__';
　　　　　　storage.setItem(x, x);
　　　　　　storage.removeItem(x);
　　　　　　return true;
　　　　}
　　　　catch(e) {
　　　　　　return false;
　　　　}
　　}
　　if (storageAvailable('localStorage')) {
　　　　// Yippee! We can use localStorage awesomeness
　　}
　　else {
　　　　// Too bad, no localStorage for us
　　}
5.就是存儲對象了，咱們須要進行轉換爲字符串存入，等到使用的時候取出再轉爲對象。
　　var str = JSON.stringify(obj);
　　localStorage.mydata = str;
　　var obj = JSON.parse(localStorage.mydata);

6.監聽 storage 事件

能夠經過監聽 window 對象的 storage 事件並指定其事件處理函數，當頁面中對 localStorage 或 sessionStorage 進行修改時，則會觸發對應的處理函數。

window.addEventListener('storage',function(e){
    console.log('key='+e.key+',oldValue='+e.oldValue+',newValue='+e.newValue);
})
觸發事件的時間對象（e 參數值）有幾個屬性：

key : 鍵值。
oldValue : 被修改前的值。
newValue : 被修改後的值。
url : 頁面url。
storageArea : 被修改的 storage 對象。
注意：在谷歌瀏覽器中，須要在不一樣標籤頁中修改 storage 纔會觸發該事件，即 網頁A 監聽該事件，在 網頁B 中修改 localStorage，則 網頁A 會觸發事件函數。可是在 IE 中，在同個網頁修改 localStorage 都會觸發該事件。

調試

谷歌瀏覽器自帶調試工具(chrome devtools)很是好用，能夠用來調試 localStorage 和 sessionStorage。打開瀏覽器按f12調出調試工具，能夠看到 Application ，點擊打開能夠看到左邊欄有 Storage，包括了 localStorage、sessionStorage、IndexedDB等，選中咱們要調試的網站域名，能夠看到右邊有對應的 key 和 value，能夠經過右鍵進行編輯或刪除等。

兼容

IE8 以上就兼容，可是比較特別，須要在服務器上打開的才支持，直接雙擊打開文件的 file:// 是不兼容的。

到了 IE11 才支持 file:// 下打開的，其餘瀏覽器的支持程度都很高，包括在手機上的兼容。具體兼容可查看：http://caniuse.com/#search=localstorage