21_webStorage

xixihaha_coder

于 2022-03-06 14:24:14 发布

阅读量110

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/xixihaha_coder/article/details/123309934

版权

Vue 专栏收录该内容

33 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>