所以，你是知道怎么监听LocalStorage的变化的？

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心XhK28资讯网——每日最新资讯28at.com

背景

前几天有位兄弟问我，如何去监听localStorage的变化呢？？我确实是没遇到过这种场景，但是我仔细想想，似乎想要达到这样的效果，其实也不难。XhK28资讯网——每日最新资讯28at.com

解题思路

第一种：storageEvent

其实JavaScript原生就有一个监听localStorage变化的事件——storage，使用方法如下XhK28资讯网——每日最新资讯28at.com

window.addEventListener('storage', () => {  // callback})

我们来看看MDN上是怎么描述这个事件的：XhK28资讯网——每日最新资讯28at.com

XhK28资讯网——每日最新资讯28at.com

也就是说，同域下的不同页面A、B，只有本页面修改了localStorage才会触发对方的storage事件XhK28资讯网——每日最新资讯28at.com

但是显然这种方案很不适用在现在的大部分项目中，毕竟这种方案太局限了，不能应用在本页面监听的场景XhK28资讯网——每日最新资讯28at.com

第二种：封装localStroage

其实就是代理一下对localStorage进行多一层的封装，使得我们每次在操作localStorage的时候，都会多走一层函数，而我们就可以在这一层中去执行监听的事件了，下面是简单的代码例子：XhK28资讯网——每日最新资讯28at.com

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，而是都是会封装一层的XhK28资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-26-82753-0.html所以，你是知道怎么监听LocalStorage的变化的？

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

上一篇： 一文读懂Cache一致性原理

下一篇： 我们一起理解 React 服务端组件