前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心Fh528資訊網——每日最新資訊28at.com

背景

前幾天有位兄弟問我，如何去監聽localStorage的變化呢？？我確實是沒遇到過這種場景，但是我仔細想想，似乎想要達到這樣的效果，其實也不難。Fh528資訊網——每日最新資訊28at.com

解題思路

第一種：storageEvent

其實JavaScript原生就有一個監聽localStorage變化的事件——storage，使用方法如下Fh528資訊網——每日最新資訊28at.com

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

我們來看看MDN上是怎么描述這個事件的：Fh528資訊網——每日最新資訊28at.com

Fh528資訊網——每日最新資訊28at.com

也就是說，同域下的不同頁面A、B，只有本頁面修改了localStorage才會觸發對方的storage事件Fh528資訊網——每日最新資訊28at.com

但是顯然這種方案很不適用在現在的大部分項目中，畢竟這種方案太局限了，不能應用在本頁面監聽的場景Fh528資訊網——每日最新資訊28at.com

第二種：封裝localStroage

其實就是代理一下對localStorage進行多一層的封裝，使得我們每次在操作localStorage的時候，都會多走一層函數，而我們就可以在這一層中去執行監聽的事件了，下面是簡單的代碼例子：Fh528資訊網——每日最新資訊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，而是都是會封裝一層的Fh528資訊網——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-82753-0.html所以，你是知道怎么監聽LocalStorage的變化的？

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

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

下一篇： 我們一起理解 React 服務端組件