sessionStorage和localStorage的差別是什麼
- 一个新手原創
- 2017-09-07 09:38:5321088瀏覽
sessionStorage和localStorage的差異是：1、localStorage沒有過期時間；2、sessionStorage針對一個session進行資料存儲，生命週期與session相同，當使用者關閉瀏覽器後，資料將被刪除。
sessionStorage和localStorage的區別
眾所周知，自從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、webStorage
webStorage是HTML5引入的一個重要的功能，在前端開發的過程中會常用到，它可以在客戶端本地儲存數據，類似cookie，但其功能卻比cookie強大的多。 cookie的大小只有4Kb左右（瀏覽器不同，大小也不同），而webStorage的大小有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的使用是一致的。需要注意的有以下幾點：
頁面刷新不會消除資料
為了驗證，我準備了兩個html文件，一個是index .html，另一個是text.html。至於text.html後面在詳細說其起的左右。二者的html程式碼如下：
index.html
<!DOCTYPE html>
<html>
<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" οnclick="submit()" />
<input type="text" name="text" id="text" />
<input type="button" value="show" οnclick="shows()" />
<a href="text.html" target="_blank">点击打开</a>
</body>
</html>text.html頁面如下：
<!DOCTYPE html>
<html>
<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“
只有在當前頁面打開的鏈接，才可以訪問sessionStorage的資料；
還記準備好的那個text.html頁面嗎，這時候輪到它發揮自己的作用了。為了驗證，我們接著上面的步驟，開啟text.html結果如下：
#可以看到，這個值為null，無法得到」name「的值。現在，關閉這個text.html頁面，透過index.html頁面中的點擊打開鏈接，可以看到如下的結果：
因此，可以得知，在當前頁面開啟的鏈接，是可以存取到sessionStorage內的資料。後來又經過其他一些測試，發現從index.html開啟text.html頁面後，關閉index.html，刷新text.html還可以存取到sessionStorage中的資料。只有當全部關閉index.html和從其內部開啟的所有頁面 或直接關閉瀏覽器，才可以消除sessionStorage中的資料。
使用window.open開啟頁面和改變localtion.href方式都可以取得到sessionStorage內部的資料
上述兩種方式，經過測試，事實確實如此。有興趣的同學，可以真實的測試下結果。關於localStorage和sessionStorage的不同之處，就不再做總結了。
總之，使用的時候，注意以上提到的幾點，在使用的時候可以避免很多沒必要踩的坑。
更多相關知識，請造訪 PHP中文網！ ！
以上是sessionStorage和localStorage的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！