在浏览器环境下监听storage事件

鹿守心畔光
254 阅读2分钟

  1. 基本概念

    1. window.addEventListener('storage', callback)是JavaScript中用于在浏览器环境下监听storage事件的方法。window对象代表浏览器窗口，addEventListener用于添加事件监听器，'storage'是事件类型，callback是当storage事件被触发时要执行的函数。

  2. storage 事件

    1. 触发场景：当同一个域名下的其他窗口（例如，另一个标签页或者一个iframe）修改了localStorage或者sessionStorage时，当前窗口会触发storage事件。这使得一个窗口能够感知到其他窗口对存储数据的修改，从而做出相应的响应。

    2. 事件对象属性：当storage事件被触发时，传递给callback函数的事件对象（通常用event表示）包含一些重要的属性，例如：

      • key：被修改的存储项的键（key）名称。

      • oldValue：存储项修改前的值。

      • newValue：存储项修改后的的值。

      • storageArea：指向被修改的存储对象，是localStorage还是sessionStorage。

      • url：触发这个存储变化的文档的URL。

  3. 示例

    1. 简单示例：监听 localStorage 修改并打印信息

      • window.addEventListener('storage', function(event) {
  console.log('存储发生变化');
  console.log('被修改的键:', event.key);
  console.log('旧值:', event.oldValue);
  console.log('新值:', event.newValue);
  console.log('存储区域:', event.storageArea === localStorage);
  console.log('触发变化的URL:', event.url);
});
      • 在这个示例中，当localStorage（或sessionStorage）在同一域名的其他窗口被修改时，会在控制台打印出关于存储变化的详细信息，包括被修改的键、旧值、新值、存储区域以及触发变化的URL。

    2. 应用场景示例：同步多个窗口的数据显示

      • 假设你有一个网页应用，在多个标签页中打开，并且这些标签页都显示从localStorage读取的数据。当一个标签页修改了localStorage中的数据时，其他标签页需要更新显示内容。
      • <!DOCTYPE html>
<html>
<head>
  <title>Storage Event Example</title>
</head>
<body>
  <div id="data-display"></div>
  <script>
    // 从localStorage读取数据并显示
    function updateDisplay() {
      var data = localStorage.getItem('sharedData');
      document.getElementById('data-display').innerHTML = data? data : '暂无数据';
    }
    updateDisplay();
    window.addEventListener('storage', updateDisplay);
  </script>
</body>
</html>
      • 在这个网页中，updateDisplay函数用于从localStorage读取数据并显示在div元素中。通过window.addEventListener('storage', updateDisplay)，当localStorage在其他窗口被修改时，updateDisplay函数会被调用，从而更新当前窗口的显示内容，实现了多个窗口之间数据显示的同步。
avatar
文章
阅读
粉丝