背景：项目接手维护中，有一次测试提了一个bug：开启了两个 tab，在 Atab 中完成业务操作，在 Btab 中做返回操作，但 Btab 中报错了～
排查：找到返回操作的代码，发现是调用了
window.sessionStorage.getItem('xxx')来获取数据，当时内心 os：没问题呀（小菜菜一枚）。但当使用console.log打印输出的时候，哎哈，是null，颠覆了内心的认知，熟练的打开 gpt 进行知识补缺。
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: 不能在不同的标签页或窗口之间共享数据，即使它们属于同一个源。
