本文详解为何 `window.location.href` 跳转后 `localstorage` 读取失效，并提供完整、可靠的跨页状态保持方案，包括正确设置键名、避免布尔值误用、确保 dom 就绪及兼容性处理。
在 Web 开发中，常希望通过 localStorage 在页面跳转后持久化用户操作（如复选框选中状态），但许多开发者会遇到：跳转前已调用 setItem()，跳转后 getItem() 却返回 null 或无法生效。根本原因并非 localStorage 失效，而是代码执行时机与作用域理解偏差——window.location.href = "/testpage.html" 是同步跳转，当前页面（如 x.html）后续 JS 代码将立即终止执行，所有逻辑必须在跳转前完成写入；而读取逻辑必须放在目标页（testpage.html）的上下文中执行。
此外，原代码存在两个关键缺陷，需一并修正：
- 键名错误：names[i].checked 返回布尔值 true/false，作为 localStorage 键名会导致所有复选框共用同一 key（如 "true"），无法区分不同选项；
- DOM 操作过早：$(document).ready() 中直接用 setAttribute('checked', 'checked') 在现代浏览器中可能不触发 UI 更新，应优先使用 .checked 属性赋值。
✅ 正确做法如下：
✅ 步骤 1：在源页面（如 x.html）安全写入 localStorage
为每个复选框使用唯一标识符（如 name + value 或 id）作为 key，避免布尔值冲突：
<!-- x.html -->
<input type="checkbox" name="names" value="user1" onchange="submit(this)" />
<input type="checkbox" name="names" value="user2" onchange="submit(this)" />
<input type="checkbox" name="names" value="user3" onchange="submit(this)" />
<script>
function submit() {
const checkboxes = document.querySelectorAll('input[name="names"]');
checkboxes.forEach(cb => {
// 使用 value 作为唯一 key，存储布尔状态
localStorage.setItem(`checkbox_${cb.value}`, cb.checked);
});
window.location.href = "/testpage.html";
}
</script>✅ 步骤 2：在目标页面（testpage.html）读取并还原状态
确保 DOM 加载完成后再操作，并使用 .checked = true/false 而非 setAttribute：
<!-- testpage.html -->
<input type="checkbox" name="names" value="user1" />
<input type="checkbox" name="names" value="user2" />
<input type="checkbox" name="names" value="user3" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
const checkboxes = document.querySelectorAll('input[name="names"]');
checkboxes.forEach(cb => {
const key = `checkbox_${cb.value}`;
const saved = localStorage.getItem(key);
if (saved !== null) {
cb.checked = saved === 'true'; // localStorage 存的是字符串，需转换
}
});
});
</script>⚠️ 重要注意事项：
- localStorage 是同源（协议+域名+端口）隔离的，确保跳转前后 URL 同源；
- 避免在 onchange 中频繁写入 localStorage（可节流），但本例中仅跳转前一次性写入，性能无虞；
- 若需清除状态（如用户取消操作），可在跳转前调用 localStorage.removeItem(key) 或跳转后统一清理；
- 原生 JS 替代 jQuery 写法（推荐轻量项目）：
document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('input[name="names"]').forEach(cb => { const val = localStorage.getItem(`checkbox_${cb.value}`); if (val !== null) cb.checked = val === 'true'; }); });
通过以上结构化实现，即可稳定实现“跳转不忘选中状态”，兼顾可维护性与浏览器兼容性。
