如何通过页面刷新保持复选框选择？答案

【问题标题】：How to persist checkbox selection with page refresh?如何通过页面刷新保持复选框选择？
【发布时间】：2017-04-17 13:12:34
【问题描述】：

我正在使用 Java、Thymeleaf、Spring、HTML 和一些 CSS 在 Eclipse 中开发一个购物清单 Web 应用程序。我使用 HTML 将复选框列表编码到应用程序中，因此当我完成某个列表时，我可以单击复选框并在文本中添加一行。但是，当我刷新页面时，复选框不会保持选中状态。我希望能够通过页面刷新保持该框处于选中状态。我已经尝试了来自其他 Stack Overflow 问题的各种不同代码位，例如将 Javascript 编码到 HTML 页面中，但到目前为止似乎没有任何效果。这是我的 HTML 代码：

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
	layout:decorator="layouts/basic">
<link rel="stylesheet" th:href="@{/templates.css/main.css}" />
<head>
<title>Getting Started: Serving Web Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
table, th, td {
	border: 1px solid black;
	border-collapse: collapse;
	padding: 15px;
}

.strikethrough:checked+.strikeThis {
	text-decoration: line-through
} 


</style>

</head>
<body layout:fragment="content">
	<div class="row">
		<h1>Shopping Lists</h1>
		<!-- a simple button for later to add shopping lists -->
		<a href="/" th:href="@{|/ListsofLists/add|}"><input type="button"
			value="Add list" /></a>
		<table>
			<thead>
				<tr>
					<th>Name</th>
					<th>&nbsp;</th>
					<th>&nbsp;</th>
				</tr>
			</thead>
			<tbody class="list">
				<tr th:each="list : ${lists}">

					<td><input type="checkbox" name="check" class="strikethrough"
						value="1" /> <label for="check" class="strikeThis"
						th:text="${list.name}"> Name </label></td>
					<!-- 	<td th:text="${list.name}"></td> -->
					<td><a href="/" th:href="@{|/ListsofLists/${list.id}|}">Show</a></td>
					<td><form method="POST">
							<input type="hidden" name="listId" th:value="${list.id}" />
							<button type="submit">Delete</button>
						</form></td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
</html>

我将尝试回答尽可能多的问题，以便弄清楚这个问题。抱歉，如果这是相当简单的事情，我是编码新手，还在学习。

【问题讨论】：

有很多方法可以做到这一点，一个简单的可能是 cookie
您可以在控制器类中使用会话属性

标签： javascript java html checkbox thymeleaf

【解决方案1】：

有很多方法可以做到这一点。

比较流行的方法之一是使用 JavaScript cookies。在这种方法中，您将设置一个类似 checkbox=true 的 cookie，并在页面刷新时获取该值。

另一种方法是在 JavaScript 中设置location hash 参数，同样在页面加载时读取该参数。

最后，您还可以使用 HTML5 LocalStorage。

这些都是执行此操作的客户端方法。您始终可以使用用 PHP 或您选择的语言编写的 HTML 解析脚本在服务器端执行此操作。

正如我最近在另一个 SO 问题中提到的，运行页面刷新会清除之前在 JavaScript 和 HTML 表单中设置的所有值。一切都会过去。 对于以后阅读本文的人，请不要在 JavaScript 代码中使用页面刷新。这让很多人非常生气，导致他们无法控制地拔掉头发。

【讨论】：

【解决方案2】：

您需要确定一种方法来存储复选框已被选中。通常解决方案涉及本地存储/cookie、会话或通过数据库。

选中该框后，将其存放在某处。同样，如果未选中，您也需要存储该首选项。然后在每个页面加载时，您需要检查是否有保存的首选项，或者您应该转到默认值。

每个存储选项都有好处。 Local storage & cookies 很容易实现。但是它们位于客户端的机器上，因此它们是易变的。如果它是重要信息，请不要仅依赖此方法。会话存储（php 或 HTML5）将在浏览器会话期间持续存在。如果您不需要将数据作为永久选择保留，这将很有帮助。如果您需要它是永久的，则需要将其保存到数据库中。

【讨论】：

【解决方案3】：

您可以使用本地存储来存储用户的复选框选择，并且在页面刷新时您可以从本地存储中检索复选框选择并设置复选框选择。

使用本地存储的简单示例是：

// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

您可以在此处查看有关 w3schools 本地存储的更多详细信息(http://www.w3schools.com/html/html5_webstorage.asp)

根据您的情况，您可以使用本指南 (https://www.sitepoint.com/quick-tip-persist-checkbox-checked-state-after-page-reload/) 使用 jQuery 和本地存储，以便在单击复选框时记住用户的选择，并在页面刷新时检索它们。

【讨论】：

【解决方案4】：

您需要将复选框状态保存到本地存储。因此，浏览器可以在加载/刷新时检查复选框的布尔值 true 或 false。

这是在本地存储中存储复选框状态的教程： https://www.sitepoint.com/quick-tip-persist-checkbox-checked-state-after-page-reload/

【讨论】：