localStorage仅用于持久化筛选条件而非执行筛选，需在输入/选择时实时存入清洗后的表单数据，并在页面加载时同步DOM与JS状态后触发过滤函数。
本地存储（localStorage）本身不参与筛选逻辑，它只负责“记住用户上次填了什么”。筛选动作仍由 JavaScript 执行，而 localStorage 的作用是让页面刷新后筛选条件不丢失、URL 不同步时状态仍可恢复。
怎么把筛选条件存进 localStorage
不能等用户点“搜索”才存，得在每次输入/选择后立刻持久化。否则刷新就丢，体验断层。
- 监听所有筛选控件的
input（文本框）、change（下拉、复选框）事件 - 用
new FormData(form)一次性读取全部有效值，比手动遍历form.elements更可靠 - 对每个键值对做清洗：空字符串、
null、未选中的checkbox自动跳过，避免存一堆无意义的"brand": "" - 用
JSON.stringify()转成字符串再存，别直接存FormData对象（它不可序列化） - 示例关键代码：
function saveFilters() {<br> const data = Object.fromEntries(new FormData(filterForm).entries());<br> const cleaned = Object.fromEntries(<br> Object.entries(data).filter(([_, v]) => v !== '' && v != null)<br> );<br> localStorage.setItem('filterState', JSON.stringify(cleaned));<br>}
页面加载时怎么从 localStorage 恢复筛选状态
不是简单地把值塞回 input，而是要触发一次完整的“状态同步”，否则 DOM 值变了但 JS 里没感知，后续过滤会错。
- 先检查
localStorage.getItem('filterState')是否存在且非空 - 用
JSON.parse()还原对象，再逐个赋值到对应form.elements[name] - 特别注意多选
：需遍历options并设option.selected = true，不能只改value - 复选框要循环设置
checked，因为FormData只返回已勾选项，但 DOM 状态必须显式还原 - 赋值完必须手动调用一次
filterTable()或提交函数，否则 UI 显示旧数据
为什么不能只靠 localStorage 实现筛选逻辑
localStorage 是纯存储介质，没有计算能力。常见误解是“存了条件就能自动过滤”，其实它连“当前表格有多少行”都不知道。
- 筛选行为仍依赖 JS 遍历数据数组或 DOM 行，
localStorage只提供初始参数 - 如果数据来自后端分页，
localStorage存的只是前端传过去的 query 参数，真正执行过滤的是后端 SQL - 多个标签页共用同一
localStorage，A 页改了条件，B 页不会自动刷新——得靠storage事件监听并手动响应 - 敏感字段（如价格区间、权限标识）不应存在
localStorage，可能被 XSS 读取；需服务端二次校验
最易被忽略的一点：清空筛选时，不仅要重置表单 DOM，还要同步调用 localStorage.removeItem('filterState')。否则用户点了“重置”却刷新页面又恢复旧条件，会误以为功能失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
