(尚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 ================================================================= ...
 
随机推荐
- asp.net core 日志记录到elk
			
关于ELK的安装大家可以参考ubuntu18 docker中部署ELK 和 caas/docker-elk , 首先需要在ELK中创建一个index patterns  首先我们创建一个aspnet ...
 - C#采集UVC摄像头画面并支持旋转和分辨率切换
			
在项目中,我们会需要控制uvc摄像头,采集其实时画面,或者对其进行旋转.目前市面上大多数USB摄像头都支持UVC协议.那么如何采集呢?当然是采用SharpCamera!因为SharpCamera支持对 ...
 - Windows 搭建 nginx rtmp服务器
			
1.环境开发环境:windows开发工具:ffmpeg.nginx.nginx-rmtp-module.vlc media player播放器 2.准备文件官方ffmpeg下载地址:http://ww ...
 - 2019 学而思java面试笔试题 (含面试题解析)
			
本人5年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.学而思等公司offer,岗位是Java后端开发,因为发展原因最终选择去了学而思,入职一年时间了,也成为了面试官 ...
 - dubbo循序渐进 - 什么是RPC
			
RPC的核心并不在于使用什么协议.RPC的目的是让你在本地调用远程的方法,而对你来说这个调用是透明的,你并不知道这个调用的方法是部署哪里.通过RPC能解耦服务,这才是使用RPC的真正目的.RPC的原理 ...
 - 2019-07-30 ThinkPHP文件上传
			
文件上传就是获取到待上传文件的临时路径,把它移动到服务器下的相应文件夹中. 文件上传,必须在表单中的form标签中写入:enctype="multipart/form-data" ...
 - 47、安装node-sass后运行报错
			
vue安装node-sass编译报错安装node-scss报错安装node-scss报错在搭建vue脚手架 或者是在vue项目中,想使用sass的功能, npm install node-sass - ...
 - SpringBoot,SSM和SSH
			
Springboot的概念: 是提供的全新框架,使用来简化Spring的初始搭建和开发过程,使用了特定的方式来进行配置,让开发人员不在需要定义样板化的配置.此框架不需要配置xml,依赖于想MAVEN这 ...
 - Django 连接 MySQL 数据库及常见报错解决
			
目录 Django 连接 MySQL数据库及常见报错解决 终端或者数据库管理工具连接 MySQL ,并新建项目所需数据库 安装访问 MySQL 的 Python 模块 Django 相关配置 可能会遇 ...
 - JavaScript 之 基本包装类型
			
基本包装类型 为了方便操作基本数据类型,JavaScript 还提供了三个特殊的引用类型:String/Number/Boolean. 下面先看一段代码: var s1 = "Hello ...