vue實時監(jiān)聽 localStorage 變化
應(yīng)用場景：
1屏镊、頁面B需要實時獲取頁面A數(shù)據(jù)更改
2、父子頁面之間的傳參
代碼實例
B頁面實時獲取A頁面的數(shù)據(jù)變化
在【頁面A】進行緩存修改or插入緩存
localStorage.setItem('product_process_uid', parentinputname + '#' + data.uid + '#' + data.nickname);
在【頁面B】需要監(jiān)聽緩存值更改
mounted: function () {
var that = this;
//監(jiān)聽 localStorage 緩存中指定key的值變化,本例key為 product_process_uid
window.addEventListener('storage', function (e) {
if (e.key && e.key == 'product_process_uid' && e.newValue) {
that.product_process_uid = e.newValue;
// 監(jiān)聽到值后的處理邏輯
that.product_process_uid = that.product_process_uid.split('#');
that.formData.product_process[that.product_process_uid[0]].user_id = that.product_process_uid[1];
that.formData.product_process[that.product_process_uid[0]].user_name = that.product_process_uid[2];
// 根據(jù)實際情況贡定，判斷處理完后是否要刪除這個key
localStorage.removeItem('product_process_uid');
}
})
}
如上即可在【頁面B】實時獲取到【頁面A】中的數(shù)據(jù)。
注意
頁面必須是同源（即同一個域名可都，例如：都在https://www.baidu.com/域名下）
參考文檔：
https://blog.csdn.net/qq_38902230/article/details/110233216
————————————————
原文作者：木偶
轉(zhuǎn)自鏈接：https://www.muouseo.com/article/rpnv35ewm5.html
版權(quán)聲明：著作權(quán)歸作者所有缓待。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)蚓耽，非商業(yè)轉(zhuǎn)載請保留以上作者信息和原文鏈接。
