项目效果图:

var vm = new Vue({
el:'#app',
data:{
students:[],
},
watch:{
students:{
handler(){
localStorage.setItem('student',JSON.stringify(this.students))
},
deep:true,
}
},
created(){
this.students = JSON.parse(localStorage.getItem('student')) || []
}
})

需要注意两个地方:

需要用JSON.stringify()转换为字符串存储起来,再用JSON.parse()转换为对象
首次进入缓存中没数据的时候会报错,需要赋值为空数组 || []

vue深度监控数据改变,缓存数据到本地的更多相关文章

  1. spring + redis 实现数据的缓存

    1.实现目标 通过redis缓存数据.(目的不是加快查询的速度,而是减少数据库的负担) 2.所需jar包 注意:jdies和commons-pool两个jar的版本是有对应关系的,注意引入jar包是要 ...

  2. redis 几种数据类型往数据库存数据和取数据的帮助类

    package com.fndsoft.bcis.utils; import org.springframework.beans.factory.annotation.Autowired; impor ...

  3. Android,监控ContentProvider的数据改变

    有时候应用中需要监听ContentProvider的改变并提供响应,这时候就要利用ContentObserver类了 不管是ContentProvider中实现的,insert,delete,upda ...

  4. vue 数据改变但是视图没更新

    在使用过程中会出现数据改变但是视图没有更新的情况(类型数组或者对象),这里我们就需要用到 $set 如果是对象类型: this.$set(this.userInfo, 'name', 'gionlee ...

  5. vue 中 keep-alive 缓存数据、离开时位置

    路由中: 页面中: 需要缓存的组件中: 因为是keep-alive  所以在初始化页面的时候 会走一次生命周期 当二次进入的时候就已经是缓存状态了 不会在走生命周期 于是它就有了自己的周期函数分别是 ...

  6. legend2---开发日志6(后端和前端如何相互配合(比如php,js,元素状态和数据改变))

    legend2---开发日志6(后端和前端如何相互配合(比如php,js,元素状态和数据改变)) 一.总结 一句话总结:php给元素初始状态,js根据这个状态做初始化和后续变化,使用vue真的很方便( ...

  7. vue源码之响应式数据

    分析vue是如何实现数据响应的. 前记 现在回顾一下看数据响应的原因. 之前看了vuex和vue-i18n的源码, 他们都有自己内部的vm, 也就是vue实例. 使用的都是vue的响应式数据特性及$w ...

  8. thinkphp 缓存数据

    thinkphp 中内置了缓存操作 3.1版本的数据缓存方法是cache 基本用法: S(array('type'=>'xcache','expire'=>60)); 缓存初始化 缓存初始 ...

  9. vue 2 滚动条加载更多数据实现

    解析: 判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeigh ...

随机推荐

  1. 批量执行 sql 的 shell 脚本

    最近有用到需要批量导入N个表的sql,一个个导入会吐老血的,写了个shell脚本,便捷导入. 通常我们导入单个sql,可以用 $mysql -uroot -p world < xxxx.sql ...

  2. SQL反模式学习笔记19 使用*号,隐式的列

    目标:减少输入 反模式:捷径会让你迷失方向 使用通配符和未命名的列能够达到减少输入的目的,但是这个习惯会带来一些危害. 1.破坏代码重构:增加一列后,使用隐式的Insert插入语句报错: 2.查询中使 ...

  3. Android+openCV 的坑

    之前一直用IntelliJ IDEA 导入 opencv_android_sdk 的 java 包,在最后一步finish时,始终出错. 后来重新安装Android Studio 重复以上步骤,能顺利 ...

  4. Python学习(三十七)—— 模板语言之自定义filter和中间件

    一.模板语言之自定义filter 自定义filter文件存放位置 模板中自定义函数 - 在已注册的app中创建一个名字叫 templatetags 文件夹 - 任意创建一个py文件 - 创建名字交 r ...

  5. net core 部署到windows 服务

    NSSM是一个服务封装程序,它可以将普通exe程序封装成服务,使之像windows服务一样运行.同类型的工具还有微软自己的srvany,不过nssm更加简单易用,并且功能强大.它的特点如下: 支持普通 ...

  6. xss的一般防护措施(及CreateDefaultBuilder源码)

    从上个礼拜开始,公司的安全小组就开始排查公司项目的安全性,首屈一指的就是xss问题,为此我总结了下我的经验. 1.对后台程序的输出数据做html编码处理,前端做简单的替换处理 2.如果业务需要,后台可 ...

  7. Cnr

    Description 写一个求阶乘的函数,实现Cmn排列,就是指从给定n个数的元素中取出指定r个数的元素,进行排序,我们用A(n,r)表示,组合,则是指从给定n个数的元素中仅仅取出指定r个数的元素, ...

  8. VB中Winsock连续发送出现接收不到的异常问题解决方法

    VB里面用WINSOCK进行一对多连接的TCP连接时,经常需要群发消息给所有已连接的客户端.代码类似如下: Option Explicit Dim bytMsg() As Byte Private S ...

  9. 关于finally代码块是否一定被执行的问题

    一般来说,只要执行了try语句,finally就会执行 但是,有以下几种情况需要特殊考虑 具体例子看链接  点击这里 第一点 try代码块没有被执行,意思就是错误在try代码块之前就发生了. 第二点 ...

  10. Eclipse导出自己的项目(仅供自己保留方式war包)

    War: Jar包: