(尚030)Vue_案例_存储数据(localStorage本地存储技术)
2023-09-11 14:14:08 时间
当刷新页面时,会变为原来的状态
1.问题:当我刷新是不希望改变原来状态
需要缓存我当前的数据
2.究竟是缓存在内存里还是在文件里???
缓存在文件里,因为浏览器关闭了,内存就没了;而我们需要重新打开浏览器状态还在
可以用localStorage这种本地技术(本质是缓存在文件里)
3.存储带来的问题
什么时候存?什么时候读?存啥东西进去?
界面显示是根据todos显示的,所以需要将todos存起来;
我随便做任何操作后,都是我最后的状态,也就是只要我的界面发生改变就需要存(todos改变就要存)
一上来打开页面时就需要读取
===================================================================
现在我的数据是写死的,肯定不对
改为:
什么时候保存呢?
一旦上面的todos发生变化,我就需要保存,需要用到"深度监视技术"
监视todos的改变,为啥要"深度"?只要内部发生任何变化,我立刻要知道
监视需要watch
==================================================================================================================================
界面截图:
有个todos_key :存的是数组式字符串,并且刷新网页和关闭浏览器后数据原状态不会变
===================================================================
相关文章
- (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
- (尚018-第二章2.1)Vue使用vue-cli创建模板项目
- (尚016)Vue指令(11个自带指令+自定义指令)
- 【Vue】你必须要知道的vue中v-on指令的修饰符
- 【Vue】利用Vue绑定Html元素事件(如:click)综合示例
- Vue2.0 搭建Vue脚手架(vue-cli)
- vue搭建环境并创建项目
- Vue - 实现信纸输入写作,类似写明信片时的一张背景图片 + 横格纸效果(信纸格子与文字自动对齐、支持自定义背景图、文字或横线大小与颜色,一切由您 DIY 自定义样式)纯CSS完成支持任何vue项目
- Vue侦听器
- [转]Vue CLI 3搭建vue+vuex 最全分析
- vue-devtools 获取到 vuex store 和 Vue 实例的?
- vue.js之过渡动画
- vue项目后台demo
- vue项目使用深拷贝
- 基于Java+vue实现(Web)酒店管理系统【100010132】
- 揭秘 Vue.js 九个性能优化技巧
- Vue完成TodoList案例
- vue实战入门后台篇十:springboot+mybatis实现网站后台-项目整合发布测试
- 浅谈vue中插件的使用方法Vue.use(xxx),原理及实现
- vue $http请求服务
- vue-grid-layout+component 实现动态布局
- vue-cli4 配置gzip文件处理、nginx配置解决vue单页面打包文件大首次加载慢的问题
- 浅析vue-loader的作用及其提供的功能
- vue笔记
- Vue 之 mockjs 结合 axios 在 vue 中的随机数据生成的简单使用
- Vue学习第27天——路由vue-router的详解及案例练习
- Vue学习第21天——插槽slot的理解及案例
- Vue学习第18天——Vue中的过度与动画效果的使用与案例
- iview Carousel 轮播图自适应宽高;iview 轮播图 图片重叠问题;iview tabs 高度互相影响问题;vue this问题;
- vue-router 利用url传递参数
- vue-router 的URL路径中#的意义