当前位置：首页 > news >正文

localStorage中的数据变化时，如何监听这些变化

news 来源：原创 2025/6/20 0:30:52

在 JavaScript 中，你可以使用 window.addEventListener 方法来监听 storage 事件，这个事件会在 localStorage 中的数据发生变化时触发。以下是一个简单的示例代码，展示了如何监听 localStorage 的变化：

// 监听 storage 事件
window.addEventListener('storage', function (e) {
  // 打印变化的键、旧值和新值
  console.log('Storage changed:', e.key, e.oldValue, e.newValue);
});

在这个示例中，我们为 window 对象添加了一个 storage 事件的监听器。当 localStorage 中的数据发生变化时，这个监听器会被触发，并打印出变化的键、旧值和新值。

请注意，这个监听器会在所有窗口中触发，即使变化发生在其他窗口或标签页中。如果你只想在当前窗口中监听 localStorage 的变化，可以使用 localStorage 对象的 onchange 属性：

// 监听当前窗口的 localStorage 变化
localStorage.onchange = function (e) {
  // 打印变化的键、旧值和新值
  console.log('Local storage changed:', e.key, e.oldValue, e.newValue);
};

这两种方法都可以用来监听 localStorage 的变化，你可以根据你的需求选择合适的方法。

代码解释

这个代码块定义了一个名为 remoteLoad 的函数，用于动态加载外部 JavaScript 文件。以下是对代码的详细解释：

const remoteLoad = url => {
  return new Promise((resolve, reject) => {
    // 检查是否已经存在具有相同ID的script标签
    const existingScript = document.getElementById(url);
    
    // 如果script不存在
    if (!existingScript) {
      // 创建一个新的script元素
      const script = document.createElement('script');
      script.id = url; // 设置script的ID为传入的URL
      script.src = url; // 设置script的源为传入的URL
      script.async = true; // 异步加载脚本
      document.body.appendChild(script); // 将script元素添加到文档的body中
      
      // 当脚本加载成功时执行
      script.onload = function () {
        setTimeout(() => {
          this.onerror = this.onload = null; // 清除事件处理程序
          resolve(); // 解析Promise，表示加载成功
        }, 500); // 延迟500毫秒后执行
      };
      
      // 当脚本加载失败时执行
      script.onerror = function () {
        this.onerror = this.onload = null; // 清除事件处理程序
        reject('加载失败' + url); // 拒绝Promise，并传递错误信息
      };
    } else {
      // 如果script已经存在，直接解析Promise
      setTimeout(() => {
        resolve();
      }, 500); // 延迟500毫秒后执行
    }
  });
};

export default remoteLoad;

功能概述

检查是否已存在相同的脚本：通过 document.getElementById(url) 检查页面上是否已经存在一个具有相同 ID 的 <script> 标签。如果存在，则认为该脚本已经被加载过。
动态创建和加载脚本：如果脚本不存在，则创建一个新的 <script> 元素，设置其 id、src 属性，并将其异步加载到文档的 <body> 中。
处理加载成功和失败：
- 成功：在脚本加载成功后（即 onload 事件触发），使用 setTimeout 延迟 500 毫秒后调用 resolve()，表示加载成功。同时清除 onload 和 onerror 事件处理程序。
- 失败：在脚本加载失败时（即 onerror 事件触发），立即调用 reject()，并传递错误信息。同时清除 onload 和 onerror 事件处理程序。
重复加载：如果脚本已经存在，则直接在 500 毫秒后调用 resolve()，表示无需重新加载。

使用示例

假设你有一个外部脚本 URL，你可以这样使用 remoteLoad 函数来加载它：

remoteLoad('https://example.com/some-script.js')
  .then(() => {
    console.log('脚本加载成功');
    // 在这里可以安全地使用加载的脚本
  })
  .catch(error => {
    console.error('脚本加载失败:', error);
  });