Question

另一个脚本（没有vue.js）在本地存储中写入一些数据，例如数组“链接”。但是我的vue应用程序仅在页面重新加载后才能看到它（因为localstorage在vue中没有反应）。如何查看本地存储的更改并显示而无需重新加载页面？

Answer 1

本地存储并不是真正为不断更新的动态数据而设计的，但是假设您无法控制它。

VueJS仅监视其组件中的数据，因此您不能使用VueJS。

一个不很漂亮的解决方案是使用setInterval（https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval），它每隔x秒运行一次并从localStorage获取值。

这不是很有效，不是很有效

let name = 'Bergur'
setInterval(function() {
name = localStorage.getItem('name')
}, 5000)

Answer 2

如果您想查看本地存储中超出您影响范围的更改，可以对其进行轮询。

data() {
    return {
      lastChange: null,
      timer: null
    }
  },
  created() {
    let curVal = localStorage.getItem('foo');
    this.lastChange = new Date()
    this.timer = setInterval(() => {
      const newVal = localStorage.getItem('foo');
      if (newVal !== curVal) {
        curVal = newVal;
        // fireEvent, update state, etc
        // or update data in your component
        this.lastChange = new Date()
      }
    }, 1000);
  },
  beforeDestroy() {
    cleaInterval(this.timer)
  }

Vue。如何观察本地存储的变化？

2 个答案: