监听localStorage的变化

前言：在 JavaScript 中，localStorage 本身并没有提供直接的监听机制，但可以通过以下方法来监控 localStorage 的变化：

一、使用 storage 事件监听跨标签页或窗口的变化

storage 事件会在 其他标签页或窗口 修改 localStorage 时触发（当前标签页内的修改不会触发 storage 事件）。如果你希望在其他标签页或者窗口中修改 localStorage 时获得通知，可以使用 window.addEventListener('storage', ...) 来监听。

window.addEventListener('storage', (event) => {
  if (event.key === 'Id') {
    console.log('uavId has been changed:', event.newValue);
    const updatedData = JSON.parse(event.newValue);
    console.log(updatedData.Id, updatedData.Name); // 获取修改后的 uavId 和 uavSnCode
  }
});

这段代码会在 其他标签页或窗口 中修改 uavId 时触发，并获取修改后的值。

二、监听当前标签页 localStorage 的变化

如果你希望在当前标签页内修改 localStorage 时也能够触发某些操作，可以通过自定义函数来手动“监听” localStorage 的变化。因为 localStorage 没有内建的机制来监听它的变化，所以你可以封装 setItem 和 getItem 操作，并在每次调用时执行回调。

// 自定义的 setItem 方法，封装 localStorage 的操作
function setLocalStorage(key, value) {
  localStorage.setItem(key, JSON.stringify(value)); // 存储数据
  if (key === 'Id') {
    console.log('Id更新值为:', value);
    // 你可以在这里执行其他逻辑，比如更新界面等
  }
}

// 自定义的 getItem 方法，用于获取存储的对象
function getLocalStorage(key) {
  const value = localStorage.getItem(key);
  return value ? JSON.parse(value) : null;
}

// 使用示例
setLocalStorage('Id', { Id: 12345, Name: 'ABC123' });

// 获取存储的数据
const storedData = getLocalStorage('Id');
console.log(storedData); // 输出 { Id: 12345, Name: 'ABC123' }

三、利用 Proxy 监听 localStorage

如果你希望创建一个更通用的 localStorage 监听器，可以利用 JavaScript 的 Proxy 来拦截 localStorage 的 get 和 set 操作。

// 创建一个 Proxy 对象来拦截 localStorage 操作
const localStorageProxy = new Proxy(localStorage, {
  get(target, prop) {
    return target.getItem(prop); // 通过代理来获取值
  },
  set(target, prop, value) {
    const result = target.setItem(prop, value); // 通过代理设置值
    if (prop === 'Id') {
      console.log('Id更新为:', value);
      // 你可以在这里执行其他的逻辑
    }
    return result;
  }
});

// 使用 Proxy 操作 localStorage
localStorageProxy.setItem('Id', JSON.stringify({ Id: 12345, Name: 'ABC123' }));
console.log(localStorageProxy.getItem('Id')); // 输出 { Id: 12345, Name: 'ABC123' }

总结：

• 跨标签页或窗口的变化：可以通过 storage 事件来监听其他标签页/窗口对 localStorage 的修改。
• 当前标签页的变化：可以通过封装 setItem 和 getItem 方法来手动监听 localStorage 的变化。
• 通用的监听机制：使用 Proxy 来代理 localStorage，这可以使你在任何修改 localStorage 时都能执行相应的回调。

应用：监听 localStorage 中的 userData 数据变化，实现了页面内容的动态更新

基本框架：

<template>
<input type="text" id="usernameInput" placeholder="Enter username">
<input type="email" id="emailInput" placeholder="Enter email">
<button onclick="updateUserData()">Update</button>
</template>
<script>
function updateUserData() {
  const username = document.getElementById('usernameInput').value;
  const email = document.getElementById('emailInput').value;

  const newUserData = { username, email };
  localStorage.setItem('userData', JSON.stringify(newUserData));
}

</script>

通过浏览器的开发者工具 (DevTools) 来查看 localStorage 中存储的内容。假设我们存储如下的 userData：

const userData = {
  username: 'John Doe',
  email: 'john.doe@example.com'
};
localStorage.setItem('userData', JSON.stringify(userData));

当我们更新 localStorage 中的 userData 后，其他标签页或者窗口中会通过 storage 事件监听器获取到更新，并调用 updateUserInfo 来更新页面内容。

// 提取更新函数
function updateUserInfo() {
  // 从 localStorage 中获取用户信息
  const storedData = JSON.parse(localStorage.getItem('userData'));

  // 如果没有找到存储的用户数据，直接返回
  if (!storedData) return;

  // 更新页面上的用户名和电子邮件
  const usernameElement = document.getElementById('username');
  const emailElement = document.getElementById('email');

  // 设置用户名和电子邮件
  usernameElement.textContent = storedData.username || '未设置用户名';
  emailElement.textContent = storedData.email || '未设置电子邮件';
}

// 在组件挂载时设置事件监听器和初始化数据
onMounted(() => {
  // 监听 storage 事件，监听其他标签页或窗口对 userData 的修改
  window.addEventListener('storage', (event) => {
    if (event.key === 'userData') {
      console.log('userData changed:', event.newValue);
      updateUserInfo();  // 当 userData 变化时调用更新函数
    }
  });

  // 初始化时调用更新函数，确保页面上的数据是最新的
  updateUserInfo();
});