localstorage 安全存储用户偏好需严守边界：仅存用户主动设置、纯前端ui、需跨会话持久化的数据（如主题、字体大小），禁存敏感信息；统一结构存储、异常兜底、防fouc、兼容隐私模式降级。
LocalStorage 本身不提供安全性，所谓“安全存储用户偏好”不是靠加密实现的，而是靠合理界定什么该存、怎么存、谁来读。真正需要保护的数据（如 token、密码、身份信息）根本不该进 localStorage；而主题、语言、字体大小这类纯 UI 偏好，明文存也没风险——关键在设计边界和防御异常。
只存真正该存的偏好项
用户偏好必须同时满足三个条件才适合存 localStorage：
- 由用户主动设置（不是后端下发或自动探测）
- 纯前端 UI 行为（不涉及身份、权限、凭证）
- 需跨会话持久化（关页再开仍保持）
例如：深色模式开关、缩略图尺寸、搜索密度、视频解码器排序、全屏默认状态——这些可以存。API 地址、灰度开关、登录态、设备 ID、JWT token —— 这些一律禁用 localStorage，token 应走 httpOnly Cookie，开关类应由后端控制。
结构统一 + 异常兜底
别为每个设置单独建 key（如 theme、fontSize），全部打包成一个对象，用固定键名存储：
- 写入：
localStorage.setItem("userPreferences", JSON.stringify({ theme: "dark", size: "120px", density: "compact" })) - 读取必须加 try/catch 和默认值：
const prefs = JSON.parse(localStorage.getItem("userPreferences") || "{}") - 首次访问或数据损坏时，直接用默认对象（如
{ theme: "light", size: "80px", density: "normal" }），不写空对象也不报错
防 FOUC + 立即同步 UI
页面一打开就要是用户上次选的状态，不能等 JS 加载完才改样式，否则会闪屏：
- 在
里放内联脚本，读取后立刻设 class 或 CSS 变量：<script>const d = localStorage.getItem("searchDensity") || "normal"; document.documentElement.className += ` search-density-${d}`;</script> - 用户点切换按钮时，立即写入 localStorage 并同步 DOM：
localStorage.setItem("theme", "dark"); document.body.className = "dark"; - 不要等到
beforeunload才保存——操作即生效
兼容隐私模式与降级方案
Safari 无痕、部分国产浏览器会禁用 localStorage，甚至抛出 SecurityError：
- 初始化时先检测可用性：
try { localStorage.setItem("__test__", "ok"); } catch { /* 切换为内存对象 const memoryStore = {} */ } - 所有读写操作封装成函数，内部自动 fallback：
get(key, def) { return storageAvailable ? JSON.parse(localStorage.getItem(key) || "{}") : memoryStore[key] ?? def; } - 降级后功能不中断，只是关闭页面后丢失设置——对偏好类场景可接受
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
