项目实战典型案例13——学情页面逻辑问题

一：背景介绍

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

前端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.灰度认知，黑白决策，寻找最优解。