快速提示：页面重新加载后，保持复选框选中状态

此快速提示介绍了在刷新页面或用户离开您的站点以在以后返回时如何使浏览器记住复选框的状态。

例如，如果您使用复选框来允许用户设置特定于站点的首选项，例如在新窗口中打开外部链接或隐藏某些页面元素，则对于“保持复选框的选中状态”可能很有用。

对于您当中不耐烦的人，本文结尾处提供了该技术的演示 。

复选框标记

因此，我们首先需要的是一些复选框。 这是我之前做的一些：

<div id="checkbox-container">
  <div>
    <label for="option1">Option 1</label>
    <input type="checkbox" id="option1">
  </div>
  <div>
    <label for="option2">Option 2</label>
    <input type="checkbox" id="option2">
  </div>
  <div>
    <label for="option3">Option 3</label>
    <input type="checkbox" id="option3">
  </div>

  <button>Check All</button>
</div>

您会注意到，我包括了“ 全部选中”按钮，允许用户单击一下即可选择或取消选择所有复选框。 我们稍后再讨论。

希望您还会注意到，我在与每个框有关的文本中使用标签。 不言而喻， 表单域仍然应该具有标签 ，但是对于复选框而言，这尤其重要，因为它允许用户通过单击标签文本来选择/取消选择该框。

最后，您将看到我将标签和复选框分组在块级元素（在本例中为<div>元素）内，以便它们彼此之间出现并且更易于样式化。

应对变化

现在，将事件处理程序绑定到复选框，以便在单击它们时发生某些事情。 我在本教程中使用的是jQuery ，但是，当然，这并非绝对必要。 您可以通过CDN包含它，因此：

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

现在的JavaScript：

$("#checkbox-container :checkbox").on("change", function(){
  alert("The checkbox with the ID '" + this.id + "' changed");
});

在这里，我使用的是jQuery的psuedo-class ：checkbox选择器 ，其前面是包含<div>元素的ID（ checkbox-container ）。 这样，我就可以仅定位我感兴趣的那些复选框，而不是页面上的所有复选框。

坚持复选框选中状态

如您所知，HTTP是无状态协议 。 这意味着它将每个请求视为与任何先前请求均无关的独立事务。 因此，如果您选中一个复选框然后刷新页面，浏览器将无法记住该复选框的先前状态，并且在上述示例中， 浏览器将以未选中的形式呈现该复选框（尽管某些浏览器会缓存该值 ）。

为了避免这种情况，我们将使用本地存储（这是Web Storage API的一部分 ）将复选框状态存储在用户的计算机上。 它具有相当好的浏览器支持：

我可以使用名称值存储吗？ 来自caniuse.com的有关主要浏览器对namevalue-storage功能的支持的数据。

要在JavaScript中修改localStorage对象，可以使用setItem和getItem方法：

localStorage.setItem("favoriteVillan", "Dr. Hannibal Lecter");

console.log(localStorage.getItem("favoriteVillan"));
=> Dr. Hannibal Lecter

要从本地存储中删除项目，请使用removeItem方法。

localStorage.removeItem("favoriteVillan");

console.log(localStorage.getItem("favoriteVillan"));
=> null

您可以在此处阅读有关本地存储的更多信息： HTML5 Web存储

对于我们的代码，似乎当我们要保留所有复选框时，逻辑上的选择是使键/值对包含复选框ID及其对应的选中状态。 我们可以将它们保存在对象文字中，然后可以将其添加到本地存储中。 但是，由于本地存储只能处理键/值对，因此我们需要在存储对象之前对其进行字符串化，并在检索时对其进行解析。

让我们看看我们该怎么做：

var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {};
var $checkboxes = $("#checkbox-container :checkbox");

$checkboxes.on("change", function(){
  $checkboxes.each(function(){
    checkboxValues[this.id] = this.checked;
  });
  localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues));
});

注意，如果第一个操作数为falsy，则逻辑OR运算符（ || ）返回其第二个操作数的值。 如果在本地存储中找不到条目，​​我们将使用它来为checkboxValues变量分配一个空对象。 这实际上与编写相同：

var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues');
if (checkboxValues === null){
  checkboxValues = {};
}

还要注意，我们正在缓存对复选框的引用，因此我们不必继续查询DOM。 在这么小的例子中，这是过大的，但是随着代码的增长，这是一个很好的习惯。

最后要做的是在页面加载时遍历checkboxValues变量，并相应地设置框的值：

$.each(checkboxValues, function(key, value) {
  $("#" + key).prop('checked', value);
});

就是这样。 现在，我们有了持久的复选框。

请参阅CodePen上的SitePoint（ @SitePoint ）提供的Pen xVevNw 。

如果尝试刷新密码笔（通过单击“ 重新运行”按钮），则会看到该复选框保持选中状态，而如果您在文本输入中输入内容，则在重新加载时将消失。

选中和取消选中所有框

为了解决这个问题，让我们实现“ 全部检查”按钮，以便用户可以一次性选择或取消选择所有内容。

单击时，此按钮应选中所有复选框。 选中所有复选框后，其文本应更改为全部取消选中 ，其状态也应存储在本地存储中。

让我们开始这样：

var $button = $("#checkbox-container button");

function allChecked(){
  return $checkboxes.length === $checkboxes.filter(":checked").length;
}

function updateButtonStatus(){
  $button.text(allChecked()? "Uncheck all" : "Check all");
}

$checkboxes.on("change", function(){
  ...
  updateButtonStatus();
});

当所有复选框都处于选中或未选中状态时，这将导致按钮的文本更改。

唯一可能与众不同的地方是在updateButtonStatus方法中使用三元条件 。 这是if语句的快捷方式，等效于：

if(allChecked()){
  $button.text("Uncheck all");
} else {
  $button.text("Check all");
}

现在是执行选择和取消选择的功能：

function handleButtonClick(){
  $checkboxes.prop("checked", allChecked()? false : true)
}

$("button").on("click", function() {
  handleButtonClick();
});

最后，我们将向本地存储中的对象添加一个新值，我将其重命名以反映它现在存储了不同类型的值的事实。 我还将更新本地存储的逻辑移到了自己的函数中：

var formValues = JSON.parse(localStorage.getItem('checkboxValues')) || {};

function updateStorage(){
  $checkboxes.each(function(){
    formValues[this.id] = this.checked;
  });

  formValues["buttonText"] = $button.text();
  localStorage.setItem("formValues", JSON.stringify(formValues));
}

并在页面上加载：

$button.text(formValues["buttonText"]);

演示版

这就是我们最终得到的结果。

请参阅CodePen上的SitePoint（ @SitePoint ）手写笔grJYvd 。

结论

在本教程中，我演示了如何将表单值持久保存到本地存储，以及如何以简单的形式实现复选框的Check / Uncheck All功能。

如果您有任何问题或意见，我很高兴在下面听到他们的意见。

From: https://www.sitepoint.com/quick-tip-persist-checkbox-checked-state-after-page-reload/