vue localstorage

// 使用 Vue 和 localStorage 的示例代码

new Vue({
  el: '#app',
  data: {
    message: ''
  },
  methods: {
    // 保存数据到 localStorage
    saveToLocalStorage() {
      localStorage.setItem('message', this.message);
      console.log('Message saved to localStorage:', this.message);
    },
    // 从 localStorage 加载数据
    loadFromLocalStorage() {
      this.message = localStorage.getItem('message');
      console.log('Message loaded from localStorage:', this.message);
    },
    // 从 localStorage 删除数据
    removeFromLocalStorage() {
      localStorage.removeItem('message');
      this.message = '';
      console.log('Message removed from localStorage');
    }
  },
  created() {
    // 组件创建时尝试加载数据
    this.loadFromLocalStorage();
  }
});

解释说明：

1. data: 定义了一个 message 属性，用于存储用户输入的消息。
2. methods:
   • saveToLocalStorage: 将 message 保存到浏览器的 localStorage 中，键名为 'message'。
   • loadFromLocalStorage: 从 localStorage 中读取 'message' 并赋值给 message。
   • removeFromLocalStorage: 从 localStorage 中删除 'message'，并清空 message。
3. created: 在组件创建时调用 loadFromLocalStorage 方法，尝试加载之前保存的数据。

这样可以在页面刷新后仍然保留用户的输入内容。