Web數(shù)據(jù)存儲之localStorage和sessionStorage

學(xué)習(xí)前端以來，自己了解有l(wèi)ocalStorage和sessionStorage的相關(guān)存儲的知識，也有實踐過，但是之前只限于能用的基礎(chǔ)上，但最近看了一本書，深入了解了localStorage和sessionStorage，才意識到自己了解太表面，于是想借此總結(jié)一下。

1.Web存儲簡介

Web存儲分為兩種，分別對應(yīng)兩個JavaScript對象：

• 本地存儲：對應(yīng)localStorage對象，用于長期保存網(wǎng)站的數(shù)據(jù)，并且站內(nèi)任何頁面都可以訪問該數(shù)據(jù)。也就是說，如果有一個網(wǎng)頁利用本地存儲保存了數(shù)據(jù)，那么訪客在一天后、一星期后，甚至一年之后再上線，該數(shù)據(jù)仍然還會在那兒。

• 會話存儲：對應(yīng)sessionStorage對象，用于臨時保存針對一個窗口（或標(biāo)簽頁）的數(shù)據(jù)。在訪客關(guān)閉窗口或標(biāo)簽頁之前，這些對象是存在的，而關(guān)閉之后就會被瀏覽器刪除。不過，只要用戶不關(guān)閉窗口或標(biāo)簽頁，就算他從你的網(wǎng)站跑到別人的網(wǎng)站然后又回來，這些數(shù)據(jù)還是會存在的。

  區(qū)別：從頁面代碼的角度說，本地存儲和會話存儲的操作完全相同。它們的區(qū)別僅在于數(shù)據(jù)的壽命。本地存儲主要用于保存訪客將來還能看到的數(shù)據(jù)，而會話存儲則用于保存那些需要從一個頁面?zhèn)鬟f到下一個頁面的數(shù)據(jù)。

注意：

• 無論是本地存儲還是會話存儲，都是與網(wǎng)站所在的域聯(lián)系在一起的

• 由于數(shù)據(jù)保存在用戶的計算機上（或移動設(shè)備上），這些數(shù)據(jù)也是跟計算機綁定的；頁面不能訪問保存在其他計算機上的數(shù)據(jù)。類似的，如果你用不同的用戶名登錄自己的電腦，或者使用不同的瀏覽器,那么存取的也將是不同的本地存儲數(shù)據(jù)。

  盡管HTML5沒有硬性規(guī)定存儲空間的上限，但大多數(shù)瀏覽器都把本地存儲限制為5MB以下

2.存儲數(shù)據(jù)

要把一段信息保存到本地存儲或會話存儲中，首先要為該信息想一個合適的名字。這個名字叫作鍵，將來要通過它來取回數(shù)據(jù)。

1.保存數(shù)據(jù)

要保存數(shù)據(jù)，需使用localStorage.setItem()方法：

localStorage.setItem(keyName, data);

如下所示，保存用戶名，那么這個鍵就可以叫作user_name;

localStorage.setItem("user_name", "xingxi");

當(dāng)然，像這樣保存硬編碼的數(shù)據(jù)沒有多大意思。更多的情況下，可以保存動態(tài)數(shù)據(jù)，比如當(dāng)前日期、數(shù)據(jù)計算的結(jié)果等，或者用戶在文本框中輸入的某些文本，等等。如：

//取得文本框 var nameInput = document.getElementById("userName"); //保存文本框中的文本 localStorage.setItem("user_name", nameInput.value);

2.讀取數(shù)據(jù)
讀取本地存儲中是數(shù)據(jù)跟保存數(shù)據(jù)一樣簡單，只需要使用localStorage.getItem()方法。

//讀取用戶名 localStorage.getItem("user_name");

無論這個名字是5秒前保存的，還是5個月前保存的，這行代碼都管用。

當(dāng)然，有可能這個鍵下面尚未保存任何數(shù)據(jù)。要檢測某個鍵是否為空，可以直接測試它是否等于null。如：

