背景
前几天有位兄弟问我，如何去监听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变化的资料请关注编程网其它相关文章！
