前言
HTML5的web Storage存儲方式有兩種：localStorage和sessionStorage淑翼。
這兩種方式都是通過鍵值對保存數(shù)據(jù)塔粒，存取方便，不影響網(wǎng)站性能身冬。他們的用法相同衅胀，存儲時間不同。
localStorage的數(shù)據(jù)保存在本地硬件上酥筝，可以永久保存滚躯，可以手動調(diào)用api清除數(shù)據(jù)。sessionStorage保存在session對象中樱哼，會在瀏覽器關閉時被清除。
web Storage的大小在瀏覽器上是有限制的剿配，不同瀏覽器大小會有區(qū)別搅幅，在主流瀏覽器中，大小約為5M呼胚，用來存儲普通數(shù)據(jù)其實已經(jīng)足夠茄唐。
用法
以localStorage為例，sessionStorage用法一樣：
setItem
保存數(shù)據(jù)：localStorage.setItem(key,value);
示例：
localStorage.setItem('name','Hello World');
當key相同時會覆蓋之前的value，用于修改數(shù)據(jù)沪编。如果value為對象呼盆，需轉為json字符串，否則你讀取出來的將會是[object Object]
getItem
讀取數(shù)據(jù)：localStorage.getItem(key);
示例：
localStorage.getItem('name');? ?? ? // Hello World
removeItem
刪除單個數(shù)據(jù)：localStorage.removeItem(key);
示例：
localStorage.removeItem('name');
localStorage.getItem('name');? ?? ? // null
刪除key為name的數(shù)據(jù)后蚁廓，loaclStorage里已經(jīng)獲取不到該數(shù)據(jù)访圃，則返回null;
clear
刪除所有數(shù)據(jù)：localStorage.clear();
示例：
localStorage.clear();
此時會把localStorage中的所有數(shù)據(jù)都刪除。
key
得到某個索引的key：localStorage.key(index);
示例：
localStorage.setItem('name1','Hello World');
localStorage.setItem('name2','Hello Linxin');
localStorage.key(1);? ?? ?? ?? ?? ? // name2
獲取到索引為1的key相嵌，即name2腿时。
構造函數(shù)
在實際項目中，可能需要多次對localStorage進行操作饭宾，我們可以通過一個構造函數(shù)來更好的操作批糟。
更多資料免費分享加群 ? ? ?120342833 ? ? ?驗證回答 ? ? ?ZZ
示例：
var localEvent = function (item) {
this.get = function () {
return localStorage.getItem(item);
}
this.set = function (val) {
localStorage.setItem(item, val);
}
this.remove = function () {
localStorage.removeItem(item);
}
this.clear = function () {
localStorage.clear();
}
}
//使用new字符把構造函數(shù)實例化出多個對象
var local1 = new localEvent('name1');
var local2 = new localEvent('name2');
local1.set('Hello World');
local2.set('Hello Linxin');
local1.get();? ?? ?? ?? ?? ?// Hello World
local2.get();? ?? ?? ?? ?? ?// Hello Linxin
這里只是簡單的演示，像我們平時在項目中可能要把對象存儲起來看铆，就需要在代碼里做些處理徽鼎。
監(jiān)聽storage事件
可以通過監(jiān)聽window對象的storage事件并指定其事件處理函數(shù)，當頁面中對localStorage或sessionStorage進行修改時弹惦，則會觸發(fā)對應的處理函數(shù)否淤。
window.addEventListener('storage',function(e){
console.log('key='+e.key+',oldValue='+e.oldValue+',newValue='+e.newValue);
})
觸發(fā)事件的時間對象（e參數(shù)值）有幾個屬性：
key :鍵值。
oldValue :被修改前的值肤频。
newValue :被修改后的值叹括。
url :頁面url。
storageArea :被修改的storage對象宵荒。
注意：在谷歌瀏覽器中汁雷，需要在不同標簽頁中修改storage才會觸發(fā)該事件，即 網(wǎng)頁A監(jiān)聽該事件报咳，在 網(wǎng)頁B中修改localStorage侠讯，則 網(wǎng)頁A會觸發(fā)事件函數(shù)。但是在IE中暑刃，在同個網(wǎng)頁修改localStorage都會觸發(fā)該事件厢漩。
調(diào)試
谷歌瀏覽器自帶調(diào)試工具(chrome devtools)非常好用，可以用來調(diào)試localStorage和sessionStorage岩臣。打開瀏覽器按f12調(diào)出調(diào)試工具溜嗜，可以看到Application，點擊打開可以看到左邊欄有Storage架谎，包括了localStorage炸宵、sessionStorage、IndexedDB等谷扣，選中我們要調(diào)試的網(wǎng)站域名土全，可以看到右邊有對應的key和value，可以通過右鍵進行編輯或刪除等。
兼容
IE8以上就兼容裹匙，但是比較特別瑞凑，需要在服務器上打開的才支持，直接雙擊打開文件的file://是不兼容的概页。
到了IE11才支持file://下打開的籽御，其他瀏覽器的支持程度都很高，包括在手機上的兼容绰沥。具體兼容可查看：http://caniuse.com/#search=localstorage
v?y???O
