HTML5本地儲存sessionStorage的銷燬數據問題

時間 2019-11-12

標籤 html5 html 本地儲存 sessionstorage 銷燬數據問題欄目 HTML5 简体版

原文原文鏈接

博客採集來自於javascript

http://www.cnblogs.com/pssp/p/6395530.htmlhtml

的博客，很感謝她。追夢子，讓咱們一塊兒進步吧。java

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

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

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

PC端測試微信

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

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>