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

个人名片

🎓作者简介：java领域优质创作者
🌐个人主页：码农阿豪
📞工作室：新空间代码工作室（提供各种软件服务）
💌个人邮箱：[2435024119@qq.com]
📱个人微信：15279484656
🌐个人导航网站：www.forff.top
💡座右铭：总有人要赢。为什么不能是我呢？

• 专栏导航：

码农阿豪系列专栏导航
面试专栏：收集了java相关高频面试题，面试实战总结🍻🎉🖥️
Spring5系列专栏：整理了Spring5重要知识点与实战演练，有案例可直接使用🚀🔧💻
Redis专栏：Redis从零到一学习分享，经验总结，案例实战💐📝💡
全栈系列专栏：海纳百川有容乃大，可能你想要的东西里面都有🤸🌱🚀

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

引言

在前面的博客中，我们构建了一个功能齐全的TodoList应用。然而，这个应用的一个主要缺点是它的数据在页面刷新后会丢失。为了解决这个问题，我们可以利用浏览器的本地存储功能来保存用户的任务列表，从而实现数据的持久化。在本篇博客中，我们将首先介绍Vue.js中如何使用浏览器的本地存储，然后将这一功能集成到我们的TodoList应用中。

---

一、浏览器本地存储

1.1 什么是本地存储？

本地存储（LocalStorage）是浏览器提供的一种持久化存储机制，允许你将数据以键值对的形式保存在浏览器中，且数据不会随浏览器关闭而丢失。它的特点是：

• 持久化：数据存储在浏览器中，除非被手动删除，否则不会丢失。
• 容量：本地存储的容量通常在5MB左右，足够存储较小的数据集。
• 简单易用：通过简单的API即可实现数据的存储、读取和删除操作。

1.2 本地存储的基本操作

本地存储提供了localStorage对象，用于在客户端存储数据。常用的方法包括：

• setItem(key, value)：存储数据，以键值对的形式保存。
• getItem(key)：读取数据，通过键名获取对应的值。
• removeItem(key)：删除数据，通过键名删除对应的键值对。
• clear()：清空所有本地存储的数据。

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

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

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

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

在实际应用中，数据通常以字符串的形式存储在本地存储中，如果要存储复杂的数据结构（如对象或数组），需要使用JSON.stringify将其转换为字符串，在读取时使用JSON.parse将其转换回原来的数据结构。

---

二、TodoList应用中实现本地存储

2.1 保存任务列表到本地存储

为了使TodoList中的任务在页面刷新后仍然存在，我们可以在任务列表发生变化时将其保存到本地存储中。

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

我们将这个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();
  }
}

2.2 从本地存储加载任务列表

在应用启动时，我们希望能够从本地存储中读取之前保存的任务列表，并初始化应用的数据状态。我们可以在Vue实例的created生命周期钩子中实现这一功能。

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

通过这个方法，每次页面加载时，应用会从本地存储中读取任务列表并进行初始化。

---

三、完整的TodoList应用示例

<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);
    }
  }
});

四、总结

通过在TodoList应用中集成本地存储功能，我们使得应用的数据在页面刷新或关闭后仍能保持。这不仅提升了用户体验，还展示了如何使用浏览器提供的API来增强Vue.js应用的功能。

4.1 关键点回顾

• 本地存储的使用：通过localStorage对象的setItem、getItem等方法，能够轻松地将数据保存到本地，并在页面加载时恢复数据。
• 数据持久化：通过在Vue实例的生命周期钩子中加载和保存数据，实现数据的持久化，确保用户的操作不会因页面刷新而丢失。
• Vue.js的实用性：通过这个案例，我们进一步体会了Vue.js的灵活性和强大功能，特别是在处理用户交互和数据管理方面。

4.2 进一步的扩展

你可以继续扩展这个TodoList应用，比如：

• 同步到云端：将本地数据同步到云端，以便用户可以跨设备访问。
• 增加分类标签：为每个任务添加分类标签，并允许用户按标签筛选任务。
• 高级搜索功能：允许用户在任务列表中搜索特定任务。

---

通过这篇博客，我们学习了如何在Vue.js中使用浏览器的本地存储API，并将其集成到TodoList应用中，以实现数据持久化。在接下来的博客中，我们将继续探讨Vue.js的更多高级功能和实践。如果你有任何疑问或建议，欢迎在评论区留言。感谢你的阅读，期待在下一篇博客中继续与你分享更多的Vue.js开发技巧与经验！