html - 输入复选框在刷新时取消选中

Question

我创建了一些复选框，用于检查和删除文本。但是，如果刷新页面，它会返回到未选中/正常文本。我怎样才能防止这种情况发生？我注意到很多人都在寻找相反的结果，但我希望保留此信息。

HTML:

<li><div class="checkbox"><label><input type="checkbox" class="strikethrough" value="1"><span>TEXT</span></label></div></li>
<li><div class="checkbox"><label><input type="checkbox" class="strikethrough" value="1"><span>TEXT</span></label></div></li>

CSS:

.checkbox {
    margin-left: .25em;
    display: inline-block;
    color: black;
}
.strikethrough:checked + span{
    text-decoration: line-through;
    color: red;
}

Answer 1

您必须将复选框状态存储在某处，并在“文档准备就绪”事件中加载它。您可以将值存储在浏览器的本地存储中。

这是一个未经测试的示例，应该可以让您大致了解:

var checkboxes = document.querySelectorAll('input[type="checkbox"]');

// On document ready event, set the initial states of the checkboxes
document.addEventListener('DOMContentLoaded', function () {
  checkboxes.forEach(function (checkbox) {
    this.checked = window.localStorage.getItem(checkbox.id) || false;
  });
});

// When checkbox state is changed, save it to the localStorage
checkboxes.forEach(function (checkbox) {
  checkbox.addEventListener('change', function () {
    window.localStorage.setItem(this.id, this.value);
  });
});

请记住，要使此示例正常工作，您需要为每个复选框设置唯一 ID，因为它用作 localStorage 键。

您还可以将复选框状态存储在 session 存储中，甚至存储在 cookie 中，但本地存储似乎最适合这种情况。您可以在 MDN 上阅读更多相关信息.

附言由于安全原因，SO 片段不能使用 localStorage，所以我不能给你一个完整的例子。