21_webStorage

本文介绍了如何在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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值