localstorage和sessionstorage可显著减少网络请求，适合缓存静态配置、用户偏好及会话临时状态；需规范命名、避免敏感信息、结合网络状态智能读写，并避开性能陷阱。
直接用 localStorage 和 sessionStorage 缓存高频读取的数据，能显著减少网络请求次数，尤其在网络波动或弱网环境下效果明显。关键不在“存得多”，而在“存得准、用得对”。
优先缓存静态配置与用户偏好
App 启动时需加载的主题色、语言、字体大小、默认城市等非敏感配置项，适合用 localStorage 长期保存。首次加载后，后续启动可直接读取，跳过接口请求。
- 用
JSON.stringify()存对象，JSON.parse()读取，避免类型丢失 - 设置明确 key 命名规范，例如
app_config_v2，便于版本迭代时清理旧数据 - 不存储 token 或密码等敏感字段；如必须暂存认证信息，建议用
sessionStorage并配合登录态校验
用 sessionStorage 管理单次会话临时状态
在混合开发中，WebView 页面跳转频繁，比如从列表页进详情页再返回，表单草稿、筛选条件、滚动位置等只需维持当前标签页生命周期的数据，应交给 sessionStorage。
- 它天然隔离多窗口/多 Tab，避免不同页面间状态互相污染
- 例如用户在搜索页输入关键词但未提交，切到其他页面再返回，仍可恢复输入内容
- 关闭页面即自动清空，无需手动调用
.clear()，降低内存泄漏风险
结合网络状态做智能读写策略
移动端网络不稳定，不能只依赖缓存，要主动判断是否可用，并动态切换数据源。
- 用
navigator.onLine监听联网状态，在离线时强制读取 localStorage 数据并提示“当前为离线模式” - 写入前先检查容量：若
localStorage.length > 100，考虑清理过期项（如加时间戳字段） - 对关键操作（如提交订单），采用“先本地存、再发请求、成功后删缓存”的三步法，保障数据不丢
避开常见性能陷阱
WebStorage 虽快，但滥用反而拖慢渲染或引发异常。
- 单条数据别超 2MB；超过建议改用 IndexedDB
- 避免在
for循环里反复调用getItem()，可一次性读出整个对象再解构使用 - 不要在 Vue/React 的响应式数据中直接绑定
localStorage.getItem()，应封装成 computed 或 useStorage Hook 统一管理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
