vue 本地存储

// 使用 Vue 和本地存储 (localStorage) 的示例代码

new Vue({
  el: '#app',
  data: {
    message: ''
  },
  methods: {
    // 将数据保存到 localStorage
    saveToLocalStorage() {
      localStorage.setItem('message', this.message);
      alert('Message saved to localStorage');
    },
    // 从 localStorage 加载数据
    loadFromLocalStorage() {
      this.message = localStorage.getItem('message') || '';
      if (this.message) {
        alert('Message loaded from localStorage');
      } else {
        alert('No message found in localStorage');
      }
    },
    // 从 localStorage 删除数据
    removeFromLocalStorage() {
      localStorage.removeItem('message');
      this.message = '';
      alert('Message removed from localStorage');
    }
  },
  mounted() {
    // 页面加载时尝试从 localStorage 加载数据
    this.loadFromLocalStorage();
  }
});

解释说明：

1. data: 定义了一个 message 变量，用于存储用户输入的消息。
2. methods:
   • saveToLocalStorage: 将当前的 message 保存到浏览器的 localStorage 中，键名为 message。
   • loadFromLocalStorage: 从 localStorage 中读取 message 并赋值给 message 变量。如果找不到该键，则返回空字符串。
   • removeFromLocalStorage: 从 localStorage 中移除 message 键，并将 message 变量置为空字符串。
3. mounted: 当 Vue 实例挂载完成后，自动调用 loadFromLocalStorage 方法，尝试加载之前保存的消息。

通过这种方式，你可以轻松地在浏览器中持久化存储一些简单的数据。