Web數據存儲之localStorage和sessionStorage

學習前端以來，自己了解有localStorage和sessionStorage的相關存儲的知識，也有實踐過，但是之前只限于能用的基礎上，但最近看了一本書，深入了解了localStorage和sessionStorage，才意識到自己了解太表面，于是想借此總結一下。

1.Web存儲簡介

Web存儲分為兩種，分別對應兩個JavaScript對象：

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

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

  區別：從頁面代碼的角度說，本地存儲和會話存儲的操作完全相同。它們的區別僅在于數據的壽命。本地存儲主要用于保存訪客將來還能看到的數據，而會話存儲則用于保存那些需要從一個頁面傳遞到下一個頁面的數據。

注意：

• 無論是本地存儲還是會話存儲，都是與網站所在的域聯系在一起的

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

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

2.存儲數據

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

1.保存數據

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

localStorage.setItem(keyName, data);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4.深入Web存儲

前面已經介紹過關于Web存儲的基礎知識，接下來會介紹從Web存儲中刪除數據項，檢索當前保存的所有數據，以及處理不同的數據類型、保存自定義對象和響應存儲數據變化。

4.1 刪除數據項

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

localStorage.removeItem("user_name");

或者調用clear()方法，清空網站在本地保存的會話數據。

sessionStorage.clear();

4.2 查找所有數據項

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

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

4.3 保存數值和日期

到目前為止，我們還遺漏了關于web存儲的一個重要細節：在通過localStorage和sessionStorage保存數據時，該數據會自動被轉換為本文字符串。對于本來就是文本的數據，這當然沒有問題，但數值就不一樣了。

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

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

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

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

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

4.4 保存對象

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

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

4.5 響應存儲變化

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

通過認真深入的學習這一塊的知識，現在對Web存儲有了比較深入的了解。