JavaScript：本地存儲更改時如何重新加載頁面？

Question

我正在制作一系列JavaScript頁面，這些頁面通過localStorage共享信息。 一切正常，但是當我在其中一個頁面中更改參數然后移至另一頁面時，我需要使用Ctrl R手動重新加載，以使更改生效。 我使用onBlur成功完成了自動刷新，但是，可惜，當我將腳本上傳到Android時，該功能停止工作（這些腳本的最終目標正在成為Android應用）。

因此，現在我嘗試將addEventListener與存儲事件一起使用，但是什么也沒有發生，我仍然必須手動進行刷新。 我已經閱讀了很多網站，並瀏覽了許多示例，但我仍然不明白。 以下是相關代碼：

window.addEventListener("storage", handler);

function handler() {
    location.reload();
}

讓我分享一些我想做的事情：我有一系列的html頁面，每個頁面都有一個表單來計算飲食計划。 示例：第一個詢問身體信息，並為您提供基礎卡路里攝入量。

第二頁顯示使用localStorage存儲的基本卡路里攝入量，並將其顯示在屏幕上，並要求您以表格形式介紹您的每日卡路里目標； 使用這兩個數字，它可以計算出丟失一公斤需要多長時間。

如果我回到第一頁並輸入不同的身體測量值，從而生成不同的輸出，然后重新訪問第2頁，則我想找到那里的基礎卡路里數會自動刷新。 我使用onBlur和onFocus在計算機上成功完成了此操作：

window.onblur= function() {window.onfocus= function () {location.reload(true)}};

每次js檢測到您剛剛從一個選項卡更改為另一個選項卡時，這都會重新加載您要登錄的選項卡的頁面，即使localStorage數據是否已更改-一種“以防萬一”的方法。

問題是，當我將這些頁面上傳到Android時，刷新停止停止工作（在Android中，您無法執行ctrl + r來強制執行此操作）。 顯然，Android不會將其他頁面視為標簽。 這將解釋onBlur和onFocus無法正常工作。

這就是為什么我現在嘗試使用localStorage方法的原因：“如果localStorage已更改，（例如，有人在其他頁面中更改了值），然后刷新當前頁面上的屏幕（以便顯示新值）”。

我知道localStorage事件在我的瀏覽器中有效，因為此演示有效。 但是我無法使代碼在腳本中工作。

我希望這次能更清楚地說明自己（請多多包涵，這是我的第一篇文章...）

Answer 1

當存儲處理程序在另一個選項卡（而不是當前選項卡）中更改時被調用。
您可以覆蓋setItem方法。

!function() {
    var setItem = Storage.prototype.setItem;

    Storage.prototype.setItem = function() {
       setItem.apply(this, arguments);
       location.reload();
    };
}();