Web存儲機制—sessionStorage,localStorage使用方法

基本概念

Web Storage 包含兩種機制：

• sessionStorage爲每一個給定的源維持一個獨立的存儲區域，該區域在頁面會話期間可用（即只要瀏覽器處於打開狀態，包括頁面重新加載和恢復）

• localStorage同樣的功能，但是在瀏覽器關閉，然後重新打開後數據仍然存在

這兩種機制是通過Window.sessionStorage和Window.localStorage屬性使用。更確切的說，在支持的瀏覽器中Window對象實現了WindowLocalStorage和WindowSessionStorage對象並掛在其localStorage和sessionStorage屬性下。調用其中任一對象會創建Storage對象，通過Storage對象，可以設置、獲取和移除數據項。對於每個源sessionStorage和localStorage使用不同的Storage對象。

例如，在文檔中調用localStorage將會返回一個Storage對象，調用sessionStorage返回一個不同的Storage對象。可以使用相同的方式操作這些對象，但是操作是獨立的。

在瞭解如何使用localStorage和sessionStorage之前，先來一下Storage對象。

Storage對象

Storage對象作爲Web Storage API的接口，Storage提供了訪問特定域名下的會話存儲或本地存儲的功能。例如，可以添加、修改或刪除存儲的數據項。

如果想操作一個域名的會話存儲，可以使用Window.sessionStorage；如果想要操作一個域名的本地存儲，可以使用Window.localStorage。

Storage對象的屬性和方法

Storage對象提供自己的屬性和方法：

• Storage.length：返回一個整數，表示存儲在Storage對象中的數據項數量。這個是Storage對象的一個屬性，而且是一個只讀屬性。

• Storage.key()：該方法接受一個數值n作爲參數，並返回存儲中的第n個鍵名

• Storage.getItem()：該方法接受一個鍵名作爲參數，返回鍵名對應的值

• Storage.setItem()：該方法接受一個鍵名和值作爲參數，將會把鍵值對添加到存儲中，如果鍵名存在，則更新其對應的值

• Storage.removeItem()：該方法接受一個鍵名作爲參數，並把該鍵名從存儲中刪除

• Storage.clear()：調用該方法會清空存儲中的所有鍵名

簡單的示例

寫一個簡單的示例，頁面就三個按鈕：Set、Get和Remove。按鈕點擊時，分別綁定三個函數：setStorage()、getStorage()和removeStorage()：

• setStorage()：做了localStorage和sessionStorage存儲，同時存的鍵名爲name，鍵值爲W3cplus.com

• getStorage()：取得存儲的name，並打印出來

• removeStorage()：移除setStorage()函數中存儲的name

  本地存儲基本用法

  前面的示例也演示過了，接下來拿localStorage來做示例：

  localStorage.setItem('key', 'value'); // 設置一個localStorage，名稱叫`key`

  localStorage.getItem('key'); // 獲取存儲的localStorage，獲取的`key`對應的值`value`

  localStorage.removeItem('key'); // 移除存儲的localStorage，刪除的名稱`key`

  localStorage.clear(); // 刪除所有的localStorage

  爲了方便使用，可以對其進行封裝。

  設置localStorage

  function setLocalStorage(key, value) {

     return localStorage.setItem(key, value);

  }

  獲取localStorage

  function getLocalStorage(key) {

      return localStorage.getItem(key);

  }

  移除localStorage

  function removeLocalStorage(key) {

      return localStorage.removeItem(key);

  }

  注：sessionStorage使用方法和localStorage類似。

來源：愛創課堂