有什么方法可以“监视”Vuejs 中的本地存储吗？

Question

我正在尝试监视本地存储：

模板：

<p>token - {{token}}</p>

脚本：

computed: {
  token() {
    return localStorage.getItem('token');
  }
}

但是当

token

改变时，它不会改变。刷新页面后即可。

有没有办法在不使用 Vuex 或状态管理的情况下解决这个问题？

Answer 1

localStorage

不是反应式的，但我需要“观看”它，因为我的应用程序使用本地存储并且不想重写所有内容，所以这就是我使用

CustomEvent

所做的事情。

每当您向存储添加东西时，我都会发送一个

CustomEvent

localStorage.setItem('foo-key', 'data to store')

window.dispatchEvent(new CustomEvent('foo-key-localstorage-changed', {
  detail: {
    storage: localStorage.getItem('foo-key')
  }
}));

然后您需要在哪里观看它：

mounted() {
  window.addEventListener('foo-key-localstorage-changed', (event) => {
    this.data = event.detail.storage;
  });
},
data() {
  return {
    data: null,
  }
}

Answer 2

当然可以！我认为最好的做法是使用 getter / setter 语法来包装本地存储。

这是一个工作示例：

HTML：

<div id="app">
  {{token}}
  <button @click="token++"> + </button>
</div>

JS：

new Vue({
  el: '#app',
  data: function() {
    return {
      get token() {
        return localStorage.getItem('token') || 0;
      },
      set token(value) {
        localStorage.setItem('token', value);
      }
    };
  }
});

还有一个JSFiddle。

Answer 3

VueJs 网站有一个关于此的页面。 https://v2.vuejs.org/v2/cookbook/client-side-storage.html

他们提供了一个例子。 给定这个 html 模板

<template>
  <div id="app">
    My name is <input v-model="name">
  </div>
<template>

他们提供了生命周期

mounted

方法和观察者的使用。

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

mounted

方法可确保

name

是从本地存储设置的（如果已存在），并且观察程序允许您的组件在本地存储中的名称发生修改时做出反应。这对于添加或更改本地存储中的数据时效果很好，但如果有人手动擦除本地存储，Vue 将不会做出反应。

Answer 4

更新：vue-persistent-state 不再维护。如果它不符合您的要求，请分叉或寻找其他地方。

如果您想避免样板文件（getter/setter 语法），请使用 vue-persistent-state 来获取反应式持久状态。

例如：

import persistentState from 'vue-persistent-state';  

const initialState = {
  token: ''  // will get value from localStorage if found there
};
Vue.use(persistentState, initialState);

new Vue({
  template: '<p>token - {{token}}</p>'
})

现在

token

可以作为所有组件和 Vue 实例中的数据使用。对

this.token

的任何更改都将存储在 localStorage 中，您可以像在普通 Vue 应用程序中一样使用

this.token

。

该插件基本上是观察者和

localStorage.set

。您可以在here阅读代码。它

1. 添加了 mixin 以使

   initialState

   在所有 Vue 实例中可用，并且
2. 观察变化并存储它们。

免责声明：我是 vue-persistent-state 的作者。

Answer 5

你可以通过两种方式做到这一点，

1. 使用 vue-ls 然后在存储键上添加监听器，使用

       Vue.ls.on('token', callback)
   

   或

       this.$ls.on('token', callback)
   

2. 通过使用 DOM 的存储事件监听器：

       document.addEventListener('storage', storageListenerMethod);
   

Answer 6

LocalStorage 或 sessionStorage 不是响应式的。因此你不能对它们设置观察者。例如，如果您使用 Vuex，解决方案是存储存储状态中的值。 例如：

SET_VALUE:(state,payload)=> {
    state.value = payload
    localStorage.setItem('name',state.value)
    or
    sessionStorage.setItem('name',state.value)
  }

Answer 7

使用组合 API 更新 Vue3

import { ref, onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const localValue = ref(localStorage.getItem('maValeur') || '');

    const handleStorageChange = (event) => {
        localValue.value = event.newValue;
       
        console.log('New value:', localValue.value);
    };

    onMounted(() => {
      window.addEventListener('storage', handleStorageChange);
    });

    onUnmounted(() => {
      window.removeEventListener('storage', handleStorageChange);
    });

    return {
      localValue,
    };
  },
};