目录
- 一：背景介绍
- 二：学情页面逻辑问题分析
- 1、逻辑问题
- 2、缓存滥用的问题
- 三：LocalStorage缓存
- 1、localStorage是什么？
- 2、如何使用localStorage缓存
- 3、特性
- 四：学情页面逻辑分析过程
- 五：总结
- 六：升华
一：背景介绍
使用的前端技术是Vue2，前端逻辑：取到之后只放到了localStorage了，根本没有给页面赋值。
其代码的逻辑：
- 通过后端某个接口查询某个课程班级下某个用户的回复、跟评、获赞，查询返回的结果为0的话，就要去localStorage中取
- 若讨论内容为空的话，点赞回复次数为0
- 若回复、跟评、获赞返回的结果有值的话，就把值存入localStorage中
二：学情页面逻辑问题分析
1、逻辑问题
学生的评论数为0的话，该学生的获赞数一定为0，但是回复数不一定为0
2、缓存滥用的问题
这里使用的localStorage缓存来保存了接口返回的数据。但是localStorage缓存适合长期保存在本地的数据，缓存常用于存储一些不经常改变的数据。对目前了解到的直接通过调用后端接口进行查询数据。没有必要存储在缓存中。
三：LocalStorage缓存该案例涉及到的知识点是localStorage，那我们就先来了解一下localStorage是什么，以及如何使用localStorage缓存？
1、localStorage是什么？
主要是用来作为本地存储来使用的，localSotrage保存的数据，一般情况下是永久保存的，也就是说只要采用localStorage保存信息，数据便一直存储在用户的客户端中。即使关闭web浏览器重新启动，数据依然在。使用 Web Storage 存储键值对比存储 Cookie 方式更直观，而且容量更大，它包含两种：localStorage 和 sessionStorage
- sessionStorage（临时存储） ：为每一个数据源维持一个存储区域，在浏览器打开期间存在，包括页面重新加载
- localStorage（长期存储） ：与 sessionStorage 一样，但是浏览器关闭后，数据依然会一直存在
2、如何使用localStorage缓存
//保存语法
localStorage.setItem("key","value");
//读取数据
let data = localStorage.getItem("key");
//删除数据语法
localStorage.removeItem("key")我们可以在浏览器的控制台中（按F12），可在Console页面中使用localStorage进行一些数据存储、获取。
3、特性
- 除非被清除。否则永久保存
- 存放数据大小一般为5MB
- 与服务器通信，仅在客户端中保存，不参与和服务器的通信
- 易用性，原生接口可以接受，也可以再次封装对对象和数组有更好的支持（如用一个域名下，两个命名空间）
- 由于浏览器的安全策略，localStorage无法跨域
- localStorage原生不支持设置过期时间，想要设置需要自己来封装一层逻辑来实现
- 讨论内容为空的话，点赞回复次数就一定是0，这不符合常理。讨论内容和点赞回复有什么关系？？还是说个人不参与讨论内容就不能给他人点赞了？
- 查询返回都是0的话，就不需要去localStorage缓存里去取了，如无必要勿增实体。
在使用一门技术或者知识点的时候，要明确其利弊，以及如何使用。如果直接使用，没有查询一些相关资料，可能会给我们带来各种想不到的问题。在解决的时候也没有思路。
六：升华- 遇见一个知识点，就要知其原理
- 灰度认知，黑白决策，寻找最优解
