HTML5本地儲存之localStorage、sessionStorage的具體分析

1、概述

localStorage和sessionStorage統稱為Web Storage，它使得網頁可以在瀏覽器端儲存資料。

sessionStorage保存的資料用於瀏覽器的一次會話，當會話結束（通常是該視窗關閉），資料被清空；localStorage保存的資料長期存在，下次造訪該網站的時候，網頁可以直接讀取先前儲存的資料。除了保質期的長短不同，這兩個物件的屬性和方法完全一樣。

它們很像cookie機制的強化版，能夠動用大得多的儲存空間。目前，每個網域的儲存上限視瀏覽器而定，Chrome是2.5MB，Firefox和Opera是5MB，IE是10MB。其中，Firefox的儲存空間由一級網域決定，而其他瀏覽器則沒有這個限制。也就是說，在Firefox中，a.example.com和b.example共享5MB的儲存空間。另外，與cookie一樣，它們也受同域限制。某個網頁存入的數據，只有同域下的網頁才能讀取。

透過檢查window物件是否包含sessionStorage和localStorage屬性，可以確定瀏覽器是否支援這兩個物件。

function checkStorageSupport() {    
var result = {};    
//sessionStorage
    if (window.sessionStorage) {
        result.sessionStorage = true;
    } else {
        result.sessionStorage = false;
    }    //localStorage
    if (window.localStorage) {
        result.localStorage = true;
    } else {
        result.localStorage = false;
    }    return result;

}

2、操作方法

2.1 存入/讀取資料

sessionStorage和localStorage保存的數據，都以「鍵值對」的形式存在。也就是說，每一項資料都有一個鍵名和對應的值。所有的資料都是以文字格式儲存。

存入資料用setItem方法。它接受兩個參數，第一個是鍵名，第二個是儲存的資料。

sessionStorage.setItem('key', 'value');

localStorage.setTime('key', 'value');

讀取資料使用getItem方法。它只有一個參數，就是鍵名。

var valueSession = sessionStorage.getItem('key');var valueLocal = localStorage.getItem('key');

2.2 清除資料

removeItem方法用於清除某個鍵名對應的資料。

sessionStorage.removeItem('key');

localStorage.removeItem('key');

clear方法用於清除所有已儲存的資料。

sessionStorage.clear();

localStorage.clear();

2.3 遍歷操作

利用length屬性和key方法，可以遍歷所有的鍵。

for (var i = 0; i < localStorage.length; i++) {
    console.log(localStorage.key(i));
}

其中的key方法，根據位置（從0開始）獲得鍵值。

localStorage.key(1);

3、storage事件

當儲存的資料發生變化時，會觸發storage事件。我們可以指定這個事件的回呼函數。

window.addEventListener('storage', onStorageChange);

回呼函數接受一個event物件作為參數。這個event物件的key屬性，保存發生變化的鍵名。

function onStorageChange(e) {
    console.log(e.key);
}

除了key屬性，event物件的屬性還有三個：

oldValue：更新前的值。如果該鍵為新增加，則這個屬性為null。

newValue：更新後的值。如果該鍵被刪除，則這個屬性為null。

url：原始觸發storage事件的那個網頁的網址。

值得特別注意的是，該事件不在導致資料變更的當前頁面觸發。如果瀏覽器同時開啟一個網域下方的多個頁面，當其中一個頁面改變sessionStorage或localStorage的資料時，其他所有頁面的storage事件會被觸發，而原始頁面不會觸發storage事件。可以透過這種機制，實現多個視窗之間的通訊。在所有瀏覽器之中，只有IE瀏覽器除外，它會在所有頁面觸發storage事件。

以上是HTML5本地儲存之localStorage、sessionStorage的具體分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！