標籤：oca 它的 click 公眾號 location char 適合 ora dex
部落格採集來自於
http://www.cnblogs.com/pssp/p/6395530.html
的部落格，很感謝她。追夢子，讓我們一起進步吧。
前幾天項目中用到了本地儲存，雖然說也就是幾個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判斷，如果相同才去渲染之前選中的資料。
HTML5本地儲存sessionStorage的銷毀資料問題
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
