基本概念

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類似。

來源：愛創課堂

轉載于:https://blog.51cto.com/13035262/1942295

總結

以上是生活随笔為你收集整理的Web存储机制—sessionStorage,localStorage使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。