核心是将activeconditions映射为query string并用history.replacestate同步url，优先从url读取而非localstorage，多选条件拼为标准键值对，清除时彻底删除键，data-*属性需原子化、小写短横线命名，dom状态更新必须用setattribute/removeattribute，表单控件需同步property与attribute。
data属性筛选条件怎么持久化到 URL
筛选状态不保存，用户刷新就丢，这是最常被忽略的一环。核心是把 activeConditions 映射成 query string，再用 history.replaceState() 同步，而不是靠 localStorage 独立存。
常见错误是只存 JS 数组，比如 localStorage.setItem("filters", JSON.stringify(activeCategories))，结果用户分享链接、微信打开、浏览器后退时全失效。
- 读取时优先从 URL searchParams 解析：
new URLSearchParams(location.search).get("color")，不是从 localStorage 读 - 写入时用
history.replaceState(null, "", `${location.pathname}?${params.toString()}`)，避免触发页面 reload - 多选条件（如颜色+尺寸）拼成
?color=red&size=M，别用数组语法?color[]=red&color[]=blue——IE11 和部分安卓 WebView 不认 - 空值要显式清除：用户取消勾选“红色”，URL 里就不能还留着
color=red，得删掉整个键
如何用 data-* 属性安全存筛选配置项
很多人直接往 <div class="filter-control"> 上写 <code>data-config='{"field":"color","type":"multi"}'，但这样既难调试又容易解析失败。真正安全的做法是拆成原子级 data 属性。
关键不是“能不能存 JSON”，而是“JS 读取时是否可控、可 debug、可降级”。dataset 对含数字或大写的 key 静默失败，getAttribute() 才是兜底方案。
- 用
data-field="color"、data-type="multi"、data-default="true"分开存，不用 JSON 字符串 - 读取统一走
el.getAttribute("data-field")，不依赖el.dataset.field - 布尔语义字段（如
data-required="true"）判断必须写el.getAttribute("data-required") === "true"，别用Boolean(el.dataset.required) - 如果后端动态输出 HTML，确保所有 data-* 名称全小写+短横线，比如
data-api-endpoint，别生成data-apiEndpoint或data_api_endpoint
筛选条件变更后如何批量更新 DOM 元素的 data 属性
筛选不是只改显示/隐藏，很多交互依赖元素自身的 data 状态，比如“已选中”按钮要高亮、“当前筛选项”要禁用。直接操作 dataset 不会真实写入 DOM，CSS 选择器和后续 JS 读取都拿不到新值。
最稳的方式是绕过 dataset，全部用 setAttribute() 和 removeAttribute()。
- 设置状态：
el.setAttribute("data-filter-active", "color-red")，不是el.dataset.filterActive = "color-red" - 清除状态：
el.removeAttribute("data-filter-active")，不是delete el.dataset.filterActive - 批量更新多个属性时，用
Object.entries(config).forEach(([k, v]) => el.setAttribute(`data-${k}`, v)) - CSS 里想响应变化，必须写带引号的选择器：
[data-filter-active="color-red"] { opacity: 0.6; }，不加引号在部分浏览器下不匹配
为什么筛选重置后 checkbox 状态没同步
点“全部清空”按钮，商品列表恢复了，但左侧筛选项的 checkbox 还勾着——这不是 DOM 没更新，是 input 元素的 checked 属性和实际 DOM 属性不同步。
HTML 表单控件的 checked 是 property（JS 可读写），而 checked 属性（attribute）只在初始渲染时起作用。手动设 el.checked = false 不会自动删掉 checked attribute，导致下次用 el.hasAttribute("checked") 判断出错。
- 重置时，对每个 checkbox 要同时操作：
el.checked = false; el.removeAttribute("checked"); - 监听 change 事件时，别只读
el.checked，要用el.getAttribute("checked") !== null做容错（比如服务端渲染带 checked 属性） - 如果用
el.toggleAttribute("checked")，注意 IE11 不支持，得 fallback 到el.hasAttribute("checked") ? el.removeAttribute("checked") : el.setAttribute("checked", "")
真正麻烦的从来不是“怎么让商品消失”，而是“怎么让消失这件事，在 URL、DOM 属性、表单控件、CSS 选择器、历史栈之间全都对得上”。漏掉任意一环，用户就会觉得“明明点了，怎么没反应”。
