vue监听localStorage 变化

应用示例:【页面B】需要实时获取【页面A】数据更改,页面必须是同源(即同一个域名,例如:都在https://www.baidu.com/域名下)
1.在【页面A】更改缓存页面进行缓存修改or插入缓存

localStorage.setItem('socketQuery', '插入1')

2.在【页面B】需要监听缓存值更改页面进行

mounted() {
    const that = this;
    //监听缓存中指定key的值变化
    window.addEventListener('storage', function (e) {
      if(e.key && e.key == 'socketQuery' && e.newValue){
        that.socketQuery = e.newValue //即可获取到【页面A】最新的socketQuery
      }
    })
 },

如上即可在【页面B】实时获取到【页面A】中数据。

Logo

前往低代码交流专区

更多推荐