28个案例问题分析---013---学情页面逻辑问题--LocalStorage

快来打我* 2023-10-09 15:44 27阅读 0赞

#### 目录 ####

*  一：背景介绍
 *   *  1.1 代码展示
     *  1.2 逻辑分析
 *  二：LocalStorage基础知识
 *   *  2.1 LocalStorage是什么？
     *  2.2 LocalStorage怎么使用？
     *   *  2.2.1 语法
         *  2.2.2 浏览器控制台实操
         *   *  2.2.2.1 实际操作
             *  2.2.2.2 对应数据
     *  2.3 LocalStorage的优势与劣势
     *   *  2.3.1 优势：
         *  2.3.2 劣势：
     *  2.4 项目中选择使用LocalStorage注意事项
 *  三：学情页面逻辑问题分析
 *   *  3.1 逻辑问题
     *  3.2 缓存滥用问题
 *  四：总结&升华

## 一：背景介绍 ##

此案例为项目上的一个线上BUG，问题比较简单，但是比较具有学习意义，今天写到这，警示自己。

### 1.1 代码展示 ###

前端使用的Vue2，对应的项目代码如下所示：  
![在这里插入图片描述][8af72d6dc6264a72b88e9cd84d9e6e92.png]

### 1.2 逻辑分析 ###

这部分代码对应的逻辑是  
1.通过后端接口查询了。某个课下的某个班的某个用户的评论，获赞，回复次数  
2.如果这些次数都为0的话，去缓存中获取次数。  
3.如果评论的内容是空的话，将内容置为0，将点赞数置为0，将回复数置为0  
4.如果这次次数都不为0的话，将用户的评论，获赞，回复次数存入缓存

## 二：LocalStorage基础知识 ##

首先，我们要去了解，什么是LocalStorage，怎么使用LocalStorage缓存

### 2.1 LocalStorage是什么？ ###

1.  LocalStorage是一种浏览器提供的API，用于在Web浏览器中存储数据。它允许Web开发人员在浏览器中存储和检索键值对，以便在用户关闭浏览器后仍然可以访问数据。
2.  LocalStorage中存储的数据是永久性的，直到被Web应用程序删除或浏览器缓存被清除
3.  LocalStorage通常用于存储临时状态或应用程序的配置信息，例如用户的首选项或上次使用的数据。它可以通过JavaScript代码进行访问和操作。

### 2.2 LocalStorage怎么使用？ ###

#### 2.2.1 语法 ####

1.  使用JavaScript中的localStorage对象创建一个LocalStorage实例。

const localStorage = window.localStorage;

1.  使用localStorage.setItem()方法将键值对存储到LocalStorage中。

localStorage.setItem('key', 'value');

1.  使用localStorage.getItem()方法检索LocalStorage中的值。

const value = localStorage.getItem('key');

1.  使用localStorage.removeItem()方法删除LocalStorage中的值。

localStorage.removeItem('key');

我们要特别注意的是，存储在LocalStorage中的数据始终以字符串形式存在。如果您想存储对象或数组，需要使用**JSON.stringify()将其序列化为字符串，并使用JSON.parse()将其反序列化为原始值**。

#### 2.2.2 浏览器控制台实操 ####

##### 2.2.2.1 实际操作 #####

我们可以在浏览器的控制台中，直接的使用Console界面，尝试使用LocalStorage进行一些数据存储。获取。  
![在这里插入图片描述][8e159ad4aa914056bc186ebcb7d560bc.png]

##### 2.2.2.2 对应数据 #####

![在这里插入图片描述][23f966340bb74bf08398ae4dbc8213ce.png]

### 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注意事项 ###

1.  命名问题  
    现在我们的线上就有这个问题，在同源的域名下，同源的两个项目的localStorage是互通的。如果我们存储信息时太过于简单的话，可能会造成互相污染的现象。比如存储用户信息的时候，使用user来作为key存储，但是两个环境都使用了这个user就会产生污染问题。
2.  时效性问题  
    上文已经讲过。localStorage除非手动进行清除，否则的话将会一直存在。如果有一些时效性的键值，比如说token，可能会过期，那么我们使用的时候就一定要设置过期时间。
3.  隐蔽性问题  
    上文的图片里显示，我们所有存在localStorage里面的数据的，都是在Application里面可以直接看到的，上线之后，用户也是可以直接看到的，但是有的数据我们并不想让用户看到，这时候就要考虑隐蔽性的问题了。

## 三：学情页面逻辑问题分析 ##

### 3.1 逻辑问题 ###

1.  讨论评论数为0的话，将点赞数赋成了0。  
    这个问题是和我们的业务相关的。参与讨论的数量和点赞的次数没有关系。这些数据应当由后端进行计算，前端直接进行渲染就可以，不应该写这些额外的没有意义的逻辑。

### 3.2 缓存滥用问题 ###

1.  使用缓存保存了查回来的数据。  
    缓存是用来存储一些不经常变化的数据的，如果数据的变化需要与vue的条件渲染结合那就不要使用缓存的方式。可以在页面中声明变量。如果多个页面使用数据，需要进行状态管理，我们应当选择vuex进行状态的管理。

## 四：总结&升华 ##

我们在用一项技术的时候，一定要明确，它的作用是什么。不能够想用就用，必须要明确利弊，才能进行使用。如果不清楚利弊，可能会给我们带来各种想不到的问题（隐私模式localStorage无法读取，字符类型。过期等等），我们完全不知道这些问题更别谈如何规避了。所以一定要明确技术的应用场景才能使用。  
写代码的时候要结合业务进行编写，如果有特殊的点，一定要写好注释，不要给后来人留下疑问。  
知其然，更要知其所以然。

[8af72d6dc6264a72b88e9cd84d9e6e92.png]: https://img-blog.csdnimg.cn/8af72d6dc6264a72b88e9cd84d9e6e92.png
[8e159ad4aa914056bc186ebcb7d560bc.png]: https://img-blog.csdnimg.cn/8e159ad4aa914056bc186ebcb7d560bc.png
[23f966340bb74bf08398ae4dbc8213ce.png]: https://img-blog.csdnimg.cn/23f966340bb74bf08398ae4dbc8213ce.png