背景

随着前端的任务越来越重，很多时候，交互逻辑不能只在单独的页面完成，那么就需要跨页面通信了。 应用场景如，新开页面完成新增、编辑，删除等操作，本页面需要重新获取数据等。

使用localStorage实现

原理

基于addEventListener，通过监听指定storage变化，来获取其他页面信息变更，从而回调本页面逻辑。

• 添加监听：
  • 如在pageA页面添加监听

    window.addEventListener('storage', (e) => { 
        // e.key: storage的key 
        // e.oldValue: 更新前的值 
        // e.oldValue: 更新后的值 
        // todo
    })
    

• 修改stroage值：

  • 在pageB页面修改：

    window.localStorage.setItem('xxx', 'xxxxxx')
    

• 此时pageA中，会获得storage的变化

最后

为了保证性能，在使用后，记得及时移除listener