前端項目中監聽localStorage的變化

Posted on by

背景

前幾天有位兄弟問我，如何去監聽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變化的資料請關註WalkonNet其它相關文章！

推薦閱讀：