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

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. Fiddler手机抓包不完全记录

    准备工作: 1.必须确保安装fiddler的电脑和手机在同一个wifi环境下 备注:如果电脑是笔记本当然最好;如果电脑用的是台式机,可以安装一个随身wifi,来确保台式机和手机在同一wifi环境下   ...

  2. (一)使用phantomjs将动态HTML页面生成图片

    因为工作需要,笔者需要将一个动态的HTML5页面生成图片,并将图片发送给用户. 其中难点在于怎样将动态H5生成图片 笔者翻阅资料后,决定使用phantomjs这个插件,关于这个插件的安装,非常简单,笔 ...

  3. thymeleaf是用于编写html模版的编程语言(工具语言)

    一.编程语言 用于编写html模版的编程语言. thymeleaf一种命令式和声名式混合的寄生语言. html与thymeleaf的结合是dsl与命令式语言的结合. html与thymeleaf的结合 ...

  4. LINUX 下.NET Core 微服务部署实战

    前言 最近一直在开发部署.也没有总结一下.从5月份开始出差到现在基本没有发过博客,哎,惭愧. 一直在弄微服务,后续会慢慢更新下面这个系列.欢迎各位大佬交流指点. 分布式理论专题 1..net core ...

  5. jQuery中cookie的简单操作

    jQuery 可以通过 jquery.cookie.js 插件来操作 Cookie. 用NuGet安装:PM>Install-Package js-cookie -Version 官网:http ...

  6. APS.NET MVC + EF (02)---深入理解ADO.NET Entity Framework

    2.7 深入理解Entity Framework 性能问题几乎是一切ORM框架的通病,对于EF来说,引起性能低的原因主要在以下几个方面. 复杂的对象管理机制为了在.NET中更好地管理模型对象,EF提供 ...

  7. docker搭建elasticsearch、kibana,并集成至spring boot

    步骤如下: 一.基于docker搭建elasticsearch环境 1.拉取镜像 docker pull elasticsearch5.6.8 2.制作elasticsearch的配置文件 maste ...

  8. Matlab桥接模式

    桥接模式(Bridge)是一种结构型设计模式.它是用组合关系代替继承关系来实现,可以处理多维度变化的场景(https://blog.csdn.net/qq_31156277/article/detai ...

  9. Spring 开发之组件赋值

    1. @Value & @PropertySource 1.1 使用方式 @PropertySource:读取外部配置文件中的 k/v 保存到运行的环境变量中;加载完外部的配置文件以后使用 $ ...

  10. MySQL导入数据报错Got a packet bigger than‘max_allowed_packet’bytes错误的解决方法

    由于max_allowed_packet的值设置过小的原因,只需要将max_allowed_packet值设置大一点就OK了.通过终端进入mysql控制台,输入如下命令可以查看max_allowed_ ...