如果“sessionStorage”不跨选项卡传播，为什么会存在“storage”事件？

问题描述 投票：0回答：2

MDN Web 文档是这么说的

“当存储区域（localStorage 或 sessionStorage）在另一个文档的上下文中被修改时，将触发 Window 接口的存储事件。”

但是

  • sessionStorage
    数据仅在一个选项卡内共享，无法从任何其他选项卡访问
  • 存储事件仅在共享同一源（域）的其他选项卡或窗口中触发，而不是在发生存储更改的选项卡中触发。

因此，如果我们更改 

Tab1
sessionStorage
中的某些数据，事件应该在 
Tab2
、
Tab3
等中触发，但同时，来自 
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>

我在两个选项卡中打开此页面，当我在 

sessionStorage
上更改 
Tab1
时，
Tab2
没有检测到 
storage
事件（与 
localStorage
不同）。

所以，我的问题是：如果无法从任何地方访问它，为什么存在 

storage
事件？

    
	




javascript

browser

dom-events

session-storage


2个回答




    
    
    

        

            

                

                    
0
投票

                    
                

            

        

        


sessionStorage
index.html


<!DOCTYPE html>
<html>
    <head>
        <title>index</title>
        <script>
            window.addEventListener('storage', e => {
                console.log(e);
            });
        </script>
    </head>
    <body>
        <iframe src="frame.html"></iframe>
    </body>
</html>

frame.html

    



    

    
    
    

    

        

            

                

                    
0
投票

                    
                

            

        

        


如果一个网页在同一个选项卡中有多个 iframe，并且有相同的 sessionStorage，如果一个 iframe 可能会改变 sessionStorage 的值，那么可以通知同一个选项卡中的其他 iframe 做一些事情。


换句话说，当同一文档的多个共享一个选项卡而不是跨选项卡通信的同一个 sessionStorage 时，就会出现 sessionStorage 的存储事件。

    

	

    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2025. All rights reserved.