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

前言在我们博客项目中我们使用过 localStorage 做主题缓存、数据持久化。但浏览器存储体系包含三种localStorage、sessionStorage、Cookie。90%新人只会用 localStorage不知道三种存储的区别什么时候用哪个存储大小、生命周期、是否随请求发送项目真实业务场景选型本篇高质量完整吃透浏览器本地存储补齐前端存储体系优化博客项目缓存逻辑面试高频题一网打尽。一、三种存储核心区别面试必背表格特性localStoragesessionStorageCookie生命周期永久存储手动删除才消失会话级关闭页面立即清空可设置过期时间默认会话级存储大小5MB5MB4KB极小是否随请求发送不发送不发送每次请求自动携带访问权限同域名所有页面共享当前页面独享域名路径限制用途本地持久化缓存临时页面数据登录态、令牌、用户标识二、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 传统方案全部依赖 CookieCookie 设置简单示例document.cookie usernamezhangsan; max-age3600; path/五、项目选型规范开发直接照抄永久本地配置、主题、缓存数据 → localStorage页面临时数据、关闭即清空 → sessionStorage用户登录、后台鉴权、请求携带参数 → Cookie六、面试高频问答1. localStorage 刷新会丢失吗不会永久保存清除缓存、手动删除才会丢失。2. sessionStorage 刷新保留吗刷新页面保留关闭标签页彻底清空。3. 为什么 Cookie 不能存大量数据只有4KB且每次请求都会携带过大导致请求头臃肿、网络变慢。4. 三者哪个最安全都可被前端读取无法存敏感密码敏感数据必须存后端。七、本篇结语本地存储是前端业务开发100%高频使用的能力。本篇彻底补齐浏览器存储体系让你的博客项目缓存逻辑更加规范、专业同时拿下一套完整面试考点。