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密钥。

您也可以将复选框状态存储在会话存储或cookie中，但是本地存储似乎最适合这种情况。您可以在MDN上详细了解它。

P.S。由于安全原因，因此摘要无法使用localStorage，因此我无法为您提供完整的示例。

Answer 2

假设您只想默认选中此复选框，则只需使用checked属性

有关checked attribute for input

的更多信息

包含选中的属性为我们提供了以下HTML

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

但是，如果要存储用户先前设置的值，则需要使用cookie或会话存储

Answer 3

没有任何storage的另一种方法是创建一个承载复选框值的对象（或数组）。然后，您可以JSON.stringify将该对象添加到当前URL中。

刷新后，您可以检查是否存在查询字符串参数，并可以从中进行JSON.parse，然后重新选中复选框。

当您要将直接链接发送给已设置状态的人时，这也很有帮助。

通过这种方式，您不必担心用户是否擦除了本地存储或链接是否位于其他计算机上。它应该在任何地方都可以工作。

只需确保您encode/decodeURIComponent()得到stringified结果。

输入复选框未选中刷新

3 个答案: