HTML5本地儲存sessionStorage的銷毀數據問題－互聯網

文章出處

前幾天項目中用到了本地儲存，雖然說也就是幾個api，但之前有一個問題一直沒有去想，我們知道本地儲存分為兩種，一種是臨時儲存，關閉瀏覽器后數據就會銷毀，另外一種是沒有時間限制的儲存，我們做的這個頁面比較適合使用臨時儲存，而本次要講的也就是臨時儲存的一個問題。頁面長下面這樣

我需要把用戶選擇了的信息保存下來，放到下個頁面顯示（產品經理嫌這個頁面內容太多了），在下面這個頁面取數據。

效果大概就是這樣，而我想知道的一個問題是，這個sessionStorage到底什么時候會將數據銷毀，之前只知道關閉瀏覽器數據就會銷毀，但具體怎么才算關閉就不是很清楚了，更別提在手機上了，但為了以后不再為這個問題而困惑，也就只有動手咯。

PC端測試

首先有兩個頁面，分別是index.html（用來儲存數據）和index2.html（用來取數據）代碼如下。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <a href="index2.html">獲取sessionStorage數據</a>
  <script>
    sessionStorage.messg = "所謂的害怕，就是看不見吧";
  </script>
</body>
</html>

index2.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <script>
    alert(sessionStorage.messg);
  </script>
</body>
</html>

先打開index.html然后打開index2.html，發現彈出的是undefined，也就是說index2.html訪問不到index.html中的數據，效果如下

嘗試了一下，通過超鏈接過去的是可以獲取到數據的，效果如下

為了驗證是否通過超鏈接才有效，于是新建了一個index3頁面，在index2頁面中加入超鏈接，鏈接到index3頁面中，效果如下

以上信息說明了sessionStorage中的數據只對本頁面中的超鏈接有效。

我們接著來解決下一個問題，點瀏覽器X才算關閉頁面，還是關閉當前頁面就算是關閉？如下圖

經過測試，直接點擊關閉瀏覽器，數據銷毀了。

關閉當前頁面數據的銷毀與否有兩種情況，如果它的頁面中沒有其他的超鏈接，或者沒有打開，那么關閉當前頁面，數據就會被銷毀。而如果通過當前這個頁面，打開了其他的頁面，那么只有當這些頁面都關閉了，數據才會銷毀。

還是拿剛剛那幾個頁面做實驗，效果如下

我從index頁面打開了index2頁面，注意我在index.html中修改了a鏈接的target屬性

<a href="index2.html" target="_blank">獲取sessionStorage數據</a>

接著我將index.html關閉，刷新index2.html，彈出如下

這也就驗證了以上的結論。

我猜測通過window.open打開也是可以獲取到數據的，事實證明也確實可以，代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>index</title>
</head>
<body>
  <div id="box">點我跳轉到index2.html</div>
  <script>
    sessionStorage.messg = "所謂的害怕，就是看不見吧";
    var box = document.getElementById("box");
    box.onclick = function(){
      window.open("./index2.html");
    };
  </script>
</body>
</html>

既然如此，我想通過location.href改變url路徑也應該可以，效果如下