vue 項(xiàng)目中通過監(jiān)聽 localStorage 的變化進(jìn)行父子頁面?zhèn)鲄?/h2>

vue實(shí)時(shí)監(jiān)聽 localStorage 變化

應(yīng)用場景：

1、頁面B需要實(shí)時(shí)獲取頁面A數(shù)據(jù)更改

2、父子頁面之間的傳參

代碼實(shí)例

B頁面實(shí)時(shí)獲取A頁面的數(shù)據(jù)變化

在【頁面A】進(jìn)行緩存修改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ù)實(shí)際情況，判斷處理完后是否要?jiǎng)h除這個(gè)key
        localStorage.removeItem('product_process_uid');
      }
    })

}

如上即可在【頁面B】實(shí)時(shí)獲取到【頁面A】中的數(shù)據(jù)。

注意

頁面必須是同源（即同一個(gè)域名，例如：都在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)載請保留以上作者信息和原文鏈接。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。