Question

我根据幻想时区制作了一个时钟。然后，我创建了一个＆＃34;闹钟＆＃34;如果勾选了复选框，它将执行警报。

我试图使用本地存储来使页面重新加载时持久化复选框，以便人们可以访问网站上的其他页面，或者每次都不必勾选框就刷新。

我似乎无法让它工作，而且我经历了很多类似的问题，例如：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();

干杯，约什

在页面上重新加载复选框？

1 个答案: