JavaScript:本地存储更改时如何重新加载页面？

Question

我正在制作一系列通过 localStorage 共享信息的 JavaScript 页面。一切正常，但是当我更改其中一个页面中的参数然后移动到另一个页面时，我需要使用 CtrlR 手动重新加载，以便更改变为有效的。我成功地使用 onBlur 进行了自动刷新，但是，唉，当我将脚本上传到 Android 时，这样的功能就停止工作了(这些脚本的最终目的地是成为 Android 应用程序)。

所以现在我尝试将 addEventListener 与存储事件一起使用，但没有任何反应，我仍然需要手动刷新。我已经阅读了很多网站并浏览了很多示例，但我仍然不明白。相关代码如下:

window.addEventListener("storage", handler);

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

让我分享一些关于我正在尝试做的事情:我有一系列 html 页面，每个页面都有一个表格来计算饮食计划。示例:第一个询问 body 信息并为您提供基础卡路里摄入量。

第二页获取使用 localStorage 存储的基础卡路里摄入量，将其显示在屏幕上，并以表格形式要求您介绍每日卡路里目标；通过这两个数字，它可以计算出减掉一公斤需要多长时间。

如果我返回第一页并输入不同的 body 测量值，从而生成不同的输出，然后重新访问第二页，我想找到自动刷新的基础卡路里数。我在计算机上使用 onBlur 和 onFocus 成功地做到了这一点:

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

每当 js 检测到您刚刚从一个选项卡更改为另一个选项卡时，无论 localStorage 数据是否已更改，都会重新加载您所登陆的选项卡页面 - 这是一种“以防万一”的方法。

问题是，当我将这些页面上传到 Android 时，刷新停止会停止工作(在 Android 中，您无法执行 ctrl+r 来强制刷新)。显然 Android 并不将不同的页面视为选项卡；这可以解释 onBlur 和 onFocus 不起作用。

这就是为什么现在我正在尝试 localStorage 方法:“如果 localStorage 已更改(即，有人更改了其他页面中的值)，则刷新当前页面上的屏幕(以便显示新值) )”。

我知道 localStorage 事件在我的浏览器中起作用，因为 this demo作品。但我无法使代码在我的脚本中运行。

我希望这次能更清楚地解释自己(请耐心等待，这是我的第一篇文章......)

Answer 1

当存储处理程序在另一个选项卡而不是当前选项卡中发生更改时，将调用该存储处理程序。
您可以重写 setItem 方法。

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

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