所以，你是知道怎么監聽LocalStorage的變化的？
作者：林三心不學挖掘機
很多比較出名的項目中，大家可以去看那些開源的項目中，基本很少直接使用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，而是都是會封裝一層的
責任編輯：武曉燕
來源：
前端之神
