javascript - 使复选框在页面重新加载时持久存在？

Question

我创建了一个基于幻想时区的时钟。然后我创建了一个“警报”，如果勾选了复选框，它将执行警报。

我正在尝试使用本地存储使复选框在页面重新加载时保持不变，这样人们就可以转到网站上的其他页面，或者无需每次都勾选复选框即可刷新。

虽然我似乎无法让它工作，但我遇到过很多类似的问题，比如这个:how to Keep checkbox checked after refresh the page

这是我拥有的代码的代码笔:http://codepen.io/anon/pen/xqRWJM?editors=1111

这是复选框的 html 代码:

<div id="alert">Alert me when it's night time:
<input id="alertme" type="checkbox"></input>
</div>

Answer 1

我为您制作了一支简单的笔，它演示了如何使用 LocalStorage API 保存复选框状态。希望您可以对此进行调整以满足您的特定需求。

http://codepen.io/oculusriff/pen/RpoJWQ ？

HTML

<input type="checkbox" id="test" /> <label for="test">Test</label>

JavaScript

function App() {}

App.prototype.setState = function(state) {
  localStorage.setItem('checked', state);
}

App.prototype.getState = function() {
  return localStorage.getItem('checked');
}

function init() {
  var app = new App();
  var state = app.getState();
  var checkbox = document.querySelector('#test');

  if (state == 'true') {
    checkbox.checked = true;
  }

  checkbox.addEventListener('click', function() {
      app.setState(checkbox.checked);
  });
}

init();

干杯，乔希