前言
在我们博客项目中，我们使用过 localStorage 做主题缓存、数据持久化。
但浏览器存储体系包含三种：localStorage、sessionStorage、Cookie。
90%新人只会用 localStorage，不知道：
三种存储的区别
什么时候用哪个
存储大小、生命周期、是否随请求发送
项目真实业务场景选型
本篇高质量完整吃透浏览器本地存储，补齐前端存储体系，优化博客项目缓存逻辑，面试高频题一网打尽。
一、三种存储核心区别（面试必背表格）
特性 | localStorage | sessionStorage | Cookie |
|---|---|---|---|
生命周期 | 永久存储，手动删除才消失 | 会话级，关闭页面立即清空 | 可设置过期时间，默认会话级 |
存储大小 | 5MB | 5MB | 4KB（极小） |
是否随请求发送 | 不发送 | 不发送 | 每次请求自动携带 |
访问权限 | 同域名所有页面共享 | 当前页面独享 | 域名+路径限制 |
用途 | 本地持久化缓存 | 临时页面数据 | 登录态、令牌、用户标识 |
二、localStorage 实战封装（博客项目升级）
原生API需要手动JSON序列化、捕获异常，我们封装通用本地存储工具
// 存储 export const setLocal = (key,value) => { localStorage.setItem(key,JSON.stringify(value)) } // 获取 export const getLocal = (key) => { const data = localStorage.getItem(key) return data ? JSON.parse(data) : null } // 删除 export const removeLocal = (key) => { localStorage.removeItem(key) }
适配对象、数组、普通数据，项目统一调用，简洁稳定。
三、sessionStorage 适用场景
适合临时数据：
本次页面打开的搜索临时记录
页面临时表单草稿
刷新保留、关闭消失的临时状态
四、Cookie 核心知识点（登录态原理）
Cookie 最大特点：浏览器每次请求后端都会自动携带
所以登录态、用户验证、token 传统方案全部依赖 Cookie
Cookie 设置简单示例
document.cookie = "username=zhangsan; max-age=3600; path=/"
五、项目选型规范（开发直接照抄）
永久本地配置、主题、缓存数据 → localStorage
页面临时数据、关闭即清空 → sessionStorage
用户登录、后台鉴权、请求携带参数 → Cookie
六、面试高频问答
1. localStorage 刷新会丢失吗？
不会，永久保存，清除缓存、手动删除才会丢失。
2. sessionStorage 刷新保留吗？
刷新页面保留，关闭标签页彻底清空。
3. 为什么 Cookie 不能存大量数据？
只有4KB，且每次请求都会携带，过大导致请求头臃肿、网络变慢。
4. 三者哪个最安全？
都可被前端读取，无法存敏感密码，敏感数据必须存后端。
七、本篇结语
本地存储是前端业务开发100%高频使用的能力。
本篇彻底补齐浏览器存储体系，让你的博客项目缓存逻辑更加规范、专业，同时拿下一套完整面试考点。