vue中使用localStorage存储信息

在Vue中使用localStorage存储信息，你可以在组件的methods中创建一个函数来设置localStorage，另一个函数来获取localStorage的值，还可以创建一个函数来清除localStorage存储的值。以下是一个简单的例子：

<template>
  <div>
    <input type="text" v-model="inputValue" @input="saveToLocalStorage">
    <button @click="clearLocalStorage">清除</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  created() {
    this.inputValue = this.loadFromLocalStorage();
  },
  methods: {
    saveToLocalStorage() {
      localStorage.setItem('myData', this.inputValue);
    },
    loadFromLocalStorage() {
      return localStorage.getItem('myData') || '';
    },
    clearLocalStorage() {
      localStorage.removeItem('myData');
      this.inputValue = '';
    }
  }
}
</script>

在这个例子中，saveToLocalStorage方法在每次输入框的值发生变化时被触发，用来将输入的内容保存到localStorage。loadFromLocalStorage方法在组件创建时被调用，用来从localStorage加载之前保存的数据。clearLocalStorage方法用来清除localStorage中保存的数据，并将输入框的值重置。