Question

我制作了一系列通过localStorage共享信息的JavaScript页面。一切正常，但当我更改其中一个页面中的参数然后移动到另一个页面时，我需要使用 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数据已经更改或者不是 - 只是＆＃39;如果＆＃39;方法

问题在于，当我将这些页面上传到Android时，刷新停止会停止工作（在Android中你不能用ctrl + r强制它）。显然，Android不会将不同的页面视为标签;这将解释onBlur和onFocus无法正常工作。

这就是为什么现在我尝试使用localStorage方法：＆＃34;如果localStorage已经改变，（即某人一直在改变其他页面中的值），那么刷新当前屏幕页面（以便显示新值）＆＃34;。

我知道localStorage事件在我的浏览器中有效，因为this demo有效。但我不能在我的脚本中使代码工作。

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

Answer 1

当存储处理程序在另一个不在当前选项卡中的选项卡中更改时，将调用该存储处理程序您可以覆盖setItem方法。

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

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

JavaScript：如何在localstorage更改时重新加载页面？

1 个答案: