使用window.addEventListener('storage')监听localStorage变化，为什么没有触发事件？

window.addEventListener('storage', function(event) {
  // 判断是否是目标项发生变化
  if (event.key === 'COMMON_HEADER') {
    // 获取变化后的值
    var newValue = event.newValue;
    // 处理变化后的值
    console.log('myItem的值已变为：' + newValue);
  }
});

上述代码监听了localStorage的变更事件，但使用localStorage.setItem('COMMON_HEADER', '{}')却无法触发事件监听。这可能是以下原因导致的：

监听事件的代码没有正确执行。请确保代码片段被正确执行，且事件监听器已经添加到window对象上。
event.key的值不是'COMMON_HEADER'。请确保在设置localStorage项时，键名为'COMMON_HEADER'。
localStorage项的值没有发生变化。请确保在设置localStorage项时，值确实发生了变化。注意，如果新值与旧值相同，将不会触发storage事件。

在同一窗口触发更新

如果你要在同一窗口中触发更新，可以尝试以下方法：

在设置localStorage项后，手动触发事件监听器。例如：

localStorage.setItem('COMMON_HEADER', '{}');
window.dispatchEvent(new StorageEvent('storage', { key: 'COMMON_HEADER', newValue: '{}'}));

将事件监听器添加到localStorage对象上，而不是window对象上。例如：

localStorage.addEventListener('storage', function(event) {
  if (event.key === 'COMMON_HEADER') {
    var newValue = event.newValue;
    console.log('myItem的值已变为：' + newValue);
  }
});

请注意，以上方法可能需要根据你的具体需求进行调整。

使用window.addEventListener('storage')监听localStorage变化，为什么没有触发事件？