当前位置：首页 > 科技 > 软件

20k级别前端是怎么使用LocalStorage的，想知道吗？

来源：责编：时间：2024-03-26 17:40:54 102观看

导读前言大家好，我是林三心，用最通俗的话，讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心，今天就给大家唠一下嗑，讲一下，怎么样使用localStorage、sessionStorage，才能更规范，更高大上，更能让人眼前一亮。用处在平时的开发

前言

大家好，我是林三心，用最通俗的话，讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心，今天就给大家唠一下嗑，讲一下，怎么样使用localStorage、sessionStorage，才能更规范，更高大上，更能让人眼前一亮。

用处

在平时的开发中，localStorage、sessionStorage的用途是非常的多的，在我们的开发中发挥着非常重要的作用：

1、登录完成后token的存储

2、用户部分信息的存储，比如昵称、头像、简介

3、一些项目通用参数的存储，例如某个id、某个参数params

4、项目状态管理的持久化，例如vuex的持久化、redux的持久化

5、项目整体的切换状态存储，例如主题颜色、icon风格、语言标识

6、等等、、、、、、、、、、、、、、、、、、、、、、、、、、

普通使用

那么，相信我们各位平时使用都是这样的（拿localStorage举例）

1、基础变量

// 当我们存基本变量时localStorage.setItem('基本变量', '这是一个基本变量')// 当我们取值时localStorage.getItem('基本变量')// 当我们删除时localStorage.removeItem('基本变量')

2、引用变量

// 当我们存引用变量时localStorage.setItem('引用变量', JSON.stringify(data))// 当我们取值时const data = JSON.parse(localStorage.getItem('引用变量'))// 当我们删除时localStorage.removeItem('引用变量')

3、清空

localStorage.clear()

暴露出什么问题？

1、命名过于简单

比如我们存用户信息会使用user作为 key 来存储
存储主题的时候用theme 作为 key 来存储
存储令牌时使用token作为 key 来存储其实这是很有问题的，咱们都知道，同源的两个项目，它们的localStorage是互通的。

我举个例子吧比如我现在有两个项目，它们在同源https://www.sunshine.com下，这两个项目都需要往localStorage中存储一个 key 为name的值，那么这就会造成两个项目的name互相顶替的现象，也就是互相污染现象：

图片

2、时效性

咱们都知道localStorage、sessionStorage这两个的生命周期分别是

localStorage：除非手动清除，否则一直存在
sessionStorage：生命结束于当前标签页的关闭或浏览器的关闭

其实平时普通的使用时没什么问题的，但是给某些指定缓存加上特定的时效性，是非常重要的！比如某一天：

后端：”兄弟，你一登录我就把token给你“
前端：”好呀，那你应该会顺便判断token过期没吧？“
后端：”不行哦，放在你前端判断过期呗“
前端：”行吧。。。。。“

那这时候，因为需要在前端判断过期，所以咱们就得给token设置一个时效性，或者是1天，或者是7天

图片

3、隐秘性

其实这个好理解，你们想想，当咱们把咱们想缓存的东西，存在localStorage、sessionStorage中，在开发过程中，确实有利于咱们的开发，咱们想看的时候也是一目了然，点击Application就可以看到。

但是，一旦产品上线了，用户也是可以看到缓存中的东西的，而咱们肯定是会想：有些东西可以让用户看到，但是有些东西我不想让你看到

图片

或者咱们在做状态管理持久化时，需要把数据先存在localStorage中，这个时候就很有必要对缓存进行加密了。

解决方案

1、命名规范

我个人的看法是项目名 + 当前环境 + 项目版本 + 缓存key，如果大家有其他规则的，可以评论区告诉林三心，让林三心学学

图片

2、expire定时

思路：设置缓存key时，将value包装成一个对象，对象中有相应的时效时段，当下一次想获取缓存值时，判断有无超时，不超时就获取value，超时就删除这个缓存

图片

截屏2021-11-11 下午9.33.00.png

3、crypto加密

加密很简单，直接使用crypto-js进行对数据的加密，使用这个库里的encrypt、decrypyt进行加密、解密

图片

截屏2021-11-11 下午9.43.16.png

实践

其实实践的话比较简单啦，无非就是四步

与团队商讨一下key的格式
与团队商讨一下expire的长短
与团队商讨一下使用哪个库来对缓存进行加密（个人建议crypto-js）
代码实施（不难，我这里就不写了）

结语

有人可能觉得没必要，但是严格要求自己其实是很有必要的，平时严格要求自己，才能做到每到一个公司都能更好的做到向下兼容难度。

本文链接：http://www.28at.com/showinfo-26-79452-0.html20k级别前端是怎么使用LocalStorage的，想知道吗？

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇：你还在用Mybatis？试试这款神器，纵享丝滑

下一篇：比 ElasticSearch 快 1000 倍的日志引擎

标签：

热门焦点

卢伟冰长文解析K60至尊版对Redmi有着里程碑式的意义

在今天的Redmi后性能时代战略发布会结束之后，Redmi总经理卢伟冰又带来了一篇长文，详解了为什么 Redmi 要开启后性能时代？为什么选择和 MediaTek、Pixelworks 深度合作？以及后性
2023年Q2用户偏好榜：12+256G版本成新主流

3月份的性能榜、性价比榜和好评榜之后，就要轮到2023年的第二季度偏好榜了，上半年的新机潮已经过去，最明显的肯定就是大内存和存储的机型了，另外部分中端机也取消了屏幕塑料支架
6月安卓手机性能榜：vivo/iQOO霸占旗舰排行榜前三

2023年上半年已经正式过去了，我们也迎来了安兔兔V10版本，在新的骁龙8Gen3和天玑9300发布之前，性能榜的榜单大体会以骁龙8Gen2和天玑9200+为主，至于那颗3.36GHz的骁龙8Gen2领先
5月安卓手机好评榜：魅族20 Pro夺冠

性能榜和性价比榜之后，我们来看最后的安卓手机好评榜，数据来源安兔兔评测，收集时间2023年5月1日至5月31日，仅限国内市场。第一名：魅族20 Pro好评率：97.50%不得不感慨魅族老品牌还
女孩租房开2小时空调用完100元电费引热议：5级能耗惹不起月薪过万电费也交不起

近日，江苏苏州一女孩租房当天充值了100元电费，开着空调不到2小时发现电费已用完。对于为什么这个快，房东表示，电表坏了这种情况很多，之前也遇到过，给租客换
每天一道面试题-CPU伪共享

前言：了不起：又到了每天一到面试题的时候了！学弟，最近学习的怎么样啊了不起学弟：最近学习的还不错，每天都在学习，每天都在进步！了不起：那你最近学习的什么呢？了不起学弟：最近在学习C
ESG的面子与里子

来源 | 光子星球撰文 | 吴坤谚编辑 | 吴先之三伏大幕拉起，各地高温预警不绝，但处于厄尔尼诺大“烤”之下的除了众生，还有各大企业发布的ESG报告。ESG是“环境保
超级标准版旗舰！iQOO 11S全球首发iQOO超算独显芯片

上半年已接近尾声，截至目前各大品牌旗下的顶级旗舰都已悉数亮相，而下半年即将推出的顶级旗舰已经成为了数码圈爆料的主流，其中就包括全新的iQOO 11S系
英特尔Xe-HP项目终止，将专注Xe-HPC/HPG系列显卡

据10 月 31 日消息报道，英特尔高级副总裁兼加速计算系统和图形事业部总经理表示，Xe-HP“ Arctic Sound” 系列服务器 GPU 已经应用于 oneAPI devcloud 云服