西安阎良区建设局网站,丰城网站建设公司,福州专业做网站的公司有哪些,做网站有意思吗?#x1f9d1;#x1f4bb; 写在开头 点赞 收藏 学会#x1f923;#x1f923;#x1f923; 最近#xff0c;我的一个朋友在面试中被一个关于 sessionStorage 的问题难住了。我们来聊聊这个话题。
sessionStorage 能在多个标签页之间共享数据吗#xff1f;
在回答… 写在开头 点赞 收藏 学会 最近我的一个朋友在面试中被一个关于 sessionStorage 的问题难住了。我们来聊聊这个话题。
sessionStorage 能在多个标签页之间共享数据吗
在回答这个问题之前我们先来聊聊另一个存储API localstorage
localstorage与sessionStorage经常是放在一起讨论那他们之间的区别是什么呢
只读的localStorage 属性允许你访问一个Document 源origin的对象 Storage存储的数据将保存在浏览器会话中。localStorage 类似 sessionStorage但其区别在于存储在 localStorage 的数据可以长期保留而当页面会话结束——也就是说当页面被关闭时存储在 sessionStorage 的数据会被清除。(这是来自MDN的解释) 那么 localstorage可以在同一网站下共享数据吗答案显而易见是可以的。
// 你可以在第一个tab里面存储一个数据
localStorage.setItem(name, fatfish)
// 在另外一个tab读取这个数据
localStorage.getItem(name) // fatfish
那么sessionStorage呢
来看看MDN中的解释
页面会话在浏览器打开期间一直保持并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文这点和 session cookie 的运行方式不同。打开多个相同的 URL 的 Tabs 页面会创建各自的 sessionStorage。关闭对应浏览器标签或窗口会清除对应的 sessionStorage。
根据第二点在新打开的页面上应该是可以共享数据的基于此我本人尝试了一下在掘金主页(juejin.cn/) 下执行以下代码
window.sessionStorage.setItem(canShare,yes)然后随机打开首页的推荐文章(juejin.cn/post/734279…) 读取数据
window.sessionStorage.getItem(canShare) // null
所以结论是不行MDN上的解释错了 我们再做以下测试在掘金主页(juejin.cn/) 下执行以下代码
window.sessionStorage.setItem(canShare,yes);
window.open(https://juejin.cn/post/7342793254096109583, aa);
然后随机打开首页的推荐文章(juejin.cn/post/734279…) 读取数据
window.sessionStorage.getItem(canShare) // yes
回过头来我再对掘金首页做以下操作
window.sessionStorage.setItem(canShare,yes);
然后我把推荐文章链接中的target__blank属性删除然后再次点击打开 然后执行
window.sessionStorage.getItem(canShare) // yes
成功的打印出了数据。
结论:
因此我们可以得出结论sessionStorage 不能在多个窗口或标签页之间共享数据但是当通过 window.open 或链接打开新页面时(不能是新窗口)新页面会复制前一页的 sessionStorage。
如果对您有所帮助欢迎您点个关注我会定时更新技术文档大家一起讨论学习一起进步。
