跨标签页多条件筛选需用localStorage+storage事件手动同步，并通过FormData采集还原表单值，否则各页状态隔离导致结果不一致。直接submit会刷新页面，preventDefault仅限本页生效，FormData又不持久；必须用data-sync映射、过滤空值、JSON安全序列化数组、还原时触发change事件并联动URL参数。
跨标签页的多条件筛选无法自动同步，必须靠 localStorage + storage 事件手动桥接状态，并用 FormData 统一采集和还原表单值——否则两个标签页各自提交、各自筛选，结果完全不一致。
为什么直接用 form.submit() 不行
form 提交会触发页面刷新或跳转，破坏当前筛选上下文；即使改成 e.preventDefault()，也只影响本页，其他同源标签页对表单值变化毫无感知。更关键的是：FormData 是运行时快照，不持久，关掉标签页就丢。
- 点击「筛选」按钮后，仅本页 DOM 更新，另一标签页仍显示旧结果
- 用户在标签页 A 改了价格区间，在标签页 B 点击「重置」，A 的输入框不会清空
- 没监听
storage事件，导致其他页写入后本页 UI 完全不同步
怎么用 localStorage 存多条件并保持语义准确
不能把整个 form 对象塞进 localStorage，它只接受字符串；也不能存 JSON.stringify(form)，因为 form 是 DOM 元素，序列化后是空对象。正确做法是用 FormData 提取键值对，再存为纯数据结构。
- 读取时用
const formData = new FormData(form)，再转成对象：Object.fromEntries(formData.entries()) - 写入前过滤空值：
if (value !== "" && value != null)，避免price_min=""这类无效条件污染筛选逻辑 - key 命名为
filter-state而非form-data，明确用途，避免和其他业务状态冲突 - checkbox 多选时，
formData.getAll("brand")返回数组，存之前确保 JSON 序列化安全：JSON.stringify(brandValues)
storage 事件怎么同步多条件并安全还原 UI
storage 事件只在其他同源标签页修改 localStorage 时触发，且不包含变更详情——你得自己读 localStorage.getItem("filter-state")，再逐项赋值。还原不是“重填表单”，而是模拟用户交互：设 el.value、触发 input 或 change 事件，让第三方组件（如日期选择器）也能响应。
立即学习“前端免费学习笔记（深入）”；
- 还原
<input type="number">用el.value = Number(storedValue)，别用字符串赋值导致类型错乱 - 还原
<input type="checkbox">时，先清空所有同名 checkbox 的checked，再根据存储的数组值循环设置：checkboxes.forEach(cb => cb.checked = storedBrands.includes(cb.value)) - 还原后手动触发
el.dispatchEvent(new Event("change", { bubbles: true }))，确保监听了 change 的 JS 逻辑（比如联动下拉）能执行 - 注意：storage 事件不会在触发页自身触发，所以每次点击「应用筛选」都要先本地更新 UI，再写
localStorage，否则本页看起来“慢半拍”
URL 同步和初始加载容易漏的关键点
用户复制链接发给别人，或刷新页面后筛选条件丢失，往往是因为只做了 localStorage 同步，却没处理 URL 参数。两者要联动：URL 用于分享和 SEO，localStorage 用于跨页实时同步。
- 初始化时优先从 URL searchParams 读值（
new URLSearchParams(window.location.search)），再 fallback 到localStorage，保证直链可访问 - 每次筛选变更后，用
history.replaceState()更新 URL，但不要用pushState避免历史栈爆炸 - URL 参数名必须和
name属性严格一致，比如price_min，不能写成minPrice，否则FormData无法对齐 - 服务端渲染（SSR）页面首次加载时，DOM 已含默认值，但 JS 还未执行，需在
DOMContentLoaded后立即比对 URL / localStorage 并同步 UI，否则出现“闪动”
