如何在跨页面间持久化保存并恢复复选框状态（基于 localStorage）

本文介绍使用 localStorage 在两个独立 HTML 页面间传递复选框选中状态：第一页保存用户选择，第二页读取并动态渲染对应内容，无需表单提交或服务端参与。

在前端开发中，经常会遇到这样一个场景：用户在一个页面勾选了几个选项，跳转到另一个页面后，这些选中的状态还能原封不动地保留下来。由于浏览器页面之间默认不共享 DOM 和 Ja vaScript 执行环境，直接通过变量传递是走不通的。这时候，localStorage 就成了最顺手的选择——它支持跨会话、同源持久化存储，操作简单，兼容性也不错（IE8 以上和所有现代浏览器都支持）。

✅ 实现原理简述

• Page 1（设置页）：监听复选框的变化，把选中的值（比如 "red"、"green"）以数组形式存入 localStorage，键名设为 'myColors'；
• Page 2（展示页）：页面加载时读取这个键值，解析成数组，动态生成对应的 .box 元素，插入到指定容器（如
  ）中；
• 整个过程纯客户端完成，没有网络请求，不依赖 Cookie，也不需要后端参与。

? Page 1 示例代码（保存状态）

        
     red     green     blue  
  

? Page 2 示例代码（读取并渲染）

⚠️ 注意事项与最佳实践

• 同源限制：localStorage 只在相同协议、域名和端口下共享，所以两个页面的 URL 必须域名一致（比如都跑在 http://localhost:8080/ 下），否则数据拿不到；
• 数据清理：如果需要重置状态，可以在 Page 1 中调用 localStorage.removeItem('myColors')，或者在 Page 2 加个“清空”按钮；
• 健壮性增强：示例里用了 JSON.parse(... || '[]') 来防止 null 解析报错，生产环境建议封装成工具函数，避免到处重复写；
• 替代方案对比：
  • sessionStorage：只存活在当前标签页，关闭就丢失，不适合跨页面持久化；
  • URL 参数（?color=red&color=green）：适合传递少量简单值，但容易被截断、不安全、维护起来也麻烦；
  • Cookies：需要手动设置过期时间，大小只有 4KB，而且每次请求都会自动发送，非必要不推荐。

总的来说，localStorage 能让你在零后端依赖的前提下，轻松实现轻量、可靠、用户体验友好的跨页面状态同步——这算得上是现代静态站点和单页应用开发中，一个非常值得掌握的核心技巧。