Vue.js入门系列（十八）：利用浏览器本地存储实现TodoList数据持久化

// 存储数据
localStorage.setItem('username', 'JohnDoe');

// 读取数据
const username = localStorage.getItem('username');
console.log(username); // 输出: JohnDoe

// 删除数据
localStorage.removeItem('username');

// 清空所有数据
localStorage.clear();

methods: {
  saveTasks() {
    localStorage.setItem('tasks', JSON.stringify(this.tasks));
  }
}

methods: {
  addTask() {
    if (this.newTask.trim() !== '') {
      this.tasks.push({
        id: this.tasks.length + 1,
        text: this.newTask,
        completed: false
      });
      this.newTask = '';
      this.saveTasks();
    }
  },
  removeTask(task) {
    this.tasks = this.tasks.filter(t => t.id !== task.id);
    this.saveTasks();
  },
  toggleTask(task) {
    task.completed = !task.completed;
    this.saveTasks();
  }
}

created() {
  const savedTasks = localStorage.getItem('tasks');
  if (savedTasks) {
    this.tasks = JSON.parse(savedTasks);
  }
}

<div id="app">
  <div class="todo-list">
    <h1>My Todo List</h1>
    <input type="text" v-model="newTask" placeholder="Add a new task" @keyup.enter="addTask" />
    <ul>
      <li v-for="task in tasks" :key="task.id">
        <input type="checkbox" :checked="task.completed" @change="toggleTask(task)" />
        <span :class="{ completed: task.completed }">{{ task.text }}</span>
        <button @click="removeTask(task)">Delete</button>
      </li>
    </ul>
    <div class="todo-footer">
      <input type="checkbox" v-model="allCompleted" @change="toggleAllTasks" /> Toggle All
      <p>{{ remainingTasks }} tasks remaining</p>
    </div>
  </div>
</div>

new Vue({
  el: '#app',
  data: {
    newTask: '',
    tasks: []
  },
  computed: {
    remainingTasks() {
      return this.tasks.filter(task => !task.completed).length;
    },
    allCompleted: {
      get() {
        return this.tasks.length > 0 && this.tasks.every(task => task.completed);
      },
      set(value) {
        this.tasks.forEach(task => {
          task.completed = value;
        });
        this.saveTasks();
      }
    }
  },
  methods: {
    addTask() {
      if (this.newTask.trim() !== '') {
        this.tasks.push({
          id: this.tasks.length + 1,
          text: this.newTask,
          completed: false
        });
        this.newTask = '';
        this.saveTasks();
      }
    },
    removeTask(task) {
      this.tasks = this.tasks.filter(t => t.id !== task.id);
      this.saveTasks();
    },
    toggleTask(task) {
      task.completed = !task.completed;
      this.saveTasks();
    },
    toggleAllTasks() {
      this.allCompleted = !this.allCompleted;
    },
    saveTasks() {
      localStorage.setItem('tasks', JSON.stringify(this.tasks));
    }
  },
  created() {
    const savedTasks = localStorage.getItem('tasks');
    if (savedTasks) {
      this.tasks = JSON.parse(savedTasks);
    }
  }
});