本文介绍前端项目中监听localStorage变化的两种常用方案。第一种利用原生storage事件，适用于同域不同页面间的状态同步；第二种通过封装localStorage操作接口，在读写时触发回调，适用于单页面应用内的状态监听。
背景
近期有开发者询问如何实现localStorage变化的监听。虽然这一场景并不常见，但通过合理设计，实现该功能并非难事。
解题思路
第一种：storageEvent
JavaScript原生提供了监听localStorage变化的storage事件，具体使用方式如下：
window.addEventListener('storage', () => {
// callback
})
参考MDN对该事件的描述：
该事件机制意味着，只有在同一域名下的不同页面中，当其中一个页面修改了localStorage时，其他页面才会触发storage事件。
然而，这种方案在当前主流的前端项目中适用性较低，因为其局限性在于无法监听当前页面内的localStorage变化。
第二种：封装localStroage
该方法的核心是对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变化的两种主要方案，更多相关技术细节可参考本站其他文章。