?
本文檔使用 PHP中文網(wǎng)手冊 發(fā)布
概述
操作方法
存入/讀取數(shù)據(jù)
清除數(shù)據(jù)
遍歷操作
storage事件
參考鏈接
概述
這個API的作用是，使得網(wǎng)頁可以在瀏覽器端儲存數(shù)據(jù)。它分成兩類：sessionStorage和localStorage。
sessionStorage保存的數(shù)據(jù)用于瀏覽器的一次會話，當(dāng)會話結(jié)束（通常是該窗口關(guān)閉），數(shù)據(jù)被清空；localStorage保存的數(shù)據(jù)長期存在，下一次訪問該網(wǎng)站的時候，網(wǎng)頁可以直接讀取以前保存的數(shù)據(jù)。除了保存期限的長短不同，這兩個對象的屬性和方法完全一樣。
它們很像cookie機(jī)制的強(qiáng)化版，能夠動用大得多的存儲空間。目前，每個域名的存儲上限視瀏覽器而定，Chrome是2.5MB，F(xiàn)irefox和Opera是5MB，IE是10MB。其中，F(xiàn)irefox的存儲空間由一級域名決定，而其他瀏覽器沒有這個限制。也就是說，在Firefox中，a.example.com和b.example.com共享5MB的存儲空間。另外，與cookie一樣，它們也受同域限制。某個網(wǎng)頁存入的數(shù)據(jù)，只有同域下的網(wǎng)頁才能讀取。
通過檢查window對象是否包含sessionStorage和localStorage屬性，可以確定瀏覽器是否支持這兩個對象。
function checkStorageSupport() {
// sessionStorage
if (window.sessionStorage) {
return true;
} else {
return false;
}
// localStorage
if (window.localStorage) {
return true;
} else {
return false;
}
}
操作方法
存入/讀取數(shù)據(jù)
sessionStorage和localStorage保存的數(shù)據(jù)，都以“鍵值對”的形式存在。也就是說，每一項(xiàng)數(shù)據(jù)都有一個鍵名和對應(yīng)的值。所有的數(shù)據(jù)都是以文本格式保存。
存入數(shù)據(jù)使用setItem方法。它接受兩個參數(shù)，第一個是鍵名，第二個是保存的數(shù)據(jù)。
sessionStorage.setItem("key","value");
localStorage.setItem("key","value");
讀取數(shù)據(jù)使用getItem方法。它只有一個參數(shù)，就是鍵名。
var valueSession = sessionStorage.getItem("key");
var valueLocal = localStorage.getItem("key");
清除數(shù)據(jù)
removeItem方法用于清除某個鍵名對應(yīng)的數(shù)據(jù)。
sessionStorage.removeItem('key');
localStorage.removeItem('key');
clear方法用于清除所有保存的數(shù)據(jù)。
sessionStorage.clear(); localStorage.clear();
遍歷操作
利用length屬性和key方法，可以遍歷所有的鍵。
for(var i = 0; i < localStorage.length; i++){
console.log(localStorage.key(i));
}
其中的key方法，根據(jù)位置（從0開始）獲得鍵值。
localStorage.key(1);
storage事件
當(dāng)儲存的數(shù)據(jù)發(fā)生變化時，會觸發(fā)storage事件。我們可以指定這個事件的回調(diào)函數(shù)。
window.addEventListener("storage",onStorageChange);
回調(diào)函數(shù)接受一個event對象作為參數(shù)。這個event對象的key屬性，保存發(fā)生變化的鍵名。
function onStorageChange(e) {
console.log(e.key);
}
除了key屬性，event對象的屬性還有三個：
oldValue：更新前的值。如果該鍵為新增加，則這個屬性為null。
newValue：更新后的值。如果該鍵被刪除，則這個屬性為null。
url：原始觸發(fā)storage事件的那個網(wǎng)頁的網(wǎng)址。
值得特別注意的是，該事件不在導(dǎo)致數(shù)據(jù)變化的當(dāng)前頁面觸發(fā)。如果瀏覽器同時打開一個域名下面的多個頁面，當(dāng)其中的一個頁面改變sessionStorage或localStorage的數(shù)據(jù)時，其他所有頁面的storage事件會被觸發(fā)，而原始頁面并不觸發(fā)storage事件?？梢酝ㄟ^這種機(jī)制，實(shí)現(xiàn)多個窗口之間的通信。所有瀏覽器之中，只有IE瀏覽器除外，它會在所有頁面觸發(fā)storage事件。
參考鏈接
Ryan Stewart，Introducing the HTML5 storage APIs
Feross Aboukhadijeh, Introducing the HTML5 Hard Disk Filler? API
Ben Summers, Inter-window messaging using localStorage