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

1.问题:当我刷新是不希望改变原来状态

需要缓存我当前的数据

2.究竟是缓存在内存里还是在文件里???

缓存在文件里,因为浏览器关闭了,内存就没了;而我们需要重新打开浏览器状态还在

可以用localStorage这种本地技术(本质是缓存在文件里)

3.存储带来的问题

什么时候存?什么时候读?存啥东西进去?

界面显示是根据todos显示的,所以需要将todos存起来;

我随便做任何操作后,都是我最后的状态,也就是只要我的界面发生改变就需要存(todos改变就要存)

一上来打开页面时就需要读取

===================================================================

现在我的数据是写死的,肯定不对

改为:

什么时候保存呢?

一旦上面的todos发生变化,我就需要保存,需要用到"深度监视技术"

监视todos的改变,为啥要"深度"?只要内部发生任何变化,我立刻要知道

监视需要watch

==================================================================================================================================

界面截图:

有个todos_key :存的是数组式字符串,并且刷新网页和关闭浏览器后数据原状态不会变

===================================================================

(尚030)Vue_案例_存储数据(localStorage本地存储技术)的更多相关文章

  1. (尚034)Vue_案例_数据存储优化(代码优化!!!)

    最好能将上述代码抽取成一个模块(读json数据+写json数据) 1.在src下新建文件夹util(util文件夹用于放入工具的模块) 2.*使用localStorage存储数据的工具模块* 一个模块 ...

  2. (尚032)Vue_案例_消息订阅与发布(组件订阅与发布(PubSubJS库))

    组件订阅与发布(PubSubJS库) npm info pubsub-js 安装库 npm install --save pubsub -js ============================ ...

  3. (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)

    自定义事件: 我们知道,父组件使用prop传递数据的子组件,但子组件怎么跟父组件通信呢? 这个时候Vue的自定义事件系统就派得上用场了. 自定义事件知道两件事: (1).绑定 (2).触发 注意:$o ...

  4. (尚027)Vue_案例_交互添加

    TodoHeader.vue组件 写交互: 第一步:跟目标元素绑定监听 (1).按回车键确认@keyup.enter="add" (2). 注意:数据在哪个组件,更新数据的行为就应 ...

  5. (尚026)Vue_案例_动态初始化显示(尚025)

    (1).当前页面需要变化什么样的数据? 答:列表;应该有个todos:[]数组;数组中包含每个元素均为一个对象;有数据titles:'xxx';(勾不勾选)complete:'布尔类型' (2).数组 ...

  6. (尚024)Vue_案例_交互删除

    注意:本总结中最终会删除不成功 ,原因是Item.vue中方法methods单词拼写错误!!! 首先明白,删除在Item.vue中交互 1.写交互,首先写监听@click="deleteIt ...

  7. (尚023)Vue_案例_交互添加

    最终达到效果: 1.做交互,首先需要确定操作哪个组件? 提交------操作组件Add.vue 2.从哪开始做起呢? 从绑定事件监听开始做起,确定你跟谁绑定事件监听,在回调函数中做什么, ====== ...

  8. (尚029)Vue_案例_交互footer组件功能

    需要实现界面截图: 难点分析:sAllCheck必须定义为计算属性 1.想到问题: 一旦写一个组件,需要接收哪些属性?? 因为只有属性确定了,标签才好写 todos属性可以确定三个方面的显示 2.做交 ...

  9. (尚028)Vue_案例_交互删除

    删除一条;1.鼠标移入移除这一条时颜色有变化 2.删除当前的todo ================================================================= ...

随机推荐

  1. Golang检测Linux服务器端口占用

    代码实现 func CheckPort(port int) error { checkStatement := fmt.Sprintf(`netstat -anp | grep -q %d ; ech ...

  2. docker封装redis镜像

    一.概述 线上使用的redis版本为 3.2.13,但是dockerhub没有此版本的镜像.只有3.2.12但是默认的镜像启动时,是没有redis.conf的,如果需要加配置,需要自己定义配置文件. ...

  3. java中什么是抽象类（abstract）

    一.什么是抽象类 由abstract修饰的方法叫抽象方法:由abstract修饰的类叫抽象类.抽象的类无法进行实例化,因为他不是具体存在的类,或者说这样的类还不够完善,不能直接使用new关键字调用其构 ...

  4. webpack等bundler是如何工作的-简化版本

    webpack- why and how 首先不要被webpack做的复杂花哨的工作所迷惑,到底webpack是个啥?一句话,webpack是一个module bundler(模块打包器).多一句话, ...

  5. Spring Security实现OAuth2.0授权服务 - 进阶版

    <Spring Security实现OAuth2.0授权服务 - 基础版>介绍了如何使用Spring Security实现OAuth2.0授权和资源保护,但是使用的都是Spring Sec ...

  6. Jemeter学习环境部署。

    本文档中所有软件的下载地址 链接:https://pan.baidu.com/s/1RREUwlH7GtYMUWeiRjtWVg 提取码:zmjy 一.安装jdk 下载网盘中的jdk 双击jdk-8u ...

  7. MySQL--用户管理 pymysql 索引

    目录 用户管理 创建mysql账户 权限管理 涉及到的表 pymysql 索引 语法 结论 用户管理 主要是为了控制权限,让不同的人只能操作只属于只记得那部分数据 创建mysql账户 账户中涉及三个数 ...

  8. 微信小程序调用云函数出错 Error: errCode: -404011 cloud function execution error | errMsg: cloud.callFunction:fail cloud function service error code -501005, error message Environment not found;

    错误异常: Error: errCode: -404011 cloud function execution error | errMsg: cloud.callFunction:fail cloud ...

  9. Java语言的介绍

    1. 计算机语言 语言:沟通交流的方式 计算机语言:人与计算机之间的交流方式 java是一门计算机编程语言,也是意大利自行车品牌 软件工程师,java开发工程师 <--------------- ...

  10. MES被重新定义？做到这几点才算智能制造

    在工业4.0背景下,推动智能制造,构建智能工厂.智能生产.智能物流和智能服务体系,我们需要对MES系统重新进行定义,主要从以下几个方面进行说明: MES深度融入企业运营环节 智能工厂中的机器将全部由软 ...