为何不同浏览器实例间会共享sessionStorage数据？（Chrome 62/Windows 10）

嘿，你碰到的这个情况其实是Chrome 62版本里一个挺坑的兼容性问题，和咱们常规认知里sessionStorage的单标签页隔离规则不符，我来给你掰扯清楚：

一、为啥会出现跨标签页同步？ #

按标准规范来说，sessionStorage是每个独立标签页/窗口（也就是顶级浏览上下文）独享一份存储实例，不同标签页之间的数据完全隔离。但在Chrome 60到62这个版本区间里，浏览器出现了一个bug：如果多个同域名的标签页是从同一个会话链里打开的（比如从当前标签页点链接开新标签、或者用window.open打开的同域页面），Chrome会错误地让这些标签页共享同一份sessionStorage，导致一个标签页改了数据，其他关联标签页的对应值也跟着变。

二、结合你的AngularJS服务场景的排查方向 #

既然你是用AngularJS服务封装的存储操作，不妨先检查这两个点：

• 有没有在服务里错误地把sessionStorage的引用挂载到了全局作用域？比如不小心把存储对象挂到了$rootScope或者单例服务的全局变量上，再加上Chrome的这个bug，就更容易出现跨标签页同步的情况。
• 有没有把localStorage的逻辑误写成sessionStorage？这种低级失误也会导致跨标签页数据同步，别笑，我见过好多次了😂

三、解决办法 #

1. 升级浏览器：最省心的办法就是把Chrome更到63及以上版本，这个bug在后续版本里已经被修复了，sessionStorage会恢复正常的单标签页隔离特性。
2. 给存储键加唯一标识：如果暂时没法升级浏览器，那就给每个标签页的sessionStorage键名加个唯一标识，比如用window.name（新标签页默认是空，你可以在页面加载时生成一个UUID赋值给它），这样不同标签页的键名就不一样，自然不会互相干扰。给你写个AngularJS服务的示例：

angular.module('myApp').service('storageService', function() {
  // 生成唯一标签页ID，用UUID或者随机字符串都行
  const tabId = window.name || self.crypto.randomUUID();
  window.name = tabId;

  this.setItem = function(key, value) {
    const uniqueKey = `${tabId}_${key}`;
    sessionStorage.setItem(uniqueKey, JSON.stringify(value));
  };

  this.getItem = function(key) {
    const uniqueKey = `${tabId}_${key}`;
    const storedValue = sessionStorage.getItem(uniqueKey);
    return storedValue ? JSON.parse(storedValue) : null;
  };
});

3. 手动验证隔离性：可以在不同标签页的控制台里执行sessionStorage.getItem('你的键名')，同时打开Chrome开发者工具的「Application」>「Storage」>「Session Storage」，看看不同标签页的存储内容是不是真的一致，确认问题根源。

补充一句：如果你的应用本来就需要跨标签页同步数据，那应该用localStorage或者更现代的BroadcastChannel API，sessionStorage从设计初衷就是单标签页隔离的，所以碰到这种异常情况，优先考虑浏览器版本的锅~

内容的提问来源于stack exchange，提问作者Andrew Gray