BOM 瀏覽器對象模型_Storage 接口 - window.sessionStorage - window.localStorage

Storage 接口

用於腳本在瀏覽器保存數據。

• 保存的數據都以「鍵值對」的形式存在。也就是說，每一項數據都有一個鍵名和對應的值。
• 全部的數據都是以文本格式保存
• 受同域限制 ---- 某個網頁存入的數據，只有同域下的網頁才能讀取，若是跨域操做會報錯

只有一個屬性：

• Storage.length ---- 返回保存的數據項個數

有五個方法

• Storage.setItem()

用於存入數據 ---- 若是儲存空間已滿，該方法會拋錯

該方法沒有返回值

它接受兩個參數 (兩個參數都是字符串。若是不是字符串，會自動轉成字符串，再存入瀏覽器)

• 第一個是鍵名 ---- 若是鍵名已經存在，該方法會更新已有的鍵值
• 第二個是保存的數據
• 支持直接寫入

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

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

Storage.getItem()

用於讀取數據

只有一個參數，就是鍵名 ---- 若是鍵名不存在，該方法返回null

鍵名應該是一個字符串，不然會被自動轉爲字符串

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

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++) {
      console.log(localStorage.key(i));
  }

Storage 接口儲存的數據發生變化時，會觸發 storage 事件

window.addEventListener('storage', onStorageChange);

接受一個 event 實例對象做爲參數。這個實例對象繼承了 StorageEvent 接口

有如下幾個特有的屬性，都是隻讀屬性

• StorageEvent.key ---- 字符串，表示發生變更的鍵名

若是 storage 事件是由 clear() 方法引發，該屬性返回null

特別注意：

它不在致使數據變化的當前頁面觸發，而是在同一個域名的其餘窗口觸發

也就是說，若是瀏覽器只打開一個窗口，可能觀察不到這個事件

好比同時打開多個窗口，當其中的一個窗口致使儲存的數據發生改變時，只有在其餘窗口才能觀察到監聽函數的執行

能夠經過這種機制，實現多個窗口之間的通訊

• function onStorageChange(e) {
      console.log(e.key);
  }
  
  window.addEventListener('storage', onStorageChange);

• StorageEvent.newValue ---- 字符串，表示新的鍵值

若是 storage 事件是由 clear() 方法 或 刪除該鍵值對 引起的，該屬性返回null

• StorageEvent.oldValue ---- 字符串，表示舊的鍵值

若是該鍵值對是新增的，該屬性返回null

• StorageEvent.storageArea ---- 對象，返回鍵值對所在的整個對象

也說是說，能夠從這個屬性上面拿到當前域名儲存的全部鍵值對

• StorageEvent.url ---- 字符串，表示原始觸發 storage 事件的那個網頁的網址

4

4

4

window.sessionStorage 

保存的數據用於瀏覽器的一次會話（session），當會話結束（一般是窗口關閉），數據被清空

window.localStorage

存的數據長期存在，下一次訪問該網站的時候，網頁能夠直接讀取之前保存的數據