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

標籤：設定   web   問題   bsp   清除   網域名稱   用法   初學   基本概念   

Web儲存機制，在這裡主要聊有關於Web Storage API提供的儲存機制，通過該機制，瀏覽器可以安全地儲存索引值對，比使用cookie更加直觀。接下來簡單的瞭解如何使用這方面的技術。

基本概念

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

來看一下操作得到的效果。

首先點擊Set按鈕。使用瀏覽器開發人員工具，我們可以看到Local Storage和Session Storage都存了一個name的鍵名，其對應的索引值為W3cplus.com。如所示：

Local Storage

Session Storage

這個時候點擊Get按鈕，可以分別擷取setStorage()存的name的值，並且輸出：

接下來，再點擊Remove按鈕，再次開啟開發人員工具，查看Local Storage和Session Storage選項，可以看到，當初對應的Key和Value被清空了，比如下面是Session Storage：

這個時候，再次點擊Get按鈕，輸出的內容為null：

上面我們看到的是第一種現象。我們再來看第二種。先點擊Set按鈕，再點擊Get按鈕，可以看到下面的輸出的內容：

同樣的頁面，再不做Remove按鈕操作，直接把瀏覽器視窗關閉，然後重新載入頁面，並且直接點擊Get按鈕，看到的頁面輸出內容：

可以看出localStorage輸出的內容還是W3cplus.com，而sessionStorage輸出的內容變成null了。從這個效果也驗證了前面提到的：sessionStorage和localStorage類似，允許你訪問一個Storage對象，只不過sessionStorage訪問的是一個session Storage對象，而localStorage訪問的是一個local Storage對象。另外不同之處在於localStorage裡面儲存的資料沒有到期的時間設定，而儲存在sessionStorage裡面的資料在頁面會話結束時會被清除。頁面會話在瀏覽器開啟期間一直保持，並且重新載入或恢複頁面仍然會保持原來的頁面會話。在新標籤或視窗開啟一個頁面會初始化一個新的會話（localStorage的key的value依舊儲存，而sessionStorage的key的value會被清除）。

本機存放區基本用法

前面的樣本也示範過了，接下來拿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類似。

異常處理

localStorage在目前的瀏覽器環境來說，還不是完全穩定的，可能會出現各種各樣的問題，所以在設定localStorage時一定要考慮異常處理。localStorage的異常處理一般用try/catch來捕獲/處理異常。所以我們在設定localStorage需要將try/catch添加進來，所以前面的setLocalStorage()函數可以修改成：

function setLocalStorage(key, value) {   try {        localStorage.setItem(key, value);   } catch (e) {        if (e.name === ‘QUOTA_EXCEEDED_ERR‘ || e.name === ‘NS_ERROR_DOM_QUOTA_REACHED‘) {            console.log("Error: Local Storage limit exceeds.");            localStorage.clear();        } else {            console.log("Error: Saving to local storage.");        }   }}

如果考慮更具瀏覽器安全色性，我們還可以將上面的代碼修改成：

function setLocalStorage(key, value) {    try {        localStorage.setItem(key, value);    } catch(e) {        if (isQuotaExceeded(e)) {            console.log("Error: Local Storage limit exceeds.");            localStorage.clear();        } else {            console.log("Error: Saving to local storage.");        }    }}function isQuotaExceeded(e) {    var quotaExceeded = false;    if (e) {        if (e.code) {            switch (e.code) {                case 22:                    quotaExceeded = true;                    break;                case 1014:                    // Firefox                    if (e.name === ‘NS_ERROR_DOM_QUOTA_REACHED‘) {                        quotaExceeded = true;                    }                    break;            }        } else if (e.number === -2147024882) {            // IE8            quotaExceeded = true;        }    }     return quotaExceeded;}

到期時間

就localStorage而言，其原生是不支援設定到期時間的，想要設定的話，就只能自己來封裝一層邏輯來實現：

function setLocalStorage(key, value) {    var curtime = new Date().getTime(); // 擷取目前時間    // 轉換成JSON字串序列    var valueDate = JSON.stringify({        val: value,        timer: curtime    });     try {        localStorage.setItem(key, valueDate); // 將JSON字串設定為儲存值    } catch(e) {        if (isQuotaExceeded(e)) {            console.log("Error: Local Storage limit exceeds.");            localStorage.clear();        } else {            console.log("Error: Saving to local storage.");        }    }}function isQuotaExceeded(e) {    var quotaExceeded = false;    if (e) {        if (e.code) {            switch (e.code) {                case 22:                    quotaExceeded = true;                    break;                case 1014:                    // Firefox                    if (e.name === ‘NS_ERROR_DOM_QUOTA_REACHED‘) {                        quotaExceeded = true;                    }                    break;            }        } else if (e.number === -2147024882) {            // IE8            quotaExceeded = true;        }    }     return quotaExceeded;}function getLocalStorage(key,exp){    var vals = localStorage.getItem(key); // 擷取本機存放區的值    var dataObj = JSON.parse(vals); // 將字串轉換成JSON對象    // 如果(目前時間 - 儲存的元素在建立時候設定的時間) > 到期時間    var isTimed = (new Date().getTime() - dataObj.timer) > exp;    if (isTimed){        console.log("expires");    } else {        var newValue = dataObj.val;    }     return newValue;}

這個時候我們調用：

setLocalStorage(‘name‘, ‘hello, w3cplus.com!‘);var localKey = getLocalStorage(‘name‘, 2);console.log(localKey);

如果我們把exp的時間修改一下：

setLocalStorage(‘name‘, ‘hello, w3cplus.com!‘);var localKey = getLocalStorage(‘name‘, 0);console.log(localKey);

範圍名

(圖片來自：1190000004121465)

這裡的所說的範圍名不是指函數中的範圍。而且localStorage儲存的範圍。所以指的是如何隔離開不同頁面之間的localStorage。localStorage只要在相同的協議、相同的主機名稱、相同的連接埠下，就能讀取和修改到同一份localStorage儲存的資料。而sessionStorage要比localStorage更苛刻一些，除了協議、主機名稱、連接埠外，還要求在同一視窗下。

容量限制

對於localStorage和sessionStorage儲存是有一定的限制的，目前業界基本上統一為5M，要比cookies的4K大得多，一般情況已足夠使用。如果儲存的量大於最大值時，各瀏覽器都會拋出一個錯誤QUOTA_EXCEEDED_ERR。

瀏覽器安全色性

到目前為止 Web Storage得到眾多主流瀏覽器的支援，有關於瀏覽器對其支援度，可以通過Caniuse.com來查閱。

總結

最近在做造物節項目，碰到了本機存放區的需求，以前從示接觸過，為了能較好的理解和整明白Web本機存放區的相關知識，花了點時間學習了相關的知識，並做了一些筆記。因為初學相關知識，不免其中有錯誤之處，如果有不對之處，還請同行大嬸拍磚指正。另外精選一篇@Mathias整理的一篇文章《How I detect and use localStorage》。能協助大家更好的理解有關於localStorage相關知識。如果你有更好的教程或經驗，歡迎在下面的評論中與我們一起分享。

 

 

原文: http://www.w3cplus.com/javascript/web-storage.html © w3cplus.com

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