瀏覽器 Storage 介面

storage 介面用於指令碼在瀏覽器儲存資料。兩個物件部署了這個介面：window.sessionstorage和window.localstorage。

sessionstorage儲存的資料用於瀏覽器的一次會話（session），當會話結束（通常是視窗關閉），資料被清空；localstorage儲存的資料長期存在，下一次訪問該**的時候，網頁可以直接讀取以前儲存的資料。除了儲存期限的長短不同，這兩個物件的其他方面都一致。

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

這個介面很像 cookie 的強化版，能夠使用大得多的儲存空間。目前，每個網域名稱的儲存上限視瀏覽器而定，chrome 是 2.5mb，firefox 和 opera 是 5mb，ie 是 10mb。其中，firefox 的儲存空間由一級網域名稱決定，而其他瀏覽器沒有這個限制。也就是說，firefox 中，a.example.com和b.example.com共享 5mb 的儲存空間。另外，與 cookie 一樣，它們也受同域限制。某個網頁存入的資料，只有同域下的網頁才能讀取，如果跨域操作會報錯。

storage 介面只有乙個屬性。

window.localstorage.setitem('foo', 'a');
window.localstorage.setitem('bar', 'b');
window.localstorage.setitem('baz', 'c');
window.localstorage.length 
//3

該介面提供5個方法。

storage.setitem()方法用於存入資料。它接受兩個引數，第乙個是鍵名，第二個是儲存的資料。如果鍵名已經存在，該方法會更新已有的鍵值。該方法沒有返回值。

window.sessionstorage.setitem('key', 'value');
window.localstorage.setitem('key', 'value');

注意，storage.setitem()兩個引數都是字串。如果不是字串，會自動轉成字串，再存入瀏覽器。

window.sessionstorage.setitem(3, );
window.sessionstorage.getitem('3') //
"[object object]"

上面**中，setitem方法的兩個引數都不是字串，但是存入的值都是字串。

如果儲存空間已滿，該方法會拋錯。

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

//
下面三種寫法等價
window.localstorage.foo = '123';
window.localstorage['foo'] = '123';
window.localstorage.setitem('foo', '123');

storage.getitem()方法用於讀取資料。它只有乙個引數，就是鍵名。如果鍵名不存在，該方法返回null。

2.2、storage.getitem()
storage.getitem()方法用於讀取資料。它只有乙個引數，就是鍵名。如果鍵名不存在，該方法返回null。

鍵名應該是乙個字串，否則會被自動轉為字串。

storage.removeitem()方法用於清除某個鍵名對應的鍵值。它接受鍵名作為引數，如果鍵名不存在，該方法不會做任何事情。

sessionstorage.removeitem('key');
localstorage.removeitem('key');

storage.clear()方法用於清除所有儲存的資料。該方法的返回值是undefined。

window.sessionstorage.clear()
window.localstorage.clear()

storage.key()接受乙個整數作為引數（從零開始），返回該位置對應的鍵值。

window.sessionstorage.setitem('key', 'value');
window.sessionstorage.key(0) //
"key"

結合使用storage.length屬性和storage.key()方法，可以遍歷所有的鍵。

for (var i = 0; i < window.localstorage.length; i++)

結合使用storage.length屬性和storage.key()方法，可以遍歷所有的鍵。

for (var i = 0; i < window.localstorage.length; i++)

storage 介面儲存的資料發生變化時，會觸發 storage 事件，可以指定這個事件的監聽函式。

window.addeventlistener('storage', onstoragechange);

監聽函式接受乙個event例項物件作為引數。這個例項物件繼承了 storageevent 介面，有幾個特有的屬性，都是唯讀屬性。

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

function
onstoragechange(e) 
window.addeventlistener('storage', onstoragechange);

注意，該事件有乙個很特別的地方，就是它不在導致資料變化的當前頁面觸發，而是在同乙個網域名稱的其他視窗觸發。也就是說，如果瀏覽器只開啟乙個視窗，可能觀察不到這個事件。比如同時開啟多個視窗，當其中的乙個視窗導致儲存的資料發生改變時，只有在其他視窗才能觀察到監聽函式的執行。可以通過這種機制，實現多個視窗之間的通訊。

瀏覽器 Storage 介面

從客戶端瀏覽器直傳檔案到Storage

瀏覽器瀏覽器高效搜尋

常見瀏覽器瀏覽器核心

瀏覽器 Storage 介面

從客戶端瀏覽器直傳檔案到Storage

瀏覽器 瀏覽器高效搜尋

常見瀏覽器 瀏覽器核心

相關推薦

瀏覽器瀏覽器高效搜尋

常見瀏覽器瀏覽器核心