前幾天項目中用到了本地儲存,雖然說也就是幾個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路徑也應該可以,效果如下
在移動端測試了一下,和PC端類似,在微信公眾號的網站中,直接點擊關閉按鈕,或者是后退到公眾號界面,才算是關閉。在UC中,a鏈接跳轉始終在頁面窗體中,所以關閉當前窗體就算關閉。
因為以上的這幾個原因,在獲取數據的時候就會出現一個問題,用戶在某個下單頁,選擇了某個商品,然后他又跳到了另外一個商品上面,那么就會將上一個商品選中的信息在這個商品上顯示,在項目中我們的解決方案是,通過商品ID和儲存數據中的ID判斷,如果相同才去渲染之前選中的數據。
文章列表