if(localStorage.getItem("user_name") == null) {alert("不存在這樣的名字哦。") }else {//將用戶名放到文本框中document.getElementById("userName").value = localStorage.getItem("user_name"); }

會話存儲也一樣簡單。唯一的區(qū)別是使用sessionStorage對象，而不是使用localStorage對象。

Web存儲還支持兩種讀寫數(shù)據(jù)的語法，除了使用getItem()和setItem()，還可以使用屬性名或索引方式。

• 屬性名：localStorage.user_name;
• 索引方式: localStorage[“user_name”]

注意：沒有web服務(wù)器則不能使用web存儲：在很多瀏覽器中，只有web服務(wù)器上打開的頁面才能讀寫web存儲。無論這個web服務(wù)器是遠(yuǎn)程的還是本地的–關(guān)鍵就是不能從本地硬盤上打開頁面。這個問題的根源就在于瀏覽器要限制web存儲的空間大小。

3.瀏覽器對Web存儲的支持情況

Web存儲是現(xiàn)代瀏覽器支持情況最好的HTML5功能之一。在不支持Web存儲的可能就只有IE7了。如果要兼容IE7，可以使用cookie來模擬Web存儲。雖然不完美，但是可行。

4.深入Web存儲

前面已經(jīng)介紹過關(guān)于Web存儲的基礎(chǔ)知識，接下來會介紹從Web存儲中刪除數(shù)據(jù)項，檢索當(dāng)前保存的所有數(shù)據(jù)，以及處理不同的數(shù)據(jù)類型、保存自定義對象和響應(yīng)存儲數(shù)據(jù)變化。

4.1 刪除數(shù)據(jù)項

這個任務(wù)只要調(diào)用removeItem()方法，傳入鍵名，即可刪除不想要的數(shù)據(jù)。

localStorage.removeItem("user_name");

或者調(diào)用clear()方法，清空網(wǎng)站在本地保存的會話數(shù)據(jù)。

sessionStorage.clear();

4.2 查找所有數(shù)據(jù)項

使用key()方法從本地或會話存儲中取得（當(dāng)前網(wǎng)站保存的）所有數(shù)據(jù)項。

localStorage.key(); //可以取出所有數(shù)據(jù)項

4.3 保存數(shù)值和日期

到目前為止，我們還遺漏了關(guān)于web存儲的一個重要細(xì)節(jié)：在通過localStorage和sessionStorage保存數(shù)據(jù)時，該數(shù)據(jù)會自動被轉(zhuǎn)換為本文字符串。對于本來就是文本的數(shù)據(jù)，這當(dāng)然沒有問題，但數(shù)值就不一樣了。

//oldX=5 為數(shù)值 newX = localStorage.getItem("oldX"); newX += 5; //結(jié)果會變成‘55’

這里因為newX為字符串，javascript把5轉(zhuǎn)化為字符串了，實際運行的是’5’+ ‘5’，結(jié)果為55，而不是10。這里的解決辦法是需要給javascipt一個提示，告訴它你想計算兩個數(shù)值的加法。辦法如下：

newX = Number(localStorage.getItem("oldX"));

保存日期也是同樣的道理，結(jié)果并不會保存日期對象，而是會保存一個文本字符串。可是要將文本字符串轉(zhuǎn)回日期對象可不容易。為了解決這個問題，可以采用如下的方法：

//創(chuàng)建日期對象 var today = new Date();//按照YYYY/MM/DD的標(biāo)準(zhǔn)格式把日期轉(zhuǎn)換成文本字符串 var todayString = today.getFullYear() + "/" + today.getMonth() + "/" + today.getDate(); sessionStorage.setItem("session_started", todayString); ... //取得日期文本，并基于該文本創(chuàng)建的日期對象，因為文本格式是有效的日期形式 today = new Date(sessionStorage.getItem("session_started"));

4.4 保存對象

為了把自定義對象保存到Web存儲中，必須先把對象轉(zhuǎn)換為文本形式。JSON是把結(jié)構(gòu)化數(shù)據(jù)（類似封裝在對象中的那些值）轉(zhuǎn)化為文本的一種簡便格式。
直接調(diào)用JSON.stringify()就可以把任何對象連同其數(shù)據(jù)轉(zhuǎn)換為文本形式。調(diào)用JSON.parse()則可以把文本轉(zhuǎn)換回對象。

var params = {name: xingxi,age: 20 } //將數(shù)據(jù)保存為JSON格式 sessionStorage.setItem("message", JSON.stringify(params)); //JSON文本轉(zhuǎn)換為原來的對象 JSON.parse(sessionStorage.getItem(message));

4.5 響應(yīng)存儲變化

Web存儲為我們提供了在不同瀏覽器窗口間通信的機制。具體來說，就是在本地存儲或會話存儲發(fā)生變化時，其他查看同一頁面或同一站點中其他頁面的窗口就會觸發(fā)window.onStorage事件。
所謂存儲變化，指的就是向存儲中添加新數(shù)據(jù)項，修改既有數(shù)據(jù)項，刪除數(shù)據(jù)項或清除所有數(shù)據(jù)。但是，那些對存儲不產(chǎn)生任何影響的操作（如用既有的鍵名保存相同的值，或者清除原本就是空的存儲空間），不會引發(fā)onStorage事件

通過認(rèn)真深入的學(xué)習(xí)這一塊的知識，現(xiàn)在對Web存儲有了比較深入的了解。

總結(jié)

以上是生活随笔為你收集整理的Web数据存储之localStorage和sessionStorage的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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