应使用localstorage存字符串标识密度级别（如"compact"），页面加载前通过内联脚本读取并设class防fouc，点击切换时立即写入并同步dom，异常时降级兜底。
直接用 localStorage 存一个数字或字符串标识密度级别（如 "compact"、"normal"、"spacious" 或 24、32、48），页面加载时立即读取并应用到搜索结果容器，切换时实时写入——关键在“及时同步 DOM”和“防 FOUC”，而不是等用户关页才存。
怎么存：选轻量结构，避免对象嵌套
搜索密度偏好本质是单一维度配置，无需复杂对象。推荐用字符串键值对，清晰且不易出错：
- 存为字符串：
localStorage.setItem("searchDensity", "compact")或localStorage.setItem("searchDensity", "32") - 不建议存对象：
localStorage.setItem("prefs", JSON.stringify({searchDensity: "compact"}))——徒增解析成本，除非你已统一管理所有偏好 - 值必须是字符串；若用数字，读取后需手动转回：
parseInt(localStorage.getItem("searchDensity"))
怎么读：页面渲染前就生效，防内容闪烁
FOUC（样式闪动）常因 JS 加载晚于 CSS 导致。解决方法是在 内加一段内联脚本，读取后立刻设 class 或 style：
- 例如：
<script>const d = localStorage.getItem("searchDensity") || "normal"; document.documentElement.className += ` search-density-${d}`;</script> - 对应 CSS 中定义：
.search-density-compact .search-result { line-height: 1.2; margin-block: 0.25rem; } - 别等到
DOMContentLoaded才处理——那时 HTML 已渲染，闪动已发生
怎么同步：操作即保存，不依赖页面卸载
用户点击“紧凑视图”按钮后，应立刻写入 localStorage 并更新当前界面，不能拖到 beforeunload：
- 绑定点击事件：
btn.addEventListener("click", () => { localStorage.setItem("searchDensity", "compact"); applyDensity("compact"); }) -
applyDensity()函数集中处理 DOM 更新：改 class、重设 CSS 自定义属性、调整 grid gap 等 - 登出或重置设置时，调用
localStorage.removeItem("searchDensity")，避免残留无效值
怎么兜底：兼容异常场景，不崩也不误判
隐私模式、存储配额满、手动清空等都可能导致 getItem 返回 null。需主动 fallback：
- 判断逻辑写成：
const density = localStorage.getItem("searchDensity") ?? "normal"（ES2020+）或const density = localStorage.getItem("searchDensity") === null ? "normal" : localStorage.getItem("searchDensity") - 捕获写入异常：
try { localStorage.setItem("searchDensity", value); } catch (e) { console.warn("密度偏好保存失败", e); } - iOS Safari 隐私模式下 localStorage 可能静默失效，此时可降级为内存变量暂存，下次有写入能力再持久化
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
