(尚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 ================================================================= ...
随机推荐
- Rsync学习之旅上
rsync 简介 什么是rsync rsync是一款开源的,快速的,多功能的,可实现全量及增量的本地或远程数据同步备份的优秀工具. 全量:将全部数据,进行传输覆盖 增量:只传输差异部分的数据 实现增量 ...
- pytest_全局变量的使用
这里重新阐述下PageObject设计模式: PageObject设计模式是selenium自动化最成熟,最受欢迎的一种模式,这里用pytest同样适用 这里直接提供代码: 全局变量 conftest ...
- 动态代理(二)—— CGLIB代理原理
前篇文章动态代理(一)--JDK中的动态代理中详细介绍了JDK动态代理的Demo实现,api介绍,原理详解.这篇文章继续讨论Java中的动态代理,并提及了Java中动态代理的几种实现方式.这里继续介绍 ...
- springboot初体验-不知道怎么创建spring-boot项目?
https://spring.io/projects/spring-boot/ 在以上地址找到 Quick start Bootstrap your application with Spring I ...
- 关于Svn服务总是链接异常
之前一直在使用,本机电脑也没有修改网络环境却一直无法链接svn. 每次剪切代码都提示: ping服务ip可以ping通,域名却总是不通. 百度结果各种clear缓存,还不行 结果使用 在本地C:\Wi ...
- winform+cefSharp实现窗体加载浏览器
1:新建winform项目 2:安装cefSharp 3:配置管理器更改为X86 4:添加引用 using CefSharp; using CefSharp.WinForms; 5:项目启动,打开网页 ...
- Eclipse中js文件修改后浏览器不能及时更新的解决办法
项目中js文件修改后浏览器不能及时更新的解决办法 转载:http://www.codeweblog.com/%E9%A1%B9%E7%9B%AE%E4%B8%ADjs%E6%96%87%E4%BB%B ...
- C# Mysql数据库备份、还原(MVC)
一.准备工作 1.电脑上要安装上mysql,并且已经配置好了环境变量. 二.公共代码 1.配置文件(该节点只是为备份.还原使用,数据库连接字符串有另外的节点) <connectionString ...
- Java之路---Day12(多态)
2019-10-26-22:40:09 目录: 1.多态的概念 2.多态的分类 3.实现多态的三个必要条件 4.多态的格式 5.多态成员变量的使用特点 6.多态成员方法的使用特点 7.多态的好处 8. ...
- JavaScript---正则使用,日期Date的使用,Math的使用,JS面向对象(工厂模式,元模型创建对象,Object添加方法)
JavaScript---正则使用,日期Date的使用,Math的使用,JS面向对象(工厂模式,元模型创建对象,Object添加方法) 一丶正则的用法 创建正则对象: 方式一: var reg=new ...