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

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

1.Web存儲(chǔ)簡(jiǎn)介

Web存儲(chǔ)分為兩種，分別對(duì)應(yīng)兩個(gè)JavaScript對(duì)象：

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

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

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

注意：

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

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

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

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

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

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

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

localStorage.setItem(keyName, data);

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

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

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

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

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

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

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

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

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

會(huì)話存儲(chǔ)也一樣簡(jiǎn)單。唯一的區(qū)別是使用sessionStorage對(duì)象，而不是使用localStorage對(duì)象。

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

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

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

3.瀏覽器對(duì)Web存儲(chǔ)的支持情況

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

4.深入Web存儲(chǔ)

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

4.1 刪除數(shù)據(jù)項(xiàng)

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

localStorage.removeItem("user_name");

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

sessionStorage.clear();

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

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

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

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

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

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

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

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

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

//創(chuàng)建日期對(duì)象 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)建的日期對(duì)象，因?yàn)槲谋靖袷绞怯行У娜掌谛问?today = new Date(sessionStorage.getItem("session_started"));

4.4 保存對(duì)象

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

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

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

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

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

總結(jié)

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

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