概述
Storage 接口用于腳本在瀏覽器保存數(shù)據(jù)。兩個對象部署了這個接口:window.sessionStorage
和window.localStorage
。
sessionStorage
保存的數(shù)據(jù)用于瀏覽器的一次會話(session),當會話結(jié)束(通常是窗口關(guān)閉),數(shù)據(jù)被清空;localStorage
保存的數(shù)據(jù)長期存在,下一次訪問該網(wǎng)站的時候,網(wǎng)頁可以直接讀取以前保存的數(shù)據(jù)。除了保存期限的長短不同,這兩個對象的其他方面都一致。
保存的數(shù)據(jù)都以“鍵值對”的形式存在。也就是說,每一項數(shù)據(jù)都有一個鍵名和對應(yīng)的值。所有的數(shù)據(jù)都是以文本格式保存。
這個接口很像 Cookie 的強化版,能夠使用大得多的存儲空間。目前,每個域名的存儲上限視瀏覽器而定,Chrome 是 2.5MB,F(xiàn)irefox 和 Opera 是 5MB,IE 是 10MB。其中,F(xiàn)irefox 的存儲空間由一級域名決定,而其他瀏覽器沒有這個限制。也就是說,F(xiàn)irefox 中,a.example.com
和b.example.com
共享 5MB 的存儲空間。另外,與 Cookie 一樣,它們也受同域限制。某個網(wǎng)頁存入的數(shù)據(jù),只有同域下的網(wǎng)頁才能讀取,如果跨域操作會報錯。
屬性和方法
Storage 接口只有一個屬性。
Storage.length
:返回保存的數(shù)據(jù)項個數(shù)。
window.localStorage.setItem('foo', 'a');
window.localStorage.setItem('bar', 'b');
window.localStorage.setItem('baz', 'c');
window.localStorage.length // 3
該接口提供5個方法。
Storage.setItem()
Storage.setItem()
方法用于存入數(shù)據(jù)。它接受兩個參數(shù),第一個是鍵名,第二個是保存的數(shù)據(jù)。如果鍵名已經(jīng)存在,該方法會更新已有的鍵值。該方法沒有返回值。
window.sessionStorage.setItem('key', 'value');
window.localStorage.setItem('key', 'value');
注意,Storage.setItem()
兩個參數(shù)都是字符串。如果不是字符串,會自動轉(zhuǎn)成字符串,再存入瀏覽器。
window.sessionStorage.setItem(3, { foo: 1 });
window.sessionStorage.getItem('3') // "[object Object]"
上面代碼中,setItem
方法的兩個參數(shù)都不是字符串,但是存入的值都是字符串。
如果儲存空間已滿,該方法會拋錯。
寫入不一定要用這個方法,直接賦值也是可以的。
// 下面三種寫法等價
window.localStorage.foo = '123';
window.localStorage['foo'] = '123';
window.localStorage.setItem('foo', '123');
Storage.getItem()
Storage.getItem()
方法用于讀取數(shù)據(jù)。它只有一個參數(shù),就是鍵名。如果鍵名不存在,該方法返回null
。
window.sessionStorage.getItem('key')
window.localStorage.getItem('key')
鍵名應(yīng)該是一個字符串,否則會被自動轉(zhuǎn)為字符串。
Storage.removeItem()
Storage.removeItem()
方法用于清除某個鍵名對應(yīng)的鍵值。它接受鍵名作為參數(shù),如果鍵名不存在,該方法不會做任何事情。
sessionStorage.removeItem('key');
localStorage.removeItem('key');
Storage.clear()
Storage.clear()
方法用于清除所有保存的數(shù)據(jù)。該方法的返回值是undefined
。
window.sessionStorage.clear()
window.localStorage.clear()
Storage.key()
Storage.key()
方法接受一個整數(shù)作為參數(shù)(從零開始),返回該位置對應(yīng)的鍵名。
window.sessionStorage.setItem('key', 'value');
window.sessionStorage.key(0) // "key"
結(jié)合使用Storage.length
屬性和Storage.key()
方法,可以遍歷所有的鍵。
for (var i = 0; i < window.localStorage.length; i++) {
console.log(localStorage.key(i));
}
storage 事件
Storage 接口儲存的數(shù)據(jù)發(fā)生變化時,會觸發(fā) storage 事件,可以指定這個事件的監(jiān)聽函數(shù)。
window.addEventListener('storage', onStorageChange);
監(jiān)聽函數(shù)接受一個event
實例對象作為參數(shù)。這個實例對象繼承了 StorageEvent 接口,有幾個特有的屬性,都是只讀屬性。
StorageEvent.key
:字符串,表示發(fā)生變動的鍵名。如果 storage 事件是由clear()
方法引起,該屬性返回null
。StorageEvent.newValue
:字符串,表示新的鍵值。如果 storage 事件是由clear()
方法或刪除該鍵值對引發(fā)的,該屬性返回null
。StorageEvent.oldValue
:字符串,表示舊的鍵值。如果該鍵值對是新增的,該屬性返回null
。StorageEvent.storageArea
:對象,返回鍵值對所在的整個對象。也說是說,可以從這個屬性上面拿到當前域名儲存的所有鍵值對。StorageEvent.url
:字符串,表示原始觸發(fā) storage 事件的那個網(wǎng)頁的網(wǎng)址。
下面是StorageEvent.key
屬性的例子。
function onStorageChange(e) {
console.log(e.key);
}
window.addEventListener('storage', onStorageChange);
注意,該事件有一個很特別的地方,就是它不在導(dǎo)致數(shù)據(jù)變化的當前頁面觸發(fā),而是在同一個域名的其他窗口觸發(fā)。也就是說,如果瀏覽器只打開一個窗口,可能觀察不到這個事件。比如同時打開多個窗口,當其中的一個窗口導(dǎo)致儲存的數(shù)據(jù)發(fā)生改變時,只有在其他窗口才能觀察到監(jiān)聽函數(shù)的執(zhí)行??梢酝ㄟ^這種機制,實現(xiàn)多個窗口之間的通信。
參考鏈接
- Ryan Stewart,Introducing the HTML5 storage APIs
- Getting Started with LocalStorage
- Feross Aboukhadijeh, Introducing the HTML5 Hard Disk Filler? API
- Ben Summers, Inter-window messaging using localStorage
- Stack Overflow, Why does Internet Explorer fire the window “storage” event on the window that stored the data?
- Stack Overflow, localStorage eventListener is not called
更多建議: