1 概述
JavaScript提供2個(gè)方法在瀏覽器端儲(chǔ)存數(shù)據(jù)：sessionStorage 和 localStorage昭卓。
-
sessionStorage：保存的數(shù)據(jù)用于瀏覽器的一次會(huì)話盟庞，當(dāng)會(huì)話結(jié)束（通常是該窗口關(guān)閉）腔寡，數(shù)據(jù)被清空乐横； -
localStorage：保存的數(shù)據(jù)長(zhǎng)期存在厦章，下一次訪問該網(wǎng)站的時(shí)候赁咙，網(wǎng)頁可以直接讀取以前保存的數(shù)據(jù)钮莲。除了保存期限的長(zhǎng)短不同，這兩個(gè)對(duì)象的屬性和方法完全一樣彼水。
它們很像cookie機(jī)制的強(qiáng)化版崔拥，能夠動(dòng)用大得多的存儲(chǔ)空間。目前凤覆，每個(gè)域名的存儲(chǔ)上限視瀏覽器而定握童，Chrome是2.5MB，F(xiàn)irefox和Opera是5MB叛赚，IE是10MB澡绩。其中稽揭，F(xiàn)irefox的存儲(chǔ)空間由一級(jí)域名決定，而其他瀏覽器沒有這個(gè)限制肥卡。也就是說溪掀，在Firefox中，a.example.com 和 b.example.com 共享5MB的存儲(chǔ)空間步鉴。另外揪胃，與cookie一樣，它們也受同域限制氛琢。某個(gè)網(wǎng)頁存入的數(shù)據(jù)喊递，只有同域下的網(wǎng)頁才能讀取。
通過檢查window對(duì)象是否包含sessionStorage 和 localStorage屬性阳似，可以確定瀏覽器是否支持這兩個(gè)對(duì)象骚勘。
function checkStorageSupport()
{
// sessionStorage
if (window.sessionStorage) {
return true;
} else {
return false;
}
// localStorage
if (window.localStorage) {
return true;
} else {
return false;
}
}
2 操作方法
sessionStorage 和 localStorage 保存的數(shù)據(jù)，都以“鍵值對(duì)”的形式存在撮奏。也就是說俏讹，每一項(xiàng)數(shù)據(jù)都有一個(gè)鍵名和對(duì)應(yīng)的值。所有的數(shù)據(jù)都是以文本格式保存畜吊。
其中value需為可轉(zhuǎn)化為字符串的對(duì)象
sessionStorage 操作
sessionStorage.setItem("key","value"); // setItem方法泽疆，存儲(chǔ)變量名為key，值為value的變量
var valueSession = sessionStorage.getItem("key"); // getItem方法玲献，讀取存儲(chǔ)變量名為key的值
sessionStorage.removeItem('key'); // removeItem方法殉疼，刪除變量名為key的存儲(chǔ)變量
sessionStorage.clear(); // clear方法，清除所有保存數(shù)據(jù)
localStorage 操作
localStorage.setItem("key","value"); // 存儲(chǔ)變量名為key捌年，值為value的變量
localStorage.key = "value" // 同setItem方法瓢娜，存儲(chǔ)數(shù)據(jù)
var valueLocal = localStorage.getItem("key"); // 讀取存儲(chǔ)變量名為key的值
var valueLocal = localStorage.key; // 同getItem，讀取數(shù)據(jù)
localStorage.removeItem('key'); // removeItem方法延窜，刪除變量名為key的存儲(chǔ)變量
localStorage.clear(); // clear方法，清除所有保存的數(shù)據(jù)
// 利用length屬性和key方法抹锄，遍歷所有的數(shù)據(jù)
for(var i = 0; i < localStorage.length; i++)
{
console.log(localStorage.key(i));
}
// 存儲(chǔ) localStorage 數(shù)據(jù)為 Json 格式
value = JSON.stringify(jsonValue); // 將 JSON 對(duì)象 jsonValue 轉(zhuǎn)化成字符串
localStorage.setItem("key", value); // 用 localStorage 保存轉(zhuǎn)化好的的字符串
// 讀取 localStorage 中 Json 格式數(shù)據(jù)
var value = localStorage.getItem("key"); // 取回 value 變量
jsonValue = JSON.parse(value); // 把字符串轉(zhuǎn)換成 JSON 對(duì)象
3 storage 事件
當(dāng)儲(chǔ)存的數(shù)據(jù)發(fā)生變化時(shí)逆瑞，會(huì)觸發(fā) storage 事件。我們可以指定這個(gè)事件的回調(diào)函數(shù)伙单。
window.addEventListener("storage",onStorageChange); //監(jiān)聽事件
除了key屬性获高，event對(duì)象的屬性還有三個(gè)：
- oldValue：更新前的值。如果該鍵為新增加吻育，則這個(gè)屬性為null念秧。
- newValue：更新后的值。如果該鍵被刪除布疼，則這個(gè)屬性為null摊趾。
- url：原始觸發(fā)storage事件的那個(gè)網(wǎng)頁的網(wǎng)址币狠。
值得特別注意的是，該事件不在導(dǎo)致數(shù)據(jù)變化的當(dāng)前頁面觸發(fā)砾层。如果瀏覽器同時(shí)打開一個(gè)域名下面的多個(gè)頁面漩绵，當(dāng)其中的一個(gè)頁面改變sessionStorage或localStorage的數(shù)據(jù)時(shí)，其他所有頁面的storage事件會(huì)被觸發(fā)肛炮，而原始頁面并不觸發(fā)storage事件止吐。可以通過這種機(jī)制侨糟，實(shí)現(xiàn)多個(gè)窗口之間的通信碍扔。所有瀏覽器之中，只有IE瀏覽器除外秕重，它會(huì)在所有頁面觸發(fā)storage事件不同。
·
