孝昌县建设局网站,数据网站建设哪家好,富德生命人寿保险公司官方网站保单服务,物联网云平台学情页面逻辑问题一#xff1a;背景介绍二#xff1a;学情页面逻辑问题分析逻辑问题缓存滥用的问题三#xff1a;LocalStorage基础知识数据结构特性应用场景localStorage常用方法四#xff1a;总结升华一#xff1a;背景介绍
本篇博客是对项目开发中出现的学情页面逻辑问…
学情页面逻辑问题一背景介绍二学情页面逻辑问题分析逻辑问题缓存滥用的问题三LocalStorage基础知识数据结构特性应用场景localStorage常用方法四总结升华一背景介绍
本篇博客是对项目开发中出现的学情页面逻辑问题进行的总结和改进。目的是将经历转变为自己的经验。通过博客的方式分享给大家大家一起共同进步和提高。
前端Vue2项目代码
代码的主要逻辑 1.查询某个课程班级下该学生的评论、获赞、回复次数 2.如果返回的数据中评论次数、获赞次数、和回复次数都为0则从缓存中获取相应数据。 3.如果评论次数为空则将获赞次数、评论次数、回复次数置为0 4.如果该学生的评论次数、获赞次数、回复次数都不为0将学生的评论获赞、回复次数都存入缓存中。
二学情页面逻辑问题分析
逻辑问题
1.学生的评论数为0的话该学生的获赞数一定为0但是回复数不一定为0。 这是存在严重的逻辑问题。
缓存滥用的问题
1.这里使用localStorage缓存来保存了接口返回的数据。 但是localStorage缓存适合长期保存在本地的数据缓存常用于存储一些不经常改变的数据。对目前了解到的直接通过调用后端接口进行查询数据。没有必要存储在缓存中。
三LocalStorage基础知识
数据结构
localstorage为标准的键值对Key-Value,简称KV数据类型简单但也易扩展只要以某种编码方式把想要存储进localstorage的对象给转化成字符串就能轻松支持。另外对于键值对数据类型来说键是唯一的这个特性也是相当重要的重复以同一个键来赋值的话会覆盖上次的值。
特性
1.除非被清楚否则永久保存 2.存放数据大小一般为5MB 3.与服务器通信仅在客户端浏览器中保存不参与和服务器的通信 4.易用性原生接口可以接受也可以再次封装对对象和数组有更好的支持。如用一个域名下两个命名空间 5. 由于浏览器的安全策略localStorage无法跨域 6. localstorage原生不支持设置过期时间想要设置需要自己来封装一层逻辑来实现
应用场景
localStoragese适合长期保存在本地的数据判断用户是否登陆用于长期登陆的数据。用在多窗口页面共享数据同一浏览器可以共享数据。 localStorage常用方法
localStorage.setItem(key,value) //存储数据
localStorage.getItem(key) //获取数据
localStorage.removeItem(key) //删除数据
localStorage.clear() //删除所有数据可以在浏览器的console中进行使用localhost存取数据。 在Application中查看localStorage数据
四总结
1.在项目开发过程中使用一项技术必须要明确他的优势利弊有没有更好的实现方案前期灰度认知后期和黑白决策。 2.需要具备二选二和二选三的思维。拒绝一选一二选一的思维方式。 3. 为保证编写的代码的逻辑能够自洽除了写好符合逻辑的代码之外也可以从测试的角度来找出规避掉逻辑有误的问题。
升华
1.只要思想不滑坡办法总比困难多。 2.灰度认知黑白决策寻找最优解。
