1、背景介绍
简单给大家介绍下localStorage 的使用场景
适合使用 localStorage 的情况:
用户偏好设置: 当用户需要在多个访问页面之间保留偏好设置时,可以使用 localStorage 来存储这些信息,例如语言首选项、主题选择等。
本地缓存数据: 对于不经常变化且频繁访问的数据,可以将它们存储在 localStorage 中,以减少网络请求和提高应用程序的性能。
持久性登录信息: 例如,"记住我"功能,用户在关闭浏览器后再次打开时可以保持登录状态。
表单数据保存: 当用户填写长表单或多个步骤的表单时,可以在每个步骤完成时将数据保存在 localStorage 中,以防止意外刷新或关闭浏览器导致数据丢失。
客户端计数器或标记: 如果需要在多个会话之间保持某种状态,例如用户在网站上执行的任务次数或已读通知的数量,可以使用 localStorage。
不适合使用 localStorage 的情况:
敏感信息存储: localStorage 是在客户端存储的,因此不适合存储敏感信息,例如密码、信用卡信息等。这些信息应该存储在服务器端,并使用安全的传输和存储方法。
大容量数据存储: localStorage 的容量有限,通常在几MB左右。如果需要存储大量数据,例如图片、视频等,应该考虑使用其他解决方案,如IndexedDB或服务器端存储。
跨设备同步数据: localStorage 是与特定设备和浏览器绑定的,不适合用于在不同设备间同步数据。如果需要在多个设备间同步数据,可以考虑使用云存储或服务器端存储。
并发写入需求: localStorage 是单线程的,如果多个页面同时尝试写入相同的 localStorage 键,可能会导致数据覆盖或不稳定的行为。
需要过期或自动清理: localStorage 不提供内置的过期时间或自动清理机制。如果需要这样的功能,可能需要自己实现或考虑其他解决方案。
总结:localStorage 在许多情况下是一种很有用的客户端数据存储解决方案,但也有一些限制和不适合的情况。在使用 localStorage 之前,应该仔细考虑数据的安全性、容量、跨设备同步需求以及并发访问需求。对于不适合使用 localStorage 的情况,可以考虑其他存储方案,如IndexedDB、WebSQL、服务器端存储等。
实例讲解
大家看下边的逻辑是否能看明白呢?
前端在调用后端接口获取某一个人的评论次数、获赞次数、回复次数。调用之后判断后端返回过来的值。如果返回回来的值是0的话,从缓存中获取对应的值,如果从缓存中获取的评论次数为空那么其他两个的次数也为0。造成前端数据混乱。
2、思路&方案
1、明确缓存使用场景
2、写代码之前逻辑自洽
3、过程
1、什么是LocalStorage
localstorage 在浏览器的 API 有两个:localStorage 和sessionStorage。localStorage 和 sessionStorage 的区别主要是在于其生存期。localStorage理论上来说是永久有效的,即不主动清空的话就不会消失,即使保存的数据超出了浏览器所规定的大小,也不会把旧数据清空而只会报错。sessionStorage的生存期顾名思义,类似于session,只要关闭浏览器(也包括浏览器的标签页),就会被清空。
//保存数据
localStorage.setItem("key","value");
//读取数据
localStorage.getItem("key");
//删除数据
localStorage.removeItem("key")
什么时候使用localStorage
1、登录完成后token的存储
2、用户部分信息的存储,比如昵称、头像、简介
3、一些项目通用参数的存储,例如某个id、某个参数params
4、项目状态管理的持久化,例如vuex的持久化、redux的持久化
5、项目整体的切换状态存储,例如主题颜色、icon风格、语言标识
注意事项
1.命名问题
现在我们的线上就有这个问题,在同源的域名下,同源的两个项目的localStorage是互通的。
2.时效性问题
localStorage除非手动进行清除,否则的话将会一直存在。
3.隐蔽性问题
我们所有存在localStorage里面的数据的,都是在Application里面可以直接看到的,上线之后,用户也是可以直接看到的,但是有的数据我们并不想让用户看到,这时候就要考虑隐蔽性的问题了。
4、总结
1、首先对业务进行一个透彻的分析,不是看到哪写到哪。对于评论、获赞、回复之间的逻辑。评论和回复之间是没有耦合关系的。我们不评论自己的内容也完全可以回复别人的评论。所以说不能因为评论是0就把回复也设置为0,逻辑上是不能自洽的。
2、不应该把经常变动的数据放入的缓存中。
5、升华
明确边界,概念清晰,不是能实现功能就好了,就像我们上学不是为了考试,考试只是一种检验的手段,学习还有很多其他的方法,实现前后端传值也有很多其他的方法,我们要在多种方法中找到一种最适合我们的方法。不要为了使用而使用。