双屏之间的传参localStorage和postMassage

包子爱吃肉

2023-03-01 263 阅读1分钟

在最近的项目的需要使用双屏操作，使用左边的界面来操作右边gis的变化，如果使用使用socket，需要前后端联调，现在需要前端解决这个问题，调研了localStorage和postMassage这两种方式，展开介绍一下。

localStorage

使用localStorage是将参数存到浏览器中，通过window监听他的变化

// A页面通过localStorage来改变参数，发生变化
localStorage.setItem('test',2)   

// B页面 当参数发生变化的时候，会使当前监听发生变化
window.addEventListener('storage', (e) => {
  console.log(e);  // 当存储时，发生改变，会触发变化
  console.log(localStorage.getItem('test'));
})

问题：

使用localStorage时，只有当前使用localStorage存储的数据发生变化后，才能监听到，由于他本身是保存在浏览器中，数据不能自动清除，所以刷新不会触发监听。
所以每次修改都需要发生改变，如果监听同一个id就不能通过刷新点击触发另一个页面改变，所以拥有局限性

postMassage

使用postMassage传参需要window.oen打开一个新的窗口，通过这个ip传参
使用postMassage不需要再触发参数改变才能监听到，只要点击传参，都可以接收到

// A页面
let postmessage = window.open('http://localhost:8080/test') // 还可以跟需要监听页面的路由
 // 两个参数，第一个是需要传递给B页面的参数，第二个是传递给B页面的ip
 postmessage.postMessage({name:'包子'}, 'http://localhost:8080')
 
 // B页面
 window.addEventListener('message', (e) => {
  console.log(e);  // 只要A页面触发，就会收到参数
})