选中复选框 5 秒后 JavaScript 刷新页面答案

【问题标题】：JavaScript Refresh Page after 5 Seconds on Checked Checkbox选中复选框 5 秒后 JavaScript 刷新页面
【发布时间】：2018-01-02 19:02:19
【问题描述】：

有没有办法如果选中复选框，则每 5 秒刷新一次网页？

例如，如果复选框未选中，则不会发生任何事情，但如果选中，则函数refresh() 将在之后每 5 秒刷新一次页面。

这是我到目前为止的代码，但由于某种原因它不起作用。

<input type="checkbox" id="autoRefresh" onclick="if(this.checked){refresh()}" checked>


function refresh() {
         setTimeout(function () { location.reload() }, 5000);
    }

【问题讨论】：

标签： javascript html checkbox refresh settimeout

【解决方案1】：

您必须将信息临时存储在选中复选框的某个位置，例如 cookie 或 localStorage。试试下面的代码：

if(localStorage.getItem('doRefreshes')) {
  var x = setTimeout(function() {
    location.reload();
  }, 5000);
}

document.getElementById('autoRefresh').checked = !!localStorage.getItem('doRefreshes');

function toggleRefreshes(checked) {
  if(checked) {
    localStorage.setItem('doRefreshes', true)
    location.reload()
  } else {
    localStorage.removeItem('doRefreshes')
  }
}

&lt;input type="checkbox" id="autoRefresh" onclick="toggleRefreshes(this.checked)"&gt;

【讨论】：

如果可能的话，我建议在 url ('?autorefresh=true') 上使用查询字符串，而不是任何类型的持久性。查询字符串与当前选项卡相关联，但持久存储会影响打开到同一页面的多个选项卡，并降低用户体验。无论哪种方式，这也是一种在认知上运作良好的状态。