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();
    };
}();