前端项目中监听localStorage的变化
背景
前几天有位兄弟问我,如何去监听localStorage的变化呢??我确实是没遇到过这种场景,但是我仔细想想,似乎想要达到这样的效果,其实也不难。
解题思路
第一种:storageEvent
其实JavaScript原生就有一个监听localStorage变化的事件——storage,使用方法如下
window.addEventListener('storage', () => { // callback })
我们来看看MDN上是怎么描述这个事件的:
也就是说,同域下的不同页面A、B,只有本页面修改了localStorage才会触发对方的storage事件
但是显然这种方案很不适用在现在的大部分项目中,毕竟这种方案太局限了,不能应用在本页面监听的场景
第二种:封装localStroage
其实就是代理一下对localStorage进行多一层的封装,使得我们每次在操作localStorage的时候,都会多走一层函数,而我们就可以在这一层中去执行监听的事件了,下面是简单的代码例子:
class CommonLocalStorage { private storage: Storage; constructor() { this.storage = window.localStorage; } set(key: string, value: any) { // 执行监听的操作 return this.storage.setItem(`${prefix}${key}`, value); } get(key: string) { // 执行监听的操作 return this.storage.getItem(`${prefix}${key}`); } del(key: string) { // 执行监听的操作 return this.storage.removeItem(`${prefix}${key}`); } clear() { // 执行监听的操作 this.storage.clear(); } } const commonStorage = new CommonLocalStorage(); export default commonStorage
这种方式也被应用于很多比较出名的项目中,大家可以去看那些开源的项目中,基本很少直接使用localStorage,而是都是会封装一层的
以上就是前端项目中监听localStorage的变化的详细内容,更多关于前端监听localStorage变化的资料请关注脚本之家其它相关文章!
相关文章
package.json中browser module main字段优先级对比
这篇文章主要介绍了package.json中browser module main字段的优先级详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-07-07JavaScript中直接写undefined的错误及用法剖析
这篇文章主要介绍了JavaScript中直接写undefined的用法剖析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-07-07
最新评论