序大家好，我是林三鑫。用最通俗的话说，讲最难的知识点是我的座右铭。基础是进阶的前提是我的初衷。今天和大家聊聊，如何使用localStorage，sessionStorage，才能更规范，更大，更吸引眼球。用途在平时的开发中，localStorage和sessionStorage有很多用途，在我们的开发中起着非常重要的作用：1.登录完成后token的存储2.用户昵称、头像等部分用户信息的存储，简介3.常用存储一些项目的参数，比如某个id，某个参数params4.项目状态管理的持久化，比如vuex的持久化，redux的持久化5.项目整体切换状态的存储，比如主题颜色，图标样式,语言标识6等,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,常用，相信这就是我们平时的使用方式（以localStorage为例）1.基本变量//当我们存储一个基本变量时localStorage.setItem('Basicvariable','Thisisabasicvariable')//当我们获取一个值时localStorage.getItem('Basicvariable')//当我们删除时localStorage.removeItem('basicvariable')2,引用变量//当我们保存时referencevariablelocalStorage.setItem('referencevariable',JSON.stringify(data))//当我们获取值时constdata=JSON.parse(localStorage.getItem('referencevariable'))//当我们删除localStorage.removeItem('引用变量')3.清空localStorage.clear()会暴露出什么问题？1、命名过于简单。1、比如我们在存储用户信息的时候，就是以user为key来存储的。2.在存储主题的时候，我们使用主题作为key来存储。3、在存储token的时候，我们使用token作为key来存储。其实这是很有问题的，我们都知道同源的两个项目，它们的localStorage是可以互操作的。让我举一个例子。比如我现在同源下有两个项目https://www.sunshine.com。两个项目都需要在localStorage中存储一个key为name的值，这样就会造成两个项目的名字互相替换的现象，也就是相互污染的现象：2.及时性我们都知道生命周期localStorage和sessionStorage都是localStorage:除非手动清除，否则sessionStorage一直存在：生命结束于当前标签关闭页面或者关闭浏览器在普通使用中其实是没有问题的，但是添加具体时效性很重要到某些指定的缓存！比如某天：后台：“兄弟，你一登陆我就把token给你。”前端：“好的，那你顺便判断一下token是否过期？”后端：”不行，放到你前端去判断Overdue：“前端：”好吧...”这个时候因为需要在前端判断过期，所以我们要给token设置一个时效性，或者1天，或者7天3.隐私其实很容易理解。想想看。当我们把要缓存的东西存储到localStorage和sessionStorage中，在开发过程中确实对我们的开发大有裨益。当我们想看的时候，它也是一目了然。单击应用程序以查看它。但是一旦产品上线，用户也可以看到缓存中的东西，我们肯定会想：有些东西用户可以看到，但是有些东西我不想让你看到或者我们正在做状态管理持久化，需要先将数据存储在localStorage中，此时需要对缓存进行加密。解决方案1.命名约定我个人的看法是项目名称+当前环境+项目版本+缓存键。如果有其他的规矩，可以在评论区告诉林三鑫，让林三鑫学习。2.过期时间思路：在设置缓存key的时候，将value包装成一个对象，对象有对应的时间限制。下次要获取缓存值时，判断是否超时，没有超时获取值，超时后删除缓存。3.crypto加密速度很快简单，直接使用crypto-js加密数据，使用本库中的encrypt和decryptyt进行加解密实践其实在实践中还是比较简单的，无非就是四步1.讨论key的格式和团队2.和团队讨论expire的长度3.和团队讨论用哪个库来加密缓存（个人推荐crypto-js）4.代码实现（不难，我会这里就不写了）结语有些人可能觉得没必要，但是严格要求自己其实是非常有必要的。平时严格要求自己，让你拜访的每一家公司都能更好的做到向下兼容。如果您觉得本文对您有点帮助，请点个赞，鼓励一下林三心哈哈。**想一起学习前端或者摸鱼的可以加我，加入我的摸鱼学习群
