經過我的測試,本次項目 不能使用sessionStorage ,需要使用localStorage,因為sessionStorage不方便,客戶使用時,會遇到很多問題,導致售后量很大。
我今天測試sessionStorage 發現,在a.html存入后,在b.html無法獲取到,而localStorage 卻可以。舉例:
這個時候,通過瀏覽器訪問 left.html
后來經過百度發現了這樣的一篇文章:https://github.com/lmk123/blog/issues/66
-----------------------------------------------------------------------------------------------------------------------------
一直以來,我所以為的 sessionStorage 的生命周期是這樣的:在 sessionStorage 中存儲的數據會在當前瀏覽器的同一網站的多個標簽頁中共享,並在此網站的最后一個標簽頁被關閉后清除。注意:這是錯誤的。 我之所以會這么認為,是因為我寫代碼的時候,sessionStorage 給我的表現就是這樣的。 假設我們有一個 index.html: <!-- 使用一個新標簽頁打開自身,並設置一個 sessionStorage --> <a href="index.html" target="_blank" onclick="sessionStorage.setItem('j', 's')"> open myself </a> 接下來: 在瀏覽器中打開這個 index.html,我們稱之為標簽頁 A。注意:需要用 http 協議打開!例如 http://localhost/index.html 點擊頁面上的鏈接,此時會彈出來標簽頁 B。 在標簽頁 B 中打開控制台並執行 sessionStorage.getItem('j') 控制台會輸出 's',這說明標簽頁 A 和 B 共享了 sessionStorage 中的數據;接下來,先關閉這兩個標簽頁,然后再打開一個標簽頁 C,再讀取一下 j 的值,得到的是 null。 這看起來跟本文一開始的說法是一致的,但今天我遇到了一個奇怪的事情…… 我們給上面的步驟添加第四步: 在瀏覽器中打開這個 index.html,我們稱之為標簽頁 A。注意:需要用 http 協議打開!例如 http://localhost/index.html 點擊頁面上的鏈接,此時會彈出來標簽頁 B。 在標簽頁 B 中打開控制台並執行 sessionStorage.getItem('j'),得到 's' 新建一個新標簽頁 D,然后在地址欄內輸入 http://localhost/index.html 打開同樣的頁面, 然后執行 sessionStorage.getItem('j') 。 按照我的預期,標簽頁 D 得到的應該還是 's',畢竟我認為 sessionStorage 的數據是在同一網站的多個標簽頁之間共享的。但是我錯了,得到的結果是 null。 發生了什么?為什么標簽頁 B 中得到的是 's',為什么標簽頁 D 中卻是 null? 細心的同學可能已經發現了,標簽頁 B 和標簽頁 D 之間唯一的不同就是它們被打開的方式:標簽頁 B 是通過在標簽頁 A 中點擊鏈接打開的,但標簽頁 D 是在瀏覽器地址欄輸入地址打開的。 我趕緊上 MDN 查了一下,上面是這么說的: ...data stored in sessionStorage gets cleared when the page session ends...Opening a page in a new tab or window will cause a new session to be initiated, which differs from how session cookies work. 所以現在我明白了:通過點擊鏈接(或者用了 window.open)打開的新標簽頁之間是屬於同一個 session 的,但新開一個標簽頁總是會初始化一個新的 session,即使網站是一樣的,它們也不屬於同一個 session。
--------------------------------------------------------------
那么接下來我要試驗一下這篇文章說的是否正確,我看很多人都轉載了他這篇文章。
結論:
用sessionStorage會使用上不方便,比如有一些情況下,客戶會復制網址然后直接新建一個選項卡,粘貼網址進行打開,這個時候 因為不是一個session了 , 又得讓客戶登錄,那么客戶登錄后,就會存在2個sessionStorage里的兩個token,兩個token的有效期又不一樣,可能會造成 混亂 頻繁讓客戶登錄 類似聚石塔的后台 極為不便,所以實際使用中就用 localStorage 禁用 sessionStorage