HTML5 高階系列：web Storage
HTML5 的 web Storage 儲存方式有兩種：localStorage 和 sessionStorage。
這兩種方式都是通過鍵值對儲存資料，存取方便，不影響網站效能。他們的用法相同，儲存時間不同。
localStorage 的資料儲存在本地硬體上，可以永久儲存，可以手動呼叫api清除資料。sessionStorage 儲存在 session 物件中，會在瀏覽器關閉時被清除。
web Storage 的大小在瀏覽器上是有限制的，不同瀏覽器大小會有區別，在主流瀏覽器中，大小約為 5M，用來儲存普通資料其實已經足夠。
用法
更多的學習資源
+web前端互動交流群434*62*39*99以
localStorage 為例，sessionStorage用法一樣：setItem
儲存資料：
localStorage.setItem(key,value);示例：
localStorage.setItem('name','Hello World');
當
key 相同時會覆蓋之前的 value，用於修改資料。如果 value 為物件，需轉為 json 字串，否則你讀取出來的將會是 [object Object]getItem
讀取資料：
localStorage.getItem(key);示例：
localStorage.getItem('name'); // Hello World
removeItem
刪除單個資料：
localStorage.removeItem(key);示例：
localStorage.removeItem('name');
localStorage.getItem('name'); // null
刪除
key 為 name 的資料後，loaclStorage 裡已經獲取不到該資料，則返回 null;clear
刪除所有資料：
localStorage.clear();示例：
localStorage.clear();
此時會把
localStorage 中的所有資料都刪除。key
得到某個索引的
key：localStorage.key(index);示例：
localStorage.setItem('name1','Hello World');
localStorage.setItem('name2','Hello Linxin');
localStorage.key(1); // name2
獲取到索引為
1 的 key，即 name2。建構函式
在實際專案中，可能需要多次對
localStorage 進行操作，我們可以通過一個建構函式來更好的操作。示例：
var localEvent = function (item) {
this.get = function () {
returnlocalStorage.getItem(item);
}
this.set = function (val) {
localStorage.setItem(item, val);
}
this.remove = function () {
localStorage.removeItem(item);
}
this.clear = function () {
localStorage.clear();
}
}
// 使用new字元把建構函式例項化出多個物件
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
這裡只是簡單的演示，像我們平時在專案中可能要把物件儲存起來，就需要在程式碼裡做些處理。
監聽
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，可以通過右鍵進行編輯或刪除等。想要學習前端開發的，可以加群：543#6273#93 學習哦！