写一个方法监听localStorage的变化

在前端开发中，监听 localStorage 的变化通常涉及到使用 window 对象的 storage 事件。这个事件会在同一来源的其他页面修改 localStorage 时触发。请注意，它不会在当前页面自身修改 localStorage 时触发。

以下是一个简单的示例，展示了如何编写一个方法来监听 localStorage 的变化：

function listenToLocalStorageChanges(callback) {
  // 检查 callback 是否为函数
  if (typeof callback !== 'function') {
    console.error('Provided callback is not a function.');
    return;
  }

  // 监听 storage 事件
  window.addEventListener('storage', function(event) {
    // event.key 是被修改或删除的键名
    // event.newValue 是新的值（如果是删除操作，则为 null）
    // event.oldValue 是旧的值（如果是新增操作，则为 null）
    // event.storageArea 是被修改的 Storage 对象（通常是 localStorage）
    // event.url 是触发这个变化的页面的 URL

    callback(event.key, event.newValue, event.oldValue, event.url);
  });
}

// 使用示例
listenToLocalStorageChanges(function(key, newValue, oldValue, url) {
  console.log('Key:', key);
  console.log('New Value:', newValue);
  console.log('Old Value:', oldValue);
  console.log('URL:', url);
});

在这个示例中，listenToLocalStorageChanges 函数接受一个回调函数作为参数。当 localStorage 发生变化时，这个回调函数会被调用，并接收到变化的相关信息（如键名、新值、旧值和触发变化的页面的 URL）。

请注意，由于 storage 事件不会在当前页面自身修改 localStorage 时触发，因此如果你想在当前页面也监听到变化，你可能需要在修改 localStorage 的同时手动触发一些逻辑。