原创 晚安啦 2024-12-28 09:00 重庆
点击关注公众号，“技术干货”及时达！
点击关注公众号，“技术干货” 及时达！
最近，我的一个朋友在面试中被一个关于 「sessionStorage」 的问题难住了。我们来聊聊这个话题。
「sessionStorage」 能在多个标签页之间共享数据吗？在回答这个问题之前我们先来聊聊另一个存储API 「localstorage」
「localstorage」与「sessionStorage」经常是放在一起讨论，那他们之间的区别是什么呢？
只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；存储的数据将保存在浏览器会话中。localStorage 类似 `sessionStorage`[1]，但其区别在于：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除。(这是来自MDN的解释)
那么 「localstorage」可以在同一网站下共享数据吗？答案显而易见是可以的。
// 你可以在第一个tab里面存储一个数据
localStorage.setItem('name', 'fatfish')
// 在另外一个tab读取这个数据
localStorage.getItem('name') // fatfish
那么「sessionStorage」呢？来看看MDN中的解释
页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。
「在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文，这点和 session cookie 的运行方式不同。」
打开多个相同的 URL 的 Tabs 页面，会创建各自的 sessionStorage。
关闭对应浏览器标签或窗口，会清除对应的 sessionStorage。
根据第二点，在新打开的页面上应该是可以共享数据的，基于此我本人尝试了一下在掘金主页(https://juejin.cn/) 下执行以下代码
window.sessionStorage.setItem('canShare','yes')
然后随机打开首页的推荐文章(https://juejin.cn/post/7342793254096109583) 读取数据
window.sessionStorage.getItem('canShare') // null
所以结论是不行，MDN上的解释错了？我们再做以下测试在掘金主页(https://juejin.cn/) 下执行以下代码
window.sessionStorage.setItem('canShare','yes');
window.open('https://juejin.cn/post/7342793254096109583', 'aa');
然后随机打开首页的推荐文章(https://juejin.cn/post/7342793254096109583) 读取数据
window.sessionStorage.getItem('canShare') // yes
回过头来我再对掘金首页做以下操作
window.sessionStorage.setItem('canShare','yes');
然后我把推荐文章链接中的target="__blank"属性删除，然后再次点击打开 然后执行
window.sessionStorage.getItem('canShare') // yes
成功的打印出了数据。
结论:
因此，我们可以得出结论：「sessionStorage」 不能在多个窗口或标签页之间共享数据，但是当通过 「window.open」 或链接打开新页面时(不能是新窗口)，新页面会复制前一页的 「sessionStorage」。
点击关注公众号，“技术干货” 及时达！
