本文介绍使用 localstorage 实现多复选框状态持久化的方法，避免搜索、提交或刷新导致已选状态丢失，兼容 php 动态渲染场景，无需服务端修改即可前端独立完成。
本文介绍使用 localstorage 实现多复选框状态持久化的方法，避免搜索、提交或刷新导致已选状态丢失，兼容 php 动态渲染场景，无需服务端修改即可前端独立完成。
在基于 PHP 的商品筛选表单中，用户常需多次勾选不同商品（如加入购物车），但每次提交搜索（$_POST['query'] 触发重载）后，所有复选框都会重置为初始状态——这严重影响交互体验。根本原因在于：HTML 表单提交会触发整页刷新，而原生 checkbox 不具备跨请求记忆能力。解决方案不应依赖服务端存储（如 Session）增加耦合，而应采用现代浏览器提供的客户端持久化机制：localStorage。
✅ 推荐方案：使用 localStorage 持久化复选框状态
相比 Cookie，localStorage 更适合此场景：容量更大（通常 5MB）、无网络传输开销、API 简洁且天然支持结构化数据（配合 JSON.stringify/JSON.parse）。
步骤一：为每个 checkbox 添加唯一标识（关键！）
PHP 渲染时，需确保每个 <input type="checkbox"> 具有稳定且可追溯的 id 属性（不能全用 id="mycheckbox"，否则冲突）。推荐结合商品名称生成唯一 ID（注意转义特殊字符）：
<?php // 替换原始 echo 中的 <input ... > 行：
$id_safe = preg_replace('/[^a-zA-Z0-9_\-]/', '_', $row['itemName']); // 安全化 ID
echo '<input type="checkbox" id="prod_' . htmlspecialchars($id_safe) . '" class="checkbox" name="prodid[]" value="' . htmlspecialchars($row['itemName']) . '" onchange="saveCheckboxState(this)">';
// 后续隐藏域等保持不变...
?>
⚠️ 注意：
id必须全局唯一，且仅含字母、数字、下划线、短横线；htmlspecialchars()防止 XSS。
步骤二：前端状态保存与恢复脚本
将以下 JavaScript 放置于页面
