LocalStorage和sessionStorage之間的區別
眾所周知，自從HTML 5 標準出現之後，本地化儲存一度成為熱搜的關鍵詞。在HTML 5 最開始時，本地儲存有兩種方式：一種是web Storage，另一種是web SQL。由於web SQL的實現是基於SQLite，它更傾向於DataBase方向，且W3C官方在2011年11月宣佈不在維護web SQL規範，故其API介面目前已經不屬於HTML 5的範疇。因此，目前我們常講的HTML 5本地儲存，多指的是web Storage。
下面，關於WebStorage及其兩種形式作具體的描述和講解。
1、web Storage
web Storage 是HTML 5引入的一個重要的功能，在前端開發的過程中會經常用到，它可以在客戶端本地儲存資料，類似cookie，但其功能卻比cookie強大的多。cookie的大小隻有4Kb左右（瀏覽器不同，大小也不同），而web
Storage的大小有5MB。其API提供的方法有以下幾種：
setItem (key, value) —— 儲存資料，以鍵值對的方式儲存資訊。
getItem (key) —— 獲取資料，將鍵值傳入，即可獲取到對應的value值。
removeItem (key) —— 刪除單個數據，根據鍵值移除對應的資訊。
clear () —— 刪除所有的資料
key (index) —— 獲取某個索引的key
2、localStorage
localStorage的生命週期是永久性的。假若使用localStorage儲存資料，即使關閉瀏覽器，也不會讓資料消失，除非主動的去刪除資料，使用的方法如上所示。localStorage有length屬性，可以檢視其有多少條記錄的資料。使用方法如下：
var storage = null; if(window.localStorage){ //判斷瀏覽器是否支援localStorage storage = window.localStorage; storage.setItem("name", "Rick"); //呼叫setItem方法，儲存資料 alert(storage.getItem("name")); //呼叫getItem方法，彈框顯示 name 為 Rick storage.removeItem("name"); //呼叫removeItem方法，移除資料 alert(storage.getItem("name")); //呼叫getItem方法，彈框顯示 name 為 null }
localStorage 相對sessionStorage簡單一點，需要注意的地方不是很多。
3、sessionStorage
sessionStorage 的生命週期是在瀏覽器關閉前。也就是說，在整個瀏覽器未關閉前，其資料一直都是存在的。sessionStorage也有length屬性，其基本的判斷和使用方法和localStorage的使用是一致的。需要注意的有以下幾點：
<1> 頁面重新整理不會消除資料
為了驗證，我準備了兩個html檔案，一個是index.html，另一個是text.html。至於text.html後面在詳細說其起的左右。二者的html程式碼如下：
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script>
function submit() {
var str = document.getElementById("text").value.trim();
setInfo(str);
document.getElementById("text").value = "";
}
//儲存資料
function setInfo(name) {
var storage = window.sessionStorage;
storage.setItem('name', name);
}
//顯示資料
function shows() {
var storage = window.sessionStorage;
var str = "your name is " + storage.getItem("name");
document.getElementById("text").value = str;
}
</script>
</head>
<body>
<input type="button" value="Login" onclick="submit()" />
<input type="text" name="text" id="text" />
<input type="button" value="show" onclick="shows()" />
<a href="text.html" target="_blank">點選開啟</a>
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var storage = window.sessionStorage;
alert(storage.getItem("name"));
</script>
</body>
</html>開啟index.html頁面的結果如下：
當點選show按鈕後，輸入框內顯示 “ your name is null“，此時sessionStorage中沒有儲存鍵值為 ”name“的資料。當在文字中輸入”Rick“後，點選login按鈕，輸入框清空的時候資料已經儲存到sessionStorage中，然後再去點選show按鈕，會顯示”your name is Rick“。此時，點選瀏覽器重新整理網頁，再點選show按鈕，輸入框中顯示的依舊為”your name is Rick“
<2>只有在當前頁面開啟的連結，才可以訪sessionStorage的資料；
還記準備好的那個text.html頁面嗎，這個時候輪到它發揮自己的作用了。為了驗證，我們接著上面的步驟，開啟text.html結果如下：
可以看到，這個值為null，無法得到”name“的值。現在，關閉這個text.html頁面，通過index.html頁面中的點選開啟連結，可以看到如下的結果：
因此，可以得知，在當前頁面開啟的連結，是可以訪問到sessionStorage內的資料。後來又經過其他一些測試，發現當從index.html開啟text.html頁面後，關閉index.html，重新整理text.html還可以訪問到sessionStorage中的資料。只有當全部關閉index.html和從其內部開啟的所有頁面 或者直接關閉瀏覽器，才可以消除sessionStorage中的資料。
<3>使用window.open開啟頁面和改變localtion.href方式都可以獲取到sessionStorage內部的資料
上述兩種方式，經過測試，事實確實如此。感興趣的同學，可以真實的測試下結果。關於localStorage和sessionStorage的不同之處，就不再做總結了。
總之，使用的時候，注意以上提到的幾點，在使用的時候可以避免很多沒必要踩的坑。關於本文有什麼不到的地方，歡迎留言批評和指正，謝謝。