基本概念

Web Storage 包含兩種機(jī)制：

• sessionStorage為每一個給定的源維持一個獨立的存儲區(qū)域，該區(qū)域在頁面會話期間可用（即只要瀏覽器處于打開狀態(tài)，包括頁面重新加載和恢復(fù)）

• localStorage同樣的功能，但是在瀏覽器關(guān)閉，然后重新打開后數(shù)據(jù)仍然存在

這兩種機(jī)制是通過Window.sessionStorage和Window.localStorage屬性使用。更確切的說，在支持的瀏覽器中Window對象實現(xiàn)了WindowLocalStorage和WindowSessionStorage對象并掛在其localStorage和sessionStorage屬性下。調(diào)用其中任一對象會創(chuàng)建Storage對象，通過Storage對象，可以設(shè)置、獲取和移除數(shù)據(jù)項。對于每個源sessionStorage和localStorage使用不同的Storage對象。

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

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

Storage對象

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

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

Storage對象的屬性和方法

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

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

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

• Storage.getItem()：該方法接受一個鍵名作為參數(shù)，返回鍵名對應(yīng)的值

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

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

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

簡單的示例

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

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

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

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

  本地存儲基本用法

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

  localStorage.setItem('key', 'value'); // 設(shè)置一個localStorage，名稱叫`key`localStorage.getItem('key'); // 獲取存儲的localStorage，獲取的`key`對應(yīng)的值`value`localStorage.removeItem('key'); // 移除存儲的localStorage，刪除的名稱`key`localStorage.clear(); // 刪除所有的localStorage

  為了方便使用，可以對其進(jìn)行封裝。

  設(shè)置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類似。

來源：愛創(chuàng)課堂

轉(zhuǎn)載于:https://blog.51cto.com/13035262/1942295

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。