页面的通讯（ localStorage.setItem）

最新推荐文章于 2025-08-11 00:16:22 发布

原创最新推荐文章于 2025-08-11 00:16:22 发布 · 646 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文探讨如何利用localStorage.setItem进行页面同步通信。在同一个项目中，当两个页面同时打开时，通过重定义localStorage.setItem方法，可以实现在一个页面进行操作后，另一个页面即时响应。常见应用包括退出登录场景和其他数值的动态更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

页面的通讯就是：在同一个项目中，两个页面在同时开启的情况下，页面A做操作，页面B也跟着做操作，实现页面同步

这里我们就使用localStorage.setItem来实现两个页面之件的通讯，正常的localStorage.setItem是永久性存储，但是我们可以重新定义localStorage.setItem的方法，让它变为我们通讯用的函数

假设我们页面A，写以下内容：

// 第一个参数是  通讯名称，第二个是 当前时间的毫秒数
localStorage.setItem('name',new Date().getTime());//这个写在需要操作的页面

那么我们的页面B，就要写：

//两个页面 之间的 通讯
const fn = (a, b) => {
      // console.log(a.key);
      //这里我们就需要做判断，判断是不是对应的 通讯
     if (a.key === 'name') {
           //这里我们就能做对应的操作
         console.log('是正确的通讯')
       }
 }
//在window 添加监视器
window.addEventListener('storage', fn)
 return () => {
    //最后清理通讯缓存
    window.removeEventListener('storage', fn)
}

一般像这种操作在退出登录里面使用的比较多，当然也可以做其他的数值的修改