多条件筛选状态需用 JavaScript 配合 localStorage 或 sessionStorage 实现；form 提交后状态丢失因整页刷新重置 DOM；控件须有稳定 name/id 才能映射存储数据；localStorage 适合长期记忆，sessionStorage 适合临时流程；还原须在 DOM 渲染完成后执行。
多条件筛选状态不能靠 HTML 自身保存，必须用 JavaScript 配合 localStorage 或 sessionStorage 实现；选哪个取决于你是否需要跨标签页共享（localStorage）还是仅限本次会话（sessionStorage）。
为什么 form 提交后筛选状态全丢了
HTML 表单提交默认触发整页刷新，所有 DOM 状态重置，checkbox、select、input 的值不会自动保留。浏览器不记录“用户上次选了什么”，除非你主动存。
- 常见错误现象：
POST后页面重载，所有下拉框回到默认项，复选框全部取消勾选 - 根本原因：没有在提交前捕获并持久化状态，也没有在页面加载后还原
- 关键前提：每个筛选控件必须有稳定、可识别的
name或id（如name="category"、id="filter-price"），否则无法映射回存储的数据
用 localStorage 保存和还原多条件值（推荐长期记忆）
localStorage 适合用户希望“下次打开还记着我选过什么”的场景，比如商品筛选偏好、表格列显示设置。它容量大（约 5MB）、不随请求发送、API 直接。
- 保存时机：在用户操作后立即执行，例如
select的change事件、input的input事件中调用localStorage.setItem() - 保存结构：建议用对象封装，再转成 JSON 字符串，例如：
localStorage.setItem('filterState', JSON.stringify({ category: 'electronics', price_max: '5000', in_stock: true })) - 还原时机：放在
DOMContentLoaded或框架的初始化钩子（如 Vuemounted）里，先getItem，再遍历对象属性，逐个设回对应控件的value或checked - 注意点：还原时要检查控件是否存在、选项值是否仍有效（避免因后端数据变更导致
value="xyz"找不到对应option）
用 sessionStorage 保存联动筛选器状态（适合临时流程）
多级联动（如省→市→区）常需记住“当前展开到第几级”“已选哪些值”，但不希望关掉标签页后还在——这时 sessionStorage 更合适，它天然隔离、自动清理。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
立即学习“前端免费学习笔记（深入）”；
- 必须等异步数据加载完成后再保存，否则可能存入旧值：比如选“浙江”后请求城市列表，要在
fetch().then()渲染完城市select后，才更新并保存完整状态 - 还原逻辑需分步：先设省，触发城市加载；等城市渲染完，再设市，再触发区县加载；最后设区县——不能一次性全塞进
value，否则 DOM 还没就绪会失败 - 兼容性注意：WebView（尤其老版 Android）可能限制
sessionStorage容量或清空策略，建议加 try/catch 包裹读写操作
FormData 本身不保存状态，但它是采集入口
很多人误以为用 new FormData(form) 就能“记住”筛选条件，其实它只是实时采集当前 DOM 值的一次性快照，不带持久化能力。
- 正确用法：把
FormData当作“取值工具”，配合localStorage使用——先用它获取当前所有非空字段，再存进本地存储 - 空值处理：用
formData.getAll('tag[]')获取多选值，用Object.fromEntries(formData.entries())转对象时注意过滤空字符串（''）和null - 命名陷阱：避免用
name="brand[]"这类 PHP 风格数组名，前端解析麻烦；统一用name="brand"+ 多选select或多个同名checkbox，再用getAll()取值
最易被忽略的点是：状态还原必须在 DOM 渲染完成后执行。PHP 动态生成的表单、Layui 渲染的表格、Vue 异步组件，都可能让 DOMContentLoaded 触发时控件还没挂载。这时候得监听真实就绪信号，比如 Layui 的 table.on('init')、Vue 的 nextTick，或者自己加个 MutationObserver 等目标元素出现。
