第32篇：前端本地存储全解——Cookie、localStorage、sessionStorage 区别与实战

前言

在我们博客项目中，我们使用过 localStorage 做主题缓存、数据持久化。

但浏览器存储体系包含三种：localStorage、sessionStorage、Cookie。

90%新人只会用 localStorage，不知道：

• 三种存储的区别

• 什么时候用哪个

• 存储大小、生命周期、是否随请求发送

• 项目真实业务场景选型

本篇高质量完整吃透浏览器本地存储，补齐前端存储体系，优化博客项目缓存逻辑，面试高频题一网打尽。

一、三种存储核心区别（面试必背表格）

二、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%高频使用的能力。

本篇彻底补齐浏览器存储体系，让你的博客项目缓存逻辑更加规范、专业，同时拿下一套完整面试考点。