使用js写一个方法监听localStorage的变化

"```javascript

function listenLocalStorageChanges(callback) {
  if (typeof callback !== 'function') {
    throw new Error('Callback must be a function');
  }

  // 创建一个代理对象，用于监听localStorage的变化
  const proxy = new Proxy(localStorage, {
    set(target, key, value) {
      // 在设置localStorage值之前调用回调函数
      callback(key, value);

      // 设置localStorage的值
      target[key] = value;

      return true;
    },
    deleteProperty(target, key) {
      // 在删除localStorage值之前调用回调函数
      callback(key, null);

      // 删除localStorage的值
      delete target[key];

      return true;
    }
  });

  return proxy;
}

// 使用示例
const localStorageProxy = listenLocalStorageChanges((key, value) => {
  console.log(`localStorage key \"${key}\" changed to \"${value}\"`);
});

// 修改localStorage的值
localStorageProxy.testKey = 'testValue';  // 输出: localStorage key \"testKey\" changed to \"testValue\"

// 删除localStorage的值
delete localStorageProxy.testKey;  // 输出: localStorage key \"testKey\" changed to \"null\"

通过以上代码，我们可以创建一个 listenLocalStorageChanges 方法，用于监听 localStorage 的变化。该方法接受一个回调函数作为参数，当 localStorage 的值被设置或删除时，回调函数将被调用。

在方法内部，我们使用 Proxy 对象创建了一个代理对象 proxy，通过设置 set 和 deleteProperty 的拦截器，我们可以在设置和删除 localStorage 的值之前调用回调函数。

在回调函数中，我们可以获取到被修改的 localStorage 键（key）和对应的值（value），然后进行相应的处理。在示例中，我们简单地将其打印到控制台上。

使用示例展示了如何使用 listenLocalStorageChanges 方法来监听 localStorage 的变化。我们创建了一个 localStorageProxy 对象，该对象代理了 localStorage，并在修改和删除 localStorage 的值时触发了回调函数，并将相应的键和值作为参数传递给回调函数。

通过这个方法，我们可以方便地监听 localStorage 的变化，以便在值被修改或删除时进行相应的操作，从而满足我们对 localStorage 变化的需求。"