Chrome和Edge中localStorage无法保存复选框状态问题求助

你的代码核心问题出在load函数中对textarea值的处理——错误地使用了JSON.parse解析普通字符串，这会导致代码执行中断，进而无法完成checkbox状态的恢复。

具体原因 #

localStorage仅支持存储字符串类型数据：

• 保存checkbox状态时，checkbox.checked是布尔值，localStorage会自动将其转为"true"或"false"字符串，后续用JSON.parse解析是安全的（因为"true"/"false"属于合法的JSON布尔值）。
• 保存textarea值时，textarea.value本身就是字符串，直接存入localStorage后，取出来仍然是字符串。此时用JSON.parse解析会存在两个问题：
  1. 如果文本包含JSON语法不兼容的字符（比如未转义的双引号），会直接抛出SyntaxError，导致load函数中断执行，checkbox的状态赋值代码根本不会运行。
  2. 即使文本是简单字符串（如示例中的"Hello, world!"），JSON.parse虽然能正常解析，但属于多余操作，且存在潜在风险。

修复后的代码 #

JavaScript部分 #

function save() {
  var checkbox = document.getElementById('checkbox1zaal1');
  var textarea = document.querySelector('textarea');
  localStorage.setItem('checkbox1zaal1', checkbox.checked);
  localStorage.setItem('box', textarea.value);
}

function load() {
  var checked = JSON.parse(localStorage.getItem('checkbox1zaal1')) || false;
  document.getElementById("checkbox1zaal1").checked = checked;
  // 移除多余的JSON.parse，直接获取存储的字符串值
  document.querySelector('textarea').value = localStorage.getItem('box') || 'Hello, world!';
}

function wis() {
  localStorage.clear();
  // 先清除localStorage再刷新，避免刷新后加载旧数据
  location.reload();
}

load();

HTML部分 #

<input type="button" id="ReserveerButton1" value="save" onclick="save()" />
<input type="button" id="Wisbutton1" value="delete" onclick="wis()" />
<input type="checkbox" id="checkbox1zaal1">
<textarea>Hello, world!</textarea>

额外优化建议 #

1. 自动保存状态：可以监听beforeunload事件，在用户关闭/复制标签页时自动保存，无需手动点击保存按钮：

window.addEventListener('beforeunload', save);

2. 初始化默认值：添加默认值判断，避免localStorage无数据时元素状态异常（比如checkbox变成null、textarea为空），这已经在修复后的代码中体现。

内容的提问来源于stack exchange，提问作者Mori