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