JavaScript 中 LocalStorage 怎么监听数据变化的 storage 事件-js教程-PHP中文网

LocalStorage无主动监听机制，但浏览器原生支持storage事件，仅在同源其他标签页修改localStorage时触发，用于跨标签页状态同步；需手动初始化状态并注意同源、字符串存储、隐私模式等限制。

javascript 中 localstorage 怎么监听数据变化的 storage 事件

LocalStorage 本身不提供主动监听机制，但浏览器原生支持 storage 事件——它不是监听“所有修改”，而是专用于**跨标签页通知**：当同源的其他标签页调用 localStorage.setItem() 或 clear() 时，当前标签页会收到该事件。

storage 事件只在其他标签页触发

这是最关键的前提。你在当前页面执行：

localStorage.setItem('theme', 'dark')
不会触发本页的 storage 事件
只会让同一域名下的其他已打开标签页收到这个事件

所以它天然适合多标签页状态同步，比如主题切换、登录态更新、购物车变更等场景。

正确监听写法与事件字段

监听方式很简单：

Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载

window.addEventListener('storage', (e) => {
  console.log('键名:', e.key);
  console.log('旧值:', e.oldValue);
  console.log('新值:', e.newValue);
  console.log('触发页面:', e.url);
  console.log('存储区域:', e.storageArea === localStorage ? 'localStorage' : 'sessionStorage');
});

注意几个关键点：