21_webStorage

最新推荐文章于 2025-04-04 23:52:58 发布

原创最新推荐文章于 2025-04-04 23:52:58 发布 · 129 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用localStorage实现todoList的本地存储，包括组件之间的数据传递和状态管理。通过展示`MyHeader`、`List`组件以及数据监听和更新策略，读者将理解如何利用Web Storage技术来持久化数据。

21_webStorage

在这里插入图片描述

todoList本地存储

<template>
  <div id="root">
    <div class="todo-container">
      <div class="todo-warp">
        <MyHeader :addTodo="addTodo" />
        <List :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo" />
        <MyFooter
          :todos="todos"
          :checkAllTodo="checkAllTodo"
          :clearAllTodo="clearAllTodo"
        />
      </div>
    </div>
  </div>
</template>

<script>
import MyHeader from "./components/MyHeader";
import MyFooter from "./components/MyFooter";
import List from "./components/List";
export default {
  name: "App",
  components: {
    MyHeader,
    MyFooter,
    List,
  },
  data() {
    return {
      todos: JSON.parse(localStorage.getItem('todos')) || []
    };
  },
  watch:{
    todos:{
      deep:true,
      handler(value){
        localStorage.setItem('todos',JSON.stringify(value))
      }
    }
  },
 
};
</script>