0
点赞
收藏
分享

微信扫一扫

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


目录

  • ​​一:背景介绍​​
  • ​​二:LocalStorage基础知识​​
  • ​​LocalStorage是什么?​​
  • ​​LocalStorage怎么使用​​
  • ​​LocalStorage的优势与劣势​​
  • ​​优势:​​
  • ​​劣势:​​
  • ​​如何在项目中选择使用LocalStorage呢?​​
  • ​​三:学情页面逻辑问题分析​​
  • ​​逻辑问题​​
  • ​​缓存滥用问题​​
  • ​​四:总结​​
  • ​​五:升华​​

一:背景介绍

前端Vue2,项目代码

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


这部分代码对应的逻辑是

1.通过后端接口查询了。某个课下的某个班的某个用户的评论,获赞,回复次数

2.如果这些次数都为0的话,去缓存中获取次数。

3.如果评论的内容是空的话,将内容置为0,将点赞数置为0,将回复数置为0

4.如果这次次数都不为0的话,将用户的评论,获赞,回复次数存入缓存

二:LocalStorage基础知识

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

LocalStorage是什么?

LocalStorage是Web Storage的存储方式之一。使用K,V的方式进行存储。WebStorage包含两种,一种是localStorage(长期存储),另一种是sessionStorage(临时存储)

localStorage(长期存储):浏览器关闭后数据仍然会存在
sessionStorage(临时存储):浏览器打开期间存在。页面重新加载也不会消失。

LocalStorage怎么使用

//保存语法
localStorage.setItem("key","value");
//读取数据
let data = localStorage.getItem("key");
//删除数据语法
localStorage.removeItem("key")

我们可以在浏览器的控制台中,直接的使用Console界面,尝试使用LocalStorage进行一些数据存储。获取。

28个案例问题分析---013---学情页面逻辑问题--LocalStorage_数据_02


对应数据

28个案例问题分析---013---学情页面逻辑问题--LocalStorage_开发语言_03

LocalStorage的优势与劣势

优势:

1. 存储空间大,扩展了cookie的4K限制,有5M的数据存储空间。它就像一个针对前端界面的数据库一般。
2. localStorage的数据爬虫爬取不到

劣势:

1.不同的浏览器版本存储量不统一,并且只支持IE8以上的IE版本。
2. localStorage的值类型限定为string类型
3. localStorage在浏览器的隐私模式下面是不可读取的

如何在项目中选择使用LocalStorage呢?

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

三:学情页面逻辑问题分析

逻辑问题

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

缓存滥用问题

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

四:总结

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

五:升华

知其然,更要知其所以然。


举报

相关推荐

0 条评论