如何让Bookmarklet操作CheckboxGrid的勾选状态修改可持久保留

问题诊断 #

1. 逻辑漏洞 #

你存储勾选状态时用JSON.stringify序列化了布尔数组，但读取的时候没有调用JSON.parse反序列化，直接把序列化后的字符串当作字符数组遍历，虽然部分场景下能碰巧匹配到t/f字符，但非常容易出现索引错位、赋值错误的问题。

2. 前端框架状态不同步 #

当前绝大多数Web应用都使用React/Vue/Angular这类MVVM框架开发，你直接修改DOM元素的checked属性只会更新视觉表现，不会触发框架的状态更新逻辑：

• 框架内部维护的表单状态还是修改前的旧值
• 复选框绑定的change/input事件没有被触发，对应的状态同步逻辑不会执行
  后续只要页面触发任意重渲染（比如点击保存、手动操作其他复选框），框架就会用内部旧状态覆盖你修改的DOM属性，导致配置回退。

修复方案 #

可以通过Bookmarklet实现符合预期的效果，只需要修正逻辑漏洞，并且主动触发状态变更事件即可。

修正后的第二个Bookmarklet代码 #

javascript: (function(){
  // 反序列化得到布尔值数组，修复原代码未解析的问题
  const savedStates = JSON.parse(sessionStorage.getItem('val') || '[]');
  const checkboxes = document.querySelectorAll('.CheckboxGrid');
  checkboxes.forEach((checkbox, index) => {
    if (index >= savedStates.length) return;
    // 更新DOM选中状态
    checkbox.checked = savedStates[index];
    // 主动触发change事件，通知框架更新内部状态
    checkbox.dispatchEvent(new Event('change', { bubbles: true, cancelable: true }));
  });
})();

补充说明 #

如果修改后仍然出现回退，可尝试将触发的事件从change替换为input，部分框架会监听input事件做状态同步。

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