(尚030)Vue_案例_存储数据(localStorage本地存储技术)

当刷新页面时,会变为原来的状态

1.问题:当我刷新是不希望改变原来状态
需要缓存我当前的数据
2.究竟是缓存在内存里还是在文件里???
缓存在文件里,因为浏览器关闭了,内存就没了;而我们需要重新打开浏览器状态还在
可以用localStorage这种本地技术(本质是缓存在文件里)
3.存储带来的问题
什么时候存?什么时候读?存啥东西进去?
界面显示是根据todos显示的,所以需要将todos存起来;
我随便做任何操作后,都是我最后的状态,也就是只要我的界面发生改变就需要存(todos改变就要存)
一上来打开页面时就需要读取
===================================================================
现在我的数据是写死的,肯定不对

改为:

什么时候保存呢?
一旦上面的todos发生变化,我就需要保存,需要用到"深度监视技术"
监视todos的改变,为啥要"深度"?只要内部发生任何变化,我立刻要知道
监视需要watch


==================================================================================================================================
界面截图:

有个todos_key :存的是数组式字符串,并且刷新网页和关闭浏览器后数据原状态不会变
===================================================================
(尚030)Vue_案例_存储数据(localStorage本地存储技术)的更多相关文章
- (尚034)Vue_案例_数据存储优化(代码优化!!!)
最好能将上述代码抽取成一个模块(读json数据+写json数据) 1.在src下新建文件夹util(util文件夹用于放入工具的模块) 2.*使用localStorage存储数据的工具模块* 一个模块 ...
- (尚032)Vue_案例_消息订阅与发布(组件订阅与发布(PubSubJS库))
组件订阅与发布(PubSubJS库) npm info pubsub-js 安装库 npm install --save pubsub -js ============================ ...
- (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
自定义事件: 我们知道,父组件使用prop传递数据的子组件,但子组件怎么跟父组件通信呢? 这个时候Vue的自定义事件系统就派得上用场了. 自定义事件知道两件事: (1).绑定 (2).触发 注意:$o ...
- (尚027)Vue_案例_交互添加
TodoHeader.vue组件 写交互: 第一步:跟目标元素绑定监听 (1).按回车键确认@keyup.enter="add" (2). 注意:数据在哪个组件,更新数据的行为就应 ...
- (尚026)Vue_案例_动态初始化显示(尚025)
(1).当前页面需要变化什么样的数据? 答:列表;应该有个todos:[]数组;数组中包含每个元素均为一个对象;有数据titles:'xxx';(勾不勾选)complete:'布尔类型' (2).数组 ...
- (尚024)Vue_案例_交互删除
注意:本总结中最终会删除不成功 ,原因是Item.vue中方法methods单词拼写错误!!! 首先明白,删除在Item.vue中交互 1.写交互,首先写监听@click="deleteIt ...
- (尚023)Vue_案例_交互添加
最终达到效果: 1.做交互,首先需要确定操作哪个组件? 提交------操作组件Add.vue 2.从哪开始做起呢? 从绑定事件监听开始做起,确定你跟谁绑定事件监听,在回调函数中做什么, ====== ...
- (尚029)Vue_案例_交互footer组件功能
需要实现界面截图: 难点分析:sAllCheck必须定义为计算属性 1.想到问题: 一旦写一个组件,需要接收哪些属性?? 因为只有属性确定了,标签才好写 todos属性可以确定三个方面的显示 2.做交 ...
- (尚028)Vue_案例_交互删除
删除一条;1.鼠标移入移除这一条时颜色有变化 2.删除当前的todo ================================================================= ...
随机推荐
- 如何解决Requests的SSLError(转)
add by zhj: 我使用方法2“更新系统的certificate”解决了问题 原文:https://www.jianshu.com/p/8deb13738d2c 这两天在Linux上爬Googl ...
- python装饰器的使用场景(转)
原文:https://www.cnblogs.com/wupeiqi/articles/4980620.html 1.必备 1 2 3 4 5 6 7 8 9 10 11 12 13 14 #### ...
- CLR学习之初识CLR
一.什么是CLR? CLR即公共语言运行时(Common Language Runtime,简称CRL),就是微软为.net产品构建的运行环境,与java的JVM类似,通俗的讲就是.net虚拟机.CL ...
- C#事件和委托(C#学习笔记03)
委托 1. C# 中的委托类似于 C 或 C++ 中指向函数的指针.委托表示引用某个方法的引用类型变量,运行时可以更改引用对象. 2. 特别地,委托可以用于处理事件或回调函数.并且,所有的委托类都是从 ...
- Django的安全攻击
目录 Django的安全攻击 XSS XSS(跨站脚本攻击) 危害 原理 防护 csrf(Cross Site Request Forgery) csrf(跨站域请求伪造) 过程 Django 提供的 ...
- java.net.URLEncoder对中文的编码和解码
// java.net.URLEncoder对中文的编码和解码String str = URLEncoder.encode("测试字符串", "utf-8"); ...
- DOS常见命名整理
Dos命令 1.打开终端的方式 (1).window+R / 点击开始栏,输入cmd,然后回车 (2).在某个文件夹下打开终端 按住shift+右击,有个在此处打开命令窗口 2.修改终端背景和文字颜色 ...
- CentsOS原生RabbitMQ安装过程
版本依赖问题 RabbitMQ安装时与Erlang的版本一定要保持以下的对应关系,否则会引发无法启动的问题 安装Erlang 下载Erlang依赖 1 wget http://erlang.org/d ...
- 英语gzibeads天珠gzibeads单词
天珠英语是gZiBeads,藏语叫(si , 斯)汉语译为“斯”或“瑟”,又称“天降石”.在<藏汉大辞典>里天珠的解释为:“亚玛瑙,猫睛石,一种宝石,俗称九眼珠.入药能治脑溢血”.最早的天 ...
- ES10(2019)有哪些更新和新特性?
ES10新特性(2019) 行分隔符(U + 2028)和段分隔符(U + 2029)符号现在允许在字符串文字中,与JSON匹配 更加友好的 JSON.stringify 新增了Array的flat( ...