目录
一：背景介绍
此案例为项目上的一个线上BUG，问题比较简单，但是比较具有学习意义，今天写到这，警示自己。
1.1 代码展示
前端使用的Vue2，对应的项目代码如下所示：
1.2 逻辑分析
这部分代码对应的逻辑是
1.通过后端接口查询了。某个课下的某个班的某个用户的评论，获赞，回复次数
2.如果这些次数都为0的话，去缓存中获取次数。
3.如果评论的内容是空的话，将内容置为0，将点赞数置为0，将回复数置为0
4.如果这次次数都不为0的话，将用户的评论，获赞，回复次数存入缓存
二：LocalStorage基础知识
首先，我们要去了解，什么是LocalStorage，怎么使用LocalStorage缓存
2.1 LocalStorage是什么？
LocalStorage是一种浏览器提供的API，用于在Web浏览器中存储数据。它允许Web开发人员在浏览器中存储和检索键值对，以便在用户关闭浏览器后仍然可以访问数据。
LocalStorage中存储的数据是永久性的，直到被Web应用程序删除或浏览器缓存被清除
LocalStorage通常用于存储临时状态或应用程序的配置信息，例如用户的首选项或上次使用的数据。它可以通过JavaScript代码进行访问和操作。
2.2 LocalStorage怎么使用？
2.2.1 语法
使用JavaScript中的localStorage对象创建一个LocalStorage实例。
const localStorage = window.localStorage;
使用localStorage.setItem()方法将键值对存储到LocalStorage中
localStorage.setItem('key', 'value');
使用localStorage.getItem()方法检索LocalStorage中的值。
const value = localStorage.getItem('key');
使用localStorage.removeItem()方法删除LocalStorage中的值。
localStorage.removeItem('key');
我们要特别注意的是，存储在LocalStorage中的数据始终以字符串形式存在。如果您想存储对象或数组，需要使用JSON.stringify()将其序列化为字符串，并使用JSON.parse()将其反序列化为原始值。
2.2.2 浏览器控制台实操
2.2.2.1 实际操作
我们可以在浏览器的控制台中，直接的使用Console界面，尝试使用LocalStorage进行一些数据存储。获取。
2.2.2.2 对应数据
2.3 LocalStorage的优势与劣势
2.3.1 优势：
1. 存储空间大，扩展了cookie的4K限制，有5M的数据存储空间。它就像一个针对前端界面的数据库一般。 2. localStorage的数据爬虫爬取不到
2.3.2 劣势：
1.不同的浏览器版本存储量不统一，并且只支持IE8以上的IE版本。 2. localStorage的值类型限定为string类型 3. localStorage在浏览器的隐私模式下面是不可读取的
2.4 项目中选择使用LocalStorage注意事项
命名问题
现在我们的线上就有这个问题，在同源的域名下，同源的两个项目的localStorage是互通的。如果我们存储信息时太过于简单的话，可能会造成互相污染的现象。比如存储用户信息的时候，使用user来作为key存储，但是两个环境都使用了这个user就会产生污染问题。
时效性问题
上文已经讲过。localStorage除非手动进行清除，否则的话将会一直存在。如果有一些时效性的键值，比如说token，可能会过期，那么我们使用的时候就一定要设置过期时间。
隐蔽性问题
上文的图片里显示，我们所有存在localStorage里面的数据的，都是在Application里面可以直接看到的，上线之后，用户也是可以直接看到的，但是有的数据我们并不想让用户看到，这时候就要考虑隐蔽性的问题了。
三：学情页面逻辑问题分析
3.1 逻辑问题
讨论评论数为0的话，将点赞数赋成了0。
这个问题是和我们的业务相关的。参与讨论的数量和点赞的次数没有关系。这些数据应当由后端进行计算，前端直接进行渲染就可以，不应该写这些额外的没有意义的逻辑。
3.2 缓存滥用问题
使用缓存保存了查回来的数据。
缓存是用来存储一些不经常变化的数据的，如果数据的变化需要与vue的条件渲染结合那就不要使用缓存的方式。可以在页面中声明变量。如果多个页面使用数据，需要进行状态管理，我们应当选择vuex进行状态的管理。
四：总结&升华
我们在用一项技术的时候，一定要明确，它的作用是什么。不能够想用就用，必须要明确利弊，才能进行使用。如果不清楚利弊，可能会给我们带来各种想不到的问题（隐私模式localStorage无法读取，字符类型。过期等等），我们完全不知道这些问题更别谈如何规避了。所以一定要明确技术的应用场景才能使用。
写代码的时候要结合业务进行编写，如果有特殊的点，一定要写好注释，不要给后来人留下疑问。
知其然，更要知其所以然。
