JavaScript Storage 接口

2023-03-20 15:45 更新

概述

Storage 接口用于腳本在瀏覽器保存數(shù)據(jù)。兩個(gè)對(duì)象部署了這個(gè)接口：window.sessionStorage和window.localStorage。

sessionStorage保存的數(shù)據(jù)用于瀏覽器的一次會(huì)話（session），當(dāng)會(huì)話結(jié)束（通常是窗口關(guān)閉），數(shù)據(jù)被清空；localStorage保存的數(shù)據(jù)長期存在，下一次訪問該網(wǎng)站的時(shí)候，網(wǎng)頁可以直接讀取以前保存的數(shù)據(jù)。除了保存期限的長短不同，這兩個(gè)對(duì)象的其他方面都一致。

保存的數(shù)據(jù)都以“鍵值對(duì)”的形式存在。也就是說，每一項(xiàng)數(shù)據(jù)都有一個(gè)鍵名和對(duì)應(yīng)的值。所有的數(shù)據(jù)都是以文本格式保存。

這個(gè)接口很像 Cookie 的強(qiáng)化版，能夠使用大得多的存儲(chǔ)空間。目前，每個(gè)域名的存儲(chǔ)上限視瀏覽器而定，Chrome 是 2.5MB，F(xiàn)irefox 和 Opera 是 5MB，IE 是 10MB。其中，F(xiàn)irefox 的存儲(chǔ)空間由一級(jí)域名決定，而其他瀏覽器沒有這個(gè)限制。也就是說，F(xiàn)irefox 中，a.example.com和b.example.com共享 5MB 的存儲(chǔ)空間。另外，與 Cookie 一樣，它們也受同域限制。某個(gè)網(wǎng)頁存入的數(shù)據(jù)，只有同域下的網(wǎng)頁才能讀取，如果跨域操作會(huì)報(bào)錯(cuò)。

屬性和方法

Storage 接口只有一個(gè)屬性。

Storage.length：返回保存的數(shù)據(jù)項(xiàng)個(gè)數(shù)。

window.localStorage.setItem('foo', 'a');
window.localStorage.setItem('bar', 'b');
window.localStorage.setItem('baz', 'c');

window.localStorage.length // 3

該接口提供5個(gè)方法。

Storage.setItem()

Storage.setItem()方法用于存入數(shù)據(jù)。它接受兩個(gè)參數(shù)，第一個(gè)是鍵名，第二個(gè)是保存的數(shù)據(jù)。如果鍵名已經(jīng)存在，該方法會(huì)更新已有的鍵值。該方法沒有返回值。

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

注意，Storage.setItem()兩個(gè)參數(shù)都是字符串。如果不是字符串，會(huì)自動(dòng)轉(zhuǎn)成字符串，再存入瀏覽器。

window.sessionStorage.setItem(3, { foo: 1 });
window.sessionStorage.getItem('3') // "[object Object]"

上面代碼中，setItem方法的兩個(gè)參數(shù)都不是字符串，但是存入的值都是字符串。

如果儲(chǔ)存空間已滿，該方法會(huì)拋錯(cuò)。

寫入不一定要用這個(gè)方法，直接賦值也是可以的。

// 下面三種寫法等價(jià)
window.localStorage.foo = '123';
window.localStorage['foo'] = '123';
window.localStorage.setItem('foo', '123');

Storage.getItem()

Storage.getItem()方法用于讀取數(shù)據(jù)。它只有一個(gè)參數(shù)，就是鍵名。如果鍵名不存在，該方法返回null。

window.sessionStorage.getItem('key')
window.localStorage.getItem('key')

鍵名應(yīng)該是一個(gè)字符串，否則會(huì)被自動(dòng)轉(zhuǎn)為字符串。

Storage.removeItem()

Storage.removeItem()方法用于清除某個(gè)鍵名對(duì)應(yīng)的鍵值。它接受鍵名作為參數(shù)，如果鍵名不存在，該方法不會(huì)做任何事情。

sessionStorage.removeItem('key');
localStorage.removeItem('key');

Storage.clear()

Storage.clear()方法用于清除所有保存的數(shù)據(jù)。該方法的返回值是undefined。

window.sessionStorage.clear()
window.localStorage.clear()

Storage.key()

Storage.key()方法接受一個(gè)整數(shù)作為參數(shù)（從零開始），返回該位置對(duì)應(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 接口儲(chǔ)存的數(shù)據(jù)發(fā)生變化時(shí)，會(huì)觸發(fā) storage 事件，可以指定這個(gè)事件的監(jiān)聽函數(shù)。

window.addEventListener('storage', onStorageChange);

監(jiān)聽函數(shù)接受一個(gè)event實(shí)例對(duì)象作為參數(shù)。這個(gè)實(shí)例對(duì)象繼承了 StorageEvent 接口，有幾個(gè)特有的屬性，都是只讀屬性。

StorageEvent.key：字符串，表示發(fā)生變動(dòng)的鍵名。如果 storage 事件是由clear()方法引起，該屬性返回null。
StorageEvent.newValue：字符串，表示新的鍵值。如果 storage 事件是由clear()方法或刪除該鍵值對(duì)引發(fā)的，該屬性返回null。
StorageEvent.oldValue：字符串，表示舊的鍵值。如果該鍵值對(duì)是新增的，該屬性返回null。
StorageEvent.storageArea：對(duì)象，返回鍵值對(duì)所在的整個(gè)對(duì)象。也說是說，可以從這個(gè)屬性上面拿到當(dāng)前域名儲(chǔ)存的所有鍵值對(duì)。
StorageEvent.url：字符串，表示原始觸發(fā) storage 事件的那個(gè)網(wǎng)頁的網(wǎng)址。

下面是StorageEvent.key屬性的例子。

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

window.addEventListener('storage', onStorageChange);

注意，該事件有一個(gè)很特別的地方，就是它不在導(dǎo)致數(shù)據(jù)變化的當(dāng)前頁面觸發(fā)，而是在同一個(gè)域名的其他窗口觸發(fā)。也就是說，如果瀏覽器只打開一個(gè)窗口，可能觀察不到這個(gè)事件。比如同時(shí)打開多個(gè)窗口，當(dāng)其中的一個(gè)窗口導(dǎo)致儲(chǔ)存的數(shù)據(jù)發(fā)生改變時(shí)，只有在其他窗口才能觀察到監(jiān)聽函數(shù)的執(zhí)行?？梢酝ㄟ^這種機(jī)制，實(shí)現(xiàn)多個(gè)窗口之間的通信。