sessionStorage 能在多个标签页之间共享数据吗?
🧑💻 写在开头
点赞 + 收藏 === 学会🤣🤣🤣
最近,我的一个朋友在面试中被一个关于 sessionStorage 的问题难住了。我们来聊聊这个话题。
sessionStorage 能在多个标签页之间共享数据吗?在回答这个问题之前我们先来聊聊另一个存储API localstorage
localstorage与sessionStorage经常是放在一起讨论,那他们之间的区别是什么呢?
只读的localStorage
属性允许你访问一个Document
源(origin)的对象 Storage
;存储的数据将保存在浏览器会话中。localStorage
类似 sessionStorage
,但其区别在于:存储在 localStorage
的数据可以长期保留;而当页面会话结束——也就是说,当页面被关闭时,存储在 sessionStorage
的数据会被清除。(这是来自MDN的解释)
那么 localstorage可以在同一网站下共享数据吗?答案显而易见是可以的。
1 2 3 4 | // 你可以在第一个tab里面存储一个数据 localStorage.setItem( 'name' , 'fatfish' ) // 在另外一个tab读取这个数据 localStorage.getItem( 'name' ) // fatfish |
那么sessionStorage呢? 来看看MDN中的解释
- 页面会话在浏览器打开期间一直保持,并且重新加载或恢复页面仍会保持原来的页面会话。
- 在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文,这点和 session cookie 的运行方式不同。
- 打开多个相同的 URL 的 Tabs 页面,会创建各自的
sessionStorage
。 - 关闭对应浏览器标签或窗口,会清除对应的
sessionStorage
。
根据第二点,在新打开的页面上应该是可以共享数据的,基于此我本人尝试了一下在掘金主页(juejin.cn/) 下执行以下代码
1 | window.sessionStorage.setItem( 'canShare' , 'yes' ) |
然后随机打开首页的推荐文章(juejin.cn/post/734279…) 读取数据
1 | window.sessionStorage.getItem( 'canShare' ) // null |
1 2 | window.sessionStorage.setItem( 'canShare' , 'yes' ); window.open( 'https://juejin.cn/post/7342793254096109583' , 'aa' ); |
1 | window.sessionStorage.getItem( 'canShare' ) // yes |
回过头来我再对掘金首页做以下操作
1 | window.sessionStorage.setItem( 'canShare' , 'yes' ); |
然后我把推荐文章链接中的target="__blank"属性删除,然后再次点击打开 然后执行
1 | window.sessionStorage.getItem( 'canShare' ) // yes |
成功的打印出了数据。
结论:
因此,我们可以得出结论:
sessionStorage 不能在多个窗口或标签页之间共享数据,但是当通过 window.open 或链接打开新页面时(不能是新窗口),新页面会复制前一页的 sessionStorage。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
2023-06-27 记录--Threejs-着色器实现一个水波纹
2022-06-27 记录--vue组件划分的思考