sessionStorage多Tab標(biāo)簽頁(yè)數(shù)據(jù)共享問(wèn)題分析
問(wèn)題描述
在 A 頁(yè)面設(shè)置一些 sessionStorage 數(shù)據(jù)，然后 a 標(biāo)簽 _blank 方式打開(kāi)另一個(gè) tab B 頁(yè)面，發(fā)現(xiàn) B 頁(yè)面有A 頁(yè)面的 sessionStorage 數(shù)據(jù)。
問(wèn)題原因
不同 tab 頁(yè)面 sessionStorage 數(shù)據(jù)出現(xiàn)了 “共享”。
sessionStorage
為什么會(huì)共享呢？下面看下 sessionStorage 的官方 MDN 介紹：
- 頁(yè)面會(huì)話在瀏覽器打開(kāi)期間一直保持，并且重新加載或恢復(fù)頁(yè)面仍會(huì)保持原來(lái)的頁(yè)面會(huì)話。
- 在新標(biāo)簽或窗口打開(kāi)一個(gè)頁(yè)面時(shí)會(huì)復(fù)制頂級(jí)瀏覽會(huì)話的上下文作為新會(huì)話的上下文，這點(diǎn)和 session cookie 的運(yùn)行方式不同。
- 打開(kāi)多個(gè)相同的 URL 的 Tabs 頁(yè)面，會(huì)創(chuàng)建各自的
sessionStorage。 - 關(guān)閉對(duì)應(yīng)瀏覽器標(biāo)簽或窗口，會(huì)清除對(duì)應(yīng)的
sessionStorage。
- 存儲(chǔ)在 sessionStorage 中的數(shù)據(jù)特定于頁(yè)面的協(xié)議。意思就是：
http://example.com與https://example.com的 sessionStorage 相互隔離。 - 被存儲(chǔ)的鍵值對(duì)總是以 UTF-16 DOMString 的格式所存儲(chǔ)，其使用兩個(gè)字節(jié)來(lái)表示一個(gè)字符。對(duì)于對(duì)象、整數(shù) key 值會(huì)自動(dòng)轉(zhuǎn)換成字符串形式。
根據(jù)第二點(diǎn)
簡(jiǎn)單嘗試后發(fā)現(xiàn)
- 通過(guò)新建標(biāo)簽頁(yè)打開(kāi)相同的頁(yè)面（屬于第三條）創(chuàng)建獨(dú)立 sessionStorage。
- 通過(guò) window.open 打開(kāi)新標(biāo)簽頁(yè)，共享了原 tab 頁(yè)中的 sessionStorage。
- 通過(guò) a 標(biāo)簽 _blank 方式打開(kāi)新 tab 頁(yè)，Chrome 86 瀏覽器共享了 sessionStorage，Chrome 113 和 Firefox 瀏覽器并沒(méi)有共享。
所以對(duì)于 a 標(biāo)簽打開(kāi)的頁(yè)面，是否“共享”sessionStorage 屬于瀏覽器兼容性問(wèn)題。
在 Chrome 89 版本前，a 標(biāo)簽跳轉(zhuǎn)會(huì)共享 sessionStorage。而在 2021年 3月 Chrome 89 版本后，通過(guò) a 標(biāo)簽 target="_blank" 跳轉(zhuǎn)到新頁(yè)面時(shí) sessionStorage 就會(huì)丟失。
應(yīng)該稱為“復(fù)制”而不是“共享”
在 A 頁(yè)面設(shè)置一些 sessionStorage 數(shù)據(jù)，然后 a 標(biāo)簽 _blank 方式打開(kāi)另一個(gè) tab B 頁(yè)面，發(fā)現(xiàn) B 頁(yè)面有A 頁(yè)面的 sessionStorage 數(shù)據(jù)。此時(shí)兩個(gè)頁(yè)面的sessionStorage相互獨(dú)立，修改不會(huì)影響對(duì)方，所以稱為復(fù)制更為準(zhǔn)確。
以上就是sessionStorage 多 Tab 標(biāo)簽頁(yè)數(shù)據(jù)“共享”的詳細(xì)內(nèi)容，更多關(guān)于sessionStorage 多 Tab 標(biāo)簽頁(yè)數(shù)據(jù)“共享”的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了Express框架view對(duì)象使用解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
這篇文章主要給大家分享的是TypeScript 索引簽名的理解，索引簽名由方括號(hào)中的索引名稱及其類(lèi)型組成，后面是冒號(hào)和值類(lèi)型：{ [indexName: KeyType]: ValueType }， KeyType 可以是一個(gè) string、number 或 symbol，而ValueType 可以是任何類(lèi)型，下面就倆簡(jiǎn)單了解一下吧2021-10-10
這篇文章主要介紹如何用JS寫(xiě)一個(gè)發(fā)布訂閱模式，什么是發(fā)布訂閱模式？能手寫(xiě)實(shí)現(xiàn)一下嗎？它和觀察者模式有區(qū)別嗎？帶著疑惑一起解開(kāi)下面文章的內(nèi)容吧2021-11-11
微信小程序報(bào)錯(cuò)：this.setData is not a function的解決辦法
這篇文章主要介紹了微信小程序報(bào)錯(cuò)：this.setData is not a function的解決辦法的相關(guān)資料,希望通過(guò)本文能幫助到大家解決這樣類(lèi)似的問(wèn)題，需要的朋友可以參考下2017-09-09
這篇文章主要為大家介紹了深入理解函數(shù)執(zhí)行上下文 this示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要介紹了微信小程序 下拉菜單的實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要為大家介紹了原生JS以后也支持類(lèi)型注解意義，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
用javascript制作qq注冊(cè)動(dòng)態(tài)頁(yè)面
這篇文章主要介紹了用javascript制作qq注冊(cè)動(dòng)態(tài)頁(yè)面,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友可以參考下2021-04-04
使用preload預(yù)加載頁(yè)面資源時(shí)注意事項(xiàng)
本文主要介紹 preload 的使用，以及與 prefetch 的區(qū)別。然后會(huì)聊聊瀏覽器的加載優(yōu)先級(jí)，大家一定要認(rèn)真看完2020-02-02
微信小程序之選項(xiàng)卡的實(shí)現(xiàn)方法
這篇文章主要介紹了 微信小程序之選項(xiàng)卡的實(shí)現(xiàn)方法的相關(guān)資料,希望大家通過(guò)本文能實(shí)現(xiàn)這樣的功能，需要的朋友可以參考下2017-09-09