vue TodoList 使用本地储存进行修改

最新推荐文章于 2023-09-27 15:18:59 发布
原创 最新推荐文章于 2023-09-27 15:18:59 发布 · 380 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文探讨了在Vue应用中遇到的TodoList数据丢失问题，提出通过监听todos变化并存储到localStorage来解决。然而，当localStorage初始读取为空时，会导致应用程序错误。解决方案是使用逻辑或操作确保在数据为空时避免报错。同时，文章讨论了如何优雅地处理数据读取和存储，以及在组件间传递数据时避免此类问题。

之前做的TodoList当页面刷新会导致数据丢失

那什么时候进行数据的存储？如果对每个可以修改数据的控件进行编写逻辑显然,太麻烦

所以只要当todos改变了就重新存储一份localS0torage因为相同的key会被覆盖

读取数据直接写在data属性后即可

修改一般写在监视中

深度监视问题由于会todos属性中为一个对象集所以需要深度监视

 

但是会发现不完善,如果一开始没数据

localStorage读出来的就是null然后JSON.parse后还是null,所以此时todos就为null了

然后由于props把todos传给了footer而footer中用到了length 而null没有length就报错了

 

 

 解决方法由于当为null时表示的为false,所以用一个或就能解决

 

React 入门：实战案例 TodoList 修改 Todo Item的状态
将PHP Web开发进行到底
12-10 984
本文实现点击 Item 组件的复选框 checkbox 时，切换复选框的选中状态，同时更新 TodoList 在组件状态 State 中的数据状态。
详细vue实现本地存储添加删除修改功能综合案例
lwf0829的博客
11-23 2173
实现功能： 输入的内容添加到正在进行列表中， 双击修改功能， 点击esc键，取消，还是之前的内容， 点击回车，修改成功， 修改框失焦时修改成功， 选中按钮时进入已完成列表，未选中时在正在进行中列表， 点击删除进行删除当行， 本地存储下次打开上次添加的还在 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <st
Vue28-TodoList_本地存储
A1066223647的博客
05-31 260
Vue28-TodoList_本地存储 文章目录Vue28-TodoList_本地存储 在APP.vue中开启深度监视，初始化数据均从localStorge中获取 <template> <div id="root"> <div class="todo-container"> <div class="todo-wrap"> <MyHeader :addTodo="addTodo"/> <MyList :todos="
ToDoList 增删改查
xiaoenwu的博客
12-23 335
ToDoList 主要功能 增加数据 删除数据 修改数据 查询数据渲染页面 1 . HTML页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" ...
关于ToDolist 的增删改查 用jQuery来实现
this_name_true的博客
05-29 1721
代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;script type="text/javascript" src="js/jquery-1.11.0.js" &gt;&lt;/script&gt; &lt;titl
七：Todolist案例，本地存储，Todolist案例本地存储版
qq_45994446的博客
09-27 203
(1)拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。(2)实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：一个组件在用：放在组件自身即可。一些组件在用：放在他们共同的父组件上（状态提升），使用props其他组件都可以用。(3)实现交互：从绑定事件开始。
Vue实现todolist效果（增删改查和本地存储状态）
wzsrlndm的博客
09-28 1158
效果图 实现每一项的独特命名来实现删除添加选取的精准操作需要在终端安装nanoid 指令为npm i nanoid并在header页中配置 可以根据功能来拆分组件共可以拆分组件分别为MyHeader MyItem MyFooter添加My的作用主要是用来防止标签与html5中新增标签起冲突，而MyItem中包含MyList组件 组件创建完成后需要在App.vue中注册 App的所有代码 <template> <div id="app"> ...
利用vue写todolist单页应用
08-31
在本教程中，我们将创建一个简单的todolist应用，使用Vue.js进行编写。Vue.js的引入通常是通过CDN或者本地文件系统，本例中直接在HTML中引入了vue.js和bootstrap的CSS库，以便提供基本的样式支持。由于没有使用vue-...
vue实现todolist基本功能以及数据存储功能实例详解
10-17
在这个示例中，我们将详细讨论如何使用Vue实现一个基本的Todo List应用，同时涵盖数据存储功能。这个应用允许用户添加任务，标记任务为已完成，以及移除任务。我们将分析提供的代码片段，并解释其背后的Vue原理和...
Vue TodoList案例：功能完整实现指南
通过分析以上信息，我们能够得出Vue TodoList完整案例的知识点包括但不限于Vue.js的数据绑定、组件化开发、事件处理、条件渲染、状态管理和本地数据存储等技术。这些知识点不仅涵盖了Vue.js的核心功能，还包括了如何...
vue优化，本地存储的方法
qq_40944918的博客
10-24 768
vue配合vuex和本地存储可以减少HTTP请求，进行优化 本地储存：sessionStorage、localStorage和cookie之间的异同 共同点：都是保存在浏览器端，且同源的。 区别：cookie数据始终在同源的http请求中携带(即使不需要)，即cookie在浏览器和服务器间 ​ 来回传递 ​ cookie数据不能超过4KB,同时因为每次http请求都会携带cooki...
Vue学习：todolist 编辑
weixin_47295886的博客
03-06 297
存在问题：当你点击 但是没有进行焦点 之间失去焦点就会存在问题。当失去焦点变成正常文字——真正指向回调。使用追加属性，要对应的get set。item里面设置：对于是否显示编辑。还要一个编辑全部删除了也有问题。在挂载钩子注册和销毁中解绑。更新去APP.vue中。接收输入框传入的参数。
vue操作本地存储
weixin_30575309的博客
01-02 927
const ls = window.localStorage const ss = window.sessionStorage export const LStorage= { getItem(key) { try { return JSON.parse(ls.getItem(key)) } catch (err) { return null ...
Vue 浏览器本地存储
Errol's Blog
04-02 1956
Vue 浏览器本地存储
使用Vue制作todoList实现增删改
Henry的博客
11-23 1208
使用Vue制作todoList
vue通过本地存储来实现todolist
zhao_li_ming的博客
10-05 418
1.效果图 2.分析步骤 1.首先写vue先引入：<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> 2.接着写静态布局 3.挂载dom 4.添加指令 5.保存需要的数据 6.添加数据 7.删除数据 8.改变每一条数据的状态完成和未...
vue实现todolist基本功能以及数据存储功能
qq_38996246的博客
08-13 1725
实现todolist功能，具体实现如下： 可以实现对list添加、移除以及状态转变，其中添加功能既可以通过鼠标点击按钮实现，也可以通过回车键按下实现，通过使用v-model对checked的值进行双向绑定来完成状态的改变。在本次实际操作中仍存在一个小问题就是methods中函数调用，在完成数据存储前可以通过this.$options.methods.addFun();进行调用。 &lt;d...
todolist增，删，改，查的效果的实现
qq_60891094的博客
06-14 507
todolist增，删，改，查的效果的实现
TodoList实现增删改查
Shmily的博客
12-24 1387
本篇文章主要介绍了用TodoList实现一个简单的TodoList的增删改示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 引入React模块 //引入React模块 import React from 'react' 添加数据 //点击添加新数据 clIck(){ console.log(this.refs.myInput.v...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值