如何监听localStorage变量变化？模态框向主页面传值场景

当然有办法监听localStorage项的变化啦！浏览器原生提供了storage事件，专门用来监听同源页面中localStorage的修改（注意：这个事件不会在修改localStorage的当前页面触发，只会在同域名下的其他页面触发；如果你的模态框和主页面是同一个页面内的弹窗，后面会补充对应的处理方案）。

基本用法示例 #

1. 在主页面添加监听事件 #

你可以在主页面的脚本里加入这段代码，监听指定localStorage项的变化：

window.addEventListener('storage', function(e) {
  // e.key：被修改的localStorage项的键名
  // e.oldValue：修改前的旧值
  // e.newValue：修改后的新值
  // e.storageArea：指向localStorage对象
  // e.url：触发修改操作的页面URL
  
  // 假设你要监听的键是"modalTransmitValue"，这里做针对性判断
  if (e.key === 'modalTransmitValue') {
    console.log('模态框传递的值更新了：', e.newValue);
    // 在这里把新值渲染到主页面的目标元素上
    document.getElementById('mainPageDisplay').textContent = e.newValue;
  }
});

2. 在模态框中修改localStorage #

当你在模态框里获取到要传递的值后，正常调用setItem方法即可：

// 从模态框的输入框或其他元素获取值
const modalInputValue = document.getElementById('modalInput').value;
// 将值存入localStorage
localStorage.setItem('modalTransmitValue', modalInputValue);

特殊场景：同页面内模态框的处理 #

如果你的模态框是同一个页面内的弹窗（比如Bootstrap模态框这类），修改localStorage的操作和主页面属于同一个上下文，原生的storage事件不会触发。这时候可以用两种替代方案：

• 方案一：直接调用主页面的更新函数
  模态框完成值的设置后，直接调用主页面中负责更新展示的函数，不用绕localStorage：

  // 模态框内的代码
  const modalInputValue = document.getElementById('modalInput').value;
  // 调用主页面预先定义好的更新函数
  window.updateMainPageDisplay(modalInputValue);
  
  // 主页面的代码
  function updateMainPageDisplay(value) {
    document.getElementById('mainPageDisplay').textContent = value;
    // 同时可以把值存入localStorage做持久化
    localStorage.setItem('modalTransmitValue', value);
  }
  

• 方案二：手动触发自定义事件
  如果你还是想依赖localStorage做持久化，同时要在当前页面监听变化，可以手动触发一个自定义事件：

  // 模态框内设置值后触发自定义事件
  const modalInputValue = document.getElementById('modalInput').value;
  localStorage.setItem('modalTransmitValue', modalInputValue);
  
  // 触发自定义事件，携带修改的键和值
  window.dispatchEvent(new CustomEvent('localStorageUpdated', {
    detail: {
      key: 'modalTransmitValue',
      newValue: modalInputValue
    }
  }));
  
  // 主页面监听自定义事件
  window.addEventListener('localStorageUpdated', function(e) {
    if (e.detail.key === 'modalTransmitValue') {
      document.getElementById('mainPageDisplay').textContent = e.detail.newValue;
    }
  });
  

这样不管是跨页面还是同页面内的模态框，都能实现监听localStorage变化并更新主页面的需求啦！

内容的提问来源于stack exchange，提问作者zazvorniki