一：背景介绍

本篇博客是对项目开发中出现的学情页面逻辑问题进行的总结和改进。目的是将经历转变为自己的经验。通过博客的方式分享给大家，大家一起共同进步和提高。

前端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.再项目开发过程中，使用一项技术必须要明确他的优势利弊，使用场景再进行运用。