sessionStorage可以在多个Tab之间共享数据吗?

发布时间 2023-07-11 09:50:49作者: 星拾夜暝

不可以。sessionStorage是浏览器会话级别的存储机制,它只在单个浏览器标签页(tab)或窗口之间共享数据。每当用户打开一个新的标签页或窗口时,会话存储会被重新初始化,每个标签页或窗口都会有自己的独立的sessionStorage。

如果您需要在多个标签页或窗口之间共享数据,可以考虑使用其他的机制,如localStorage或IndexedDB。localStorage是在同一域名下的所有标签页或窗口之间共享数据的持久性存储机制。IndexedDB是一个更强大的客户端数据库,可以在多个标签页或窗口之间共享和同步数据。

localStorage的数据是持久化的,只要我们不主动清除它,它就会一直存在。关闭选项卡/窗口会结束会话并清除 sessionStorage 中的对象。

数据可以在同一网站下的不同选项卡或窗口之间共享

什么是会话存储?

来自 MDN:只读 sessionStorage 属性访问当前源的会话存储对象。sessionStorage与localStorage类似;不同之处在于,localStorage 中的数据不会过期,而 sessionStorage 中的数据会在页面会话结束时被清除。

每当文档加载到浏览器的特定选项卡中时,就会创建一个唯一的页面会话并将其分配给该特定选项卡。该页面会话仅对特定选项卡有效。

只要选项卡或浏览器打开,页面会话就会持续,并且在页面重新加载和恢复后仍然存在。

在新选项卡或窗口中打开页面会创建一个具有顶级浏览上下文值的新会话,这与会话 cookie 的工作方式不同。

使用相同的 URL 打开多个选项卡/窗口会为每个选项卡/窗口创建 sessionStorage。

复制选项卡会将选项卡的 sessionStorage 复制到新选项卡中。

请注意第三点!或者我们可以在这里找到答案!

假设我们在https://medium.com/page/1中写了这样一段代码:

btn.addEventListener('click', () => {  window.sessionStorage.setItem('name', 'fatfish')  window.open('https://medium.com/page/2')})

我可以在 https://medium.com/page/2 获取名称值吗?
console.log(window.sessionStorage.getItem('name')) // null or fatfish?

是的,答案就是fatfish。那么,我们确定 sessionStorage 可以在多个选项卡之间共享数据吗?

最终答案

让我们尝试再次继续执行 https://medium.com/page/1 上的一段代码。

window.sessionStorage.setItem('name', 'medium')window.sessionStorage.setItem('age', '1000')
如果sessionStorage可以在不同窗口或选项卡之间共享数据,那么https://medium.com/page/2也可以获取name和age的最新值
console.log(window.sessionStorage.getItem('name')) // 111console.log(window.sessionStorage.getItem('age')) // null

所以,我们可以得出结论,sessionStorage不能在多个窗口或选项卡之间共享数据,但是,当通过window.open或链接打开新页面时,新页面会复制上一个页面的sessionStorage。

您还可以使用服务器端的存储解决方案,如数据库,将数据存储在服务器上,并通过网络进行访问和共享。这样在不同的浏览器标签页或窗口之间也可以共享数据。