前端項目中監(jiān)聽localStorage的變化
更新時間：2022年06月14日 10:23:09 作者：Sunshine_Lin
這篇文章主要為大家介紹了前端項目中監(jiān)聽localStorage的變化的解決思路詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
背景
前幾天有位兄弟問我，如何去監(jiān)聽localStorage的變化呢？？我確實是沒遇到過這種場景，但是我仔細想想，似乎想要達到這樣的效果，其實也不難。
解題思路
第一種：storageEvent
其實JavaScript原生就有一個監(jiān)聽localStorage變化的事件——storage，使用方法如下
window.addEventListener('storage', () => {
// callback
})
我們來看看MDN上是怎么描述這個事件的：
也就是說，同域下的不同頁面A、B，只有本頁面修改了localStorage才會觸發(fā)對方的storage事件
但是顯然這種方案很不適用在現(xiàn)在的大部分項目中，畢竟這種方案太局限了，不能應(yīng)用在本頁面監(jiān)聽的場景
第二種：封裝localStroage
其實就是代理一下對localStorage進行多一層的封裝，使得我們每次在操作localStorage的時候，都會多走一層函數(shù)，而我們就可以在這一層中去執(zhí)行監(jiān)聽的事件了，下面是簡單的代碼例子：
class CommonLocalStorage {
private storage: Storage;
constructor() {
this.storage = window.localStorage;
}
set(key: string, value: any) {
// 執(zhí)行監(jiān)聽的操作
return this.storage.setItem(`${prefix}${key}`, value);
}
get(key: string) {
// 執(zhí)行監(jiān)聽的操作
return this.storage.getItem(`${prefix}${key}`);
}
del(key: string) {
// 執(zhí)行監(jiān)聽的操作
return this.storage.removeItem(`${prefix}${key}`);
}
clear() {
// 執(zhí)行監(jiān)聽的操作
this.storage.clear();
}
}
const commonStorage = new CommonLocalStorage();
export default commonStorage
這種方式也被應(yīng)用于很多比較出名的項目中，大家可以去看那些開源的項目中，基本很少直接使用localStorage，而是都是會封裝一層的
以上就是前端項目中監(jiān)聽localStorage的變化的詳細內(nèi)容，更多關(guān)于前端監(jiān)聽localStorage變化的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了微信小程序 Image組件實例詳解的相關(guān)資料,需要的朋友可以參考下2016-09-09
JS構(gòu)造函數(shù)和實例化的關(guān)系及原型引入
這篇文章主要介紹了JS構(gòu)造函數(shù)和實例化的關(guān)系及原型引入，下文圍繞JS構(gòu)造函數(shù)和實例化的關(guān)系及原型引入的西安海關(guān)資料展開全文內(nèi)容,需要的朋友可以參考一下，希望對大家有所幫助2021-11-11
微信小程序 實現(xiàn)動態(tài)顯示和隱藏某個控件
這篇文章主要介紹了微信小程序 實現(xiàn)動態(tài)顯示和隱藏某個控件的相關(guān)資料,需要的朋友可以參考下2017-04-04
'2'>'10'==true?解析JS如何進行隱式類型轉(zhuǎn)換
這篇文章主要為大家介紹了'2'>'10'==true?解析JS如何進行隱式類型轉(zhuǎn)換示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
關(guān)于JavaScript中async和await學(xué)習(xí)，我們在這里通過 ECMAScript 2017 中添加 async 函數(shù)和 await 關(guān)鍵字，也會在主流腳本庫和其他 JavaScript 編程中得到一些應(yīng)用。接下來我們大家一起來簡單學(xué)習(xí)一下2021-08-08
微信小程序網(wǎng)絡(luò)請求wx.request詳解及實例
這篇文章主要介紹了微信小程序網(wǎng)絡(luò)請求wx.request詳解及實例的相關(guān)資料,需要的朋友可以參考下2017-05-05
這篇文章主要介紹了微信小程序 列表渲染的相關(guān)資料,并附簡單代碼實例，需要的朋友可以參考下2016-10-10
這篇文章主要介紹了JavaScript的提攜小技巧，如：過濾唯一值、短路求值、轉(zhuǎn)換Boolean型等等，想詳情了解的小伙伴請參考下面文章的具體內(nèi)容2021-09-09
微信小程序-getUserInfo回調(diào)的實例詳解
這篇文章主要介紹了微信小程序-getUserInfo回調(diào)的實例詳解的相關(guān)資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下2017-10-10
這篇文章主要介紹了微信小程序 swiper組件構(gòu)建輪播圖的實例的相關(guān)資料,如有疑問請留言或者到本站社區(qū)交流討論，需要的朋友可以參考下2017-09-09