You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

为何sessionStorage存在storage事件却无法跨标签页触发?

关于sessionStorage的storage事件困惑

MDN Web Docs指出:

"Window接口的storage事件会在另一个文档上下文修改存储区域(localStorage或sessionStorage)时触发。"

但这里存在明显的矛盾点:

  • sessionStorage数据仅在单个标签页内共享,无法被其他标签页访问
  • storage事件仅在同源的其他标签页或窗口中触发,而非存储变更发生的标签页

按照这个逻辑推导,若在Tab1中修改sessionStorage数据,理论上应该在Tab2、Tab3等其他同源标签页触发storage事件,但sessionStorage的数据本身又只能在Tab1内访问,这就让人非常困惑。

我通过以下代码测试了这一行为:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Storage Event Test</title>
  <script>
    function setSessionStorage() {
      sessionStorage.setItem('sessionKey', 'sessionValue');
      console.log('sessionStorage set:', sessionStorage.getItem('sessionKey'));
    }

    function setLocalStorage() {
      localStorage.setItem('localKey', 'localValue');
      console.log('localStorage set:', localStorage.getItem('localKey'));
    }

    window.addEventListener('storage', (event) => {
      console.log('Storage event detected!');
      console.log('Key:', event.key);
      console.log('Old Value:', event.oldValue);
      console.log('New Value:', event.newValue);
      console.log('Storage Area:', event.storageArea);
    });
  </script>
</head>
<body>
  <h1>Test Storage Event</h1>
  <button onclick="setSessionStorage()">Set sessionStorage</button>
  <button onclick="setLocalStorage()">Set localStorage</button>
</body>
</html>

测试过程是在两个同源标签页中打开该页面,当在Tab1中修改sessionStorage时,Tab2完全没有检测到storage事件(这和localStorage的触发表现截然不同)。

因此我的问题是:为何sessionStorage的storage事件会存在,即使它无法在任何其他地方触发?

内容的提问来源于stack exchange,提问作者lowkkid

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.06.17 06:55:02