HTML5 高級教學之web Storage

前言

HTML5 的 web Storage 儲存方式有兩種：localStorage 和 sessionStorage。

這兩種方式都是透過鍵值對保存數據，訪問方便，不影響網站效能。他們的用法相同，儲存時間不同。
localStorage 的資料保存在本地硬體上，可以永久保存，可以手動呼叫api清除資料。 sessionStorage 儲存在 session 物件中，會在瀏覽器關閉時清除。

web Storage 的大小在瀏覽器上是有限制的，不同瀏覽器大小會有差別，在主流瀏覽器中，大小約為 5M，用來儲存普通資料其實已經足夠。

用法

以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 () {
        return localStorage.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 物件。

注意：在Google瀏覽器中，需要在不同標籤頁中修改storage 才會觸發該事件，即網頁A 監聽該事件，在網頁B 中修改localStorage，則網頁A 會觸發事件函數。但在 IE 中，在同個網頁修改 localStorage 都會觸發該事件。

調試

Google瀏覽器自帶偵錯工具(chrome devtools)非常好用，可以用來除錯  localStorage 和 sessionStorage。打開瀏覽器按f12調出調試工具，可以看到Application ，點擊打開可以看到左邊欄有Storage，包括了localStorage、sessionStorage、IndexedDB等，選中我們要調試的網站域名，可以看到右邊有對應的key和value，可以透過右鍵編輯或刪除等。

相容

IE8 以上就相容，但是比較特別，需要在伺服器上開啟的才支持，直接雙擊開啟檔案的 file:// 是不相容的。

到了 IE11 才支援 file:// 下開啟的，其他瀏覽器的支援程度都很高，包括在手機上的相容。

【相關推薦】

1. 

免費h5線上影片教學

2. 

HTML5 完整版手冊

#3. 

php.cn原始html5影片教學#

以上是HTML5 高級教學之web Storage的詳細內容。更多資訊請關注PHP中文網其他相關文章！