目录
- 一:背景介绍
- 二:LocalStorage基础知识
- LocalStorage是什么?
- LocalStorage怎么使用
- LocalStorage的优势与劣势
- 优势:
- 劣势:
- 如何在项目中选择使用LocalStorage呢?
- 三:学情页面逻辑问题分析
- 逻辑问题
- 缓存滥用问题
- 四:总结
- 五:升华
一:背景介绍
前端Vue2,项目代码
这部分代码对应的逻辑是
1.通过后端接口查询了。某个课下的某个班的某个用户的评论,获赞,回复次数
2.如果这些次数都为0的话,去缓存中获取次数。
3.如果评论的内容是空的话,将内容置为0,将点赞数置为0,将回复数置为0
4.如果这次次数都不为0的话,将用户的评论,获赞,回复次数存入缓存
二:LocalStorage基础知识
首先,我们要去了解,什么是LocalStorage,怎么使用LocalStorage缓存。
LocalStorage是什么?
LocalStorage是Web Storage的存储方式之一。使用K,V的方式进行存储。WebStorage包含两种,一种是localStorage(长期存储),另一种是sessionStorage(临时存储)
localStorage(长期存储):浏览器关闭后数据仍然会存在
sessionStorage(临时存储):浏览器打开期间存在。页面重新加载也不会消失。
LocalStorage怎么使用
我们可以在浏览器的控制台中,直接的使用Console界面,尝试使用LocalStorage进行一些数据存储。获取。
对应数据
LocalStorage的优势与劣势
优势:
劣势:
如何在项目中选择使用LocalStorage呢?
- 命名问题
现在我们的线上就有这个问题,在同源的域名下,同源的两个项目的localStorage是互通的。如果我们存储信息时太过于简单的话,可能会造成互相污染的现象。比如存储用户信息的时候,使用user来作为key存储,但是两个环境都使用了这个user就会产生污染问题。 - 时效性问题
上文已经讲过。localStorage除非手动进行清除,否则的话将会一直存在。如果有一些时效性的键值,比如说token,可能会过期,那么我们使用的时候就一定要设置过期时间。 - 隐蔽性问题
上文的图片里显示,我们所有存在localStorage里面的数据的,都是在Application里面可以直接看到的,上线之后,用户也是可以直接看到的,但是有的数据我们并不想让用户看到,这时候就要考虑隐蔽性的问题了。
三:学情页面逻辑问题分析
逻辑问题
- 讨论评论数为0的话,将点赞数赋成了0。
这个问题是和我们的业务相关的。参与讨论的数量和点赞的次数没有关系。这些数据应当由后端进行计算,前端直接进行渲染就可以,不应该写这些额外的没有意义的逻辑。
缓存滥用问题
- 使用缓存保存了查回来的数据。
缓存是用来存储一些不经常变化的数据的,如果数据的变化需要与vue的条件渲染结合那就不要使用缓存的方式。可以在页面中声明变量。如果多个页面使用数据,需要进行状态管理,我们应当选择vuex进行状态的管理。
四:总结
我们在用一项技术的时候,一定要明确,它的作用是什么。不能够想用就用,必须要明确利弊,才能进行使用。如果不清楚利弊,可能会给我们带来各种想不到的问题(隐私模式localStorage无法读取,字符类型。过期等等),我们完全不知道这些问题更别谈如何规避了。所以一定要明确技术的应用场景才能使用。
写代码的时候要结合业务进行编写,如果有特殊的点,一定要写好注释,不要给后来人留下疑问。
五:升华
知其然,更要知其所以然。