背景：项目接手维护中，有一次测试提了一个bug：开启了两个 tab，在 Atab 中完成业务操作，在 Btab 中做返回操作，但 Btab 中报错了。

排查：找到返回操作的代码，发现是调用了window.sessionStorage.getItem('xxx')来获取数据，使用console.log打印输出是null。

localStorage 和 sessionStorage 都是由浏览器提供的 Web 存储机制，用于在客户端存储数据，但它们在数据的生命周期和作用范围上有所不同。

localStorage

生命周期: localStorage 中存储的数据是持久的，即使用户关闭浏览器或重新启动计算机，数据仍然存在，直到明确地被删除。

作用范围: localStorage 在同一浏览器的同一个源（域名、协议和端口）之间共享。因此，如果你在一个标签页中设置了 localStorage 的数据，其他标签页在同一源下也能访问到这些数据。

// 在标签页A中设置数据
localStorage.setItem('username', 'Alice');


// 在标签页B中读取数据
const username = localStorage.getItem('username');
console.log(username);  // 输出: 'Alice'

sessionStorage

生命周期: sessionStorage 中存储的数据只在页面会话期间有效。当用户关闭标签页或浏览器时，数据会被清除。即使重新加载或恢复页面，数据也会保持存在，直到标签页或浏览器被关闭。

作用范围: sessionStorage 的作用范围是单个标签页或窗口。它不能在不同的标签页或窗口之间共享数据，即使它们属于同一个源。

// 在标签页A中设置数据
sessionStorage.setItem('username', 'Alice');


// 在标签页B中读取数据
const username = sessionStorage.getItem('username');
console.log(username);  // 输出: null (因为 sessionStorage 不共享数据)

特殊场景 window.open

// 在标签页A中设置数据
sessionStorage.setItem('username', 'Alice');
window.open('https://juejin.cn/post/7373226436570480655')


// 在标签页B中读取数据
const username = sessionStorage.getItem('username');
console.log(username);  // 输出: Alice (因为 新页面会复制前一页的 sessionStorage )

新开的页面会复制前一页的sessionStorage，但在不同的 tab 数据是独立的。

// 在标签页A中设置数据
sessionStorage.setItem('username', 'Alice');
window.open('https://juejin.cn/post/7373226436570480655')


// 在标签页B中读取数据
const username = sessionStorage.getItem('username');
console.log(username);  // 输出: Alice (因为 新页面会复制前一页的?sessionStorage )


// 在标签页B中重新 set 数据
sessionStorage.setItem('username', 'AliceB');


// 在标签页A中读取数据
sessionStorage.getItem('username'); // 输出：Alice(因为 不同的 tab 数据是独立的 )

在 Atab 里设置了username为 Alice，使用 window.open打开了 Btab，在 Btab 中可以读取到 username为 Alice，但在 Btab 里重新修改 username的值，Atab 里的值是不会被更改的

总结

localStorage: 可以在同一浏览器的多个标签页之间共享数据，只要这些标签页属于 同一个源。

sessionStorage: 不能在不同的标签页或窗口之间共享数据，即使它们属于同一个源。

作者：一牙西瓜

链接：https://juejin.cn/post/7373473695056822298

来源：稀土掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。