前段时间在使用朋友部署的chatGpt在国外服务器的时候被封了,于是他不慌的又买了服务器重新部署(6)。他给我发新的url的时候问我:“前端的localStorage中同一个域名、不同窗口能共享状态吗?”。我说可以啊。
他又问我:“那不同域名下不同窗口呢?”我说那就不行咯,每一个网站有自己单独的localStorage,这也是浏览器的同源策略限制,为了网站的安全着想才这样的。欸,不是你问这个干嘛?
他:好吧,那之前和chatGpt的聊天记录就看不到了。
我:好吧,那既然如此。难道sessionStorage在多窗口之间能共享状态?不能吧,每个窗口之间的sessionStorage都是独立的相互不影响,窗口关闭自动就销毁了。
朋友:弯弯绕绕的,你确定???
于是我又又又复习了一遍localStorage与sessionStorage的知识,其他就不赘述了,滚瓜烂熟的八股文,这次新发现了sessionstorage有意思的一点,展开说说。
先来看看mdn上说的:
sessionStorage 属性允许你访问一个,对应当前源的 session Storage 对象。它与 localStorage 相似,不同之处在于 localStorage 里面存储的数据没有过期时间设置,而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。
- 页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。
- 在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文,这点和 session cookie 的运行方式不同。
- 打开多个相同的 URL 的 Tabs 页面,会创建各自的
sessionStorage。 - 关闭对应浏览器标签或窗口,会清除对应的
sessionStorage。
我想说的是第二点,加粗的文字!这点令人很迷糊。
在页面A中执行:
window.sessionStorage.setItem('key1','123')
window.sessionStorage.setItem('key2','456')
在同源的页面B中再次尝试获取:
window.sessionStorage.getItem('key1') //undefined
window.sessionStorage.getItem('key2') //undefined
就获取不到!!!!!!!!!!!!!!
但是换一种场景:
在A页面中执行window.sessionStorage.setItem("key",'123')
在页面A中有一个button按钮,点击按钮触发跳转至同源页面,现在得到新开的页面B,现在再次进入页面B中执行window.sessionStorage.getItem('key')就可以拿到123 value值,从A页面跳转过来的B页面居然是能拿到值的。
于是这才理解mdn中第二点的意思,在该标签或者窗口打开一个新页面时会复制顶级浏览会话的上下文会作为新会话的上下文
所以说,只有在本页面中以新页面或窗口打开的同源页面会‘临时共享’之前页面的sessionStorage
收获!!!多窗口之间的sessionStorage不能共享状态!!!但是在某些特定的场景下新开的页面会复制之前页面的SessionStorage状态!