使用 Vue.js 跨浏览器选项卡的反应式 localStorage 对象

Posted 2023-03-05

【中文标题】使用 Vue.js 跨浏览器选项卡的反应式 localStorage 对象

【英文标题】：Reactive localStorage object across browser tabs using Vue.js

【发布时间】：2019-03-17 18:05:47

【问题描述】：

我正在尝试使 localStorage 对象具有反应性，这样如果它更新，它也会在使用同一对象的其他选项卡中更新。我正在使用 Vue.js 并尝试创建一个返回 localStorage 对象的计算属性，但这不起作用。如何使对象具有反应性并使其也在其他浏览器选项卡中更新？

computed: 
  localStorageObject() 
    return JSON.parse(localStorage.getItem('object'));
  

【参考方案1】：

@Matthias 有一个答案的开头，但它不会对其他选项卡中的更改做出反应。为此，您可以处理StorageEvent。这是一个粗略的草图，您可以根据需要进行增强。

const app = new Vue(
  el: '#app',
  data: 
    name: ''
  ,
  methods: 
    onStorageUpdate(event) 
      if (event.key === "name") 
        this.name = event.newValue;
      
    
  ,
  mounted() 
    if (localStorage.name) 
      this.name = localStorage.name;
    
    window.addEventListener("storage", this.onStorageUpdate);
  ,
  beforeDestroy() 
    window.removeEventListener("storage", this.onStorageUpdate);
  ,
  watch: 
    name(newName) 
      localStorage.name = newName;
    
  
);

【参考方案2】：

在 Vue.js 食谱页面上有一个如何实现这一点的示例：https://vuejs.org/v2/cookbook/client-side-storage.html

在示例中，name 存储在本地存储中。

const app = new Vue(
  el: '#app',
  data: 
    name: ''
  ,
  mounted() 
        if (localStorage.name) 
      this.name = localStorage.name;
    
  ,
  watch: 
    name(newName) 
      localStorage.name = newName;
    
  
);

【讨论】：

也许在文档/窗口上添加一个focus 事件侦听器，它与上面示例中的mounted 部分相同？编辑：没关系，刚刚意识到已经有答案了