浏览器存储实战：localStorage/sessionStorage/cookie 用法详解｜JS 进阶必会篇

【浏览器存储localStorage/sessionStorage/cookie】【前端开发常见场景】从【核心特性与用法】到【落地实操选型】彻底搞懂浏览器存储的最佳用法避开跨tab不同步、容量超限、XSS攻击等高频坑 文章目录一、开篇为什么要关心浏览器存储二、概念扫盲三、localStorage持久化存储3.1 是什么3.2 基本用法3.3 适用场景四、sessionStorage会话级存储4.1 是什么4.2 基本用法4.3 适用场景4.4 常见误区五、cookie会被请求携带的存储5.1 是什么5.2 基本用法5.3 适用场景六、实战场景该用哪个6.1 Token 存储6.2 用户配置主题、语言等6.3 缓存查询条件表格筛选、分页6.4 多步表单的中间状态七、怎么选一张表搞定八、踩坑指南九、小结 本系列专栏导航同学们好我是 Eugene尤金一个拥有多年中后台开发经验的前端工程师~Eugene 发音很简单/juːˈdʒiːn/大家怎么顺口怎么叫就好你是否也有过明明学过很多技术一到关键时候却讲不出来、甚至写不出来你是否也曾怀疑自己是不是太笨了明明感觉会却总差一口气就算想沉下心从头梳理可工作那么忙回家还要陪伴家人。一天只有24小时时间永远不够用常常感到力不从心。技术行业本就是逆水行舟不进则退。如果你也有同样的困扰别慌。从现在开始跟着我一起心态归零利用碎片时间来一次彻彻底底的基础扫盲。这一次我们一起慢慢来扎扎实实变强。不搞花里胡哨的理论堆砌只分享看得懂、用得上的前端干货咱们一起稳步积累真正摆脱“面向搜索引擎写代码”的尴尬。一、开篇为什么要关心浏览器存储日常开发里经常会遇到Token 存哪登录后 token 放在哪、刷新页面怎么不丢用户配置主题、语言、侧边栏收起状态下次打开要记住。列表筛选表格的筛选条件、分页、排序希望刷新后还能保留。这些都要用到浏览器存储。但 localStorage、sessionStorage、cookie 该怎么选场景对应错了就会有跨 tab 不同步、隐私泄露、存不下等问题。下面从概念 → 用法 → 实战场景 → 选型 → 踩坑把三者讲清楚日常该用哪个、为什么这么用、容易踩哪些坑。⬆ 返回目录二、概念扫盲先用一张表看清三者区别特性localStoragesessionStoragecookie生命周期持久化除非手动删除关闭标签页即失效可设置过期时间容量约 5MB约 5MB约 4KB作用域同源下所有页面共享仅当前标签页同源共享可设置 path是否随请求发送否否是每次请求自动带API 风格getItem/setItem同上document.cookie字符串操作一句话记localStorage长期存、全页面共享适合偏好、配置。sessionStorage仅当前标签页、关掉就丢适合临时状态。cookie每次请求都会带上适合需和服务端交互的如认证、会话。⬆ 返回目录三、localStorage持久化存储3.1 是什么localStorage 是持久化存储数据不会过期除非主动删除或用户清除浏览器数据。同源下所有页面共享。⬆ 返回目录3.2 基本用法// 存localStorage.setItem(theme,dark);// 取constthemelocalStorage.getItem(theme);// dark// 删localStorage.removeItem(theme);// 清空所有localStorage.clear();注意只能存字符串。对象需要序列化// 存对象constuserConfig{theme:dark,lang:zh};localStorage.setItem(userConfig,JSON.stringify(userConfig));// 取对象constconfigJSON.parse(localStorage.getItem(userConfig)||{});⬆ 返回目录3.3 适用场景用户主题、语言、侧边栏状态需要持久化的列表筛选、排序、分页表单草稿不敏感数据Token前提是放在合理的安全体系里⬆ 返回目录四、sessionStorage会话级存储4.1 是什么sessionStorage 的生命周期只到当前标签页关闭。新开标签页是新会话数据不共享。⬆ 返回目录4.2 基本用法// 用法和 localStorage 一样sessionStorage.setItem(tempId,abc123);consttempIdsessionStorage.getItem(tempId);sessionStorage.removeItem(tempId);⬆ 返回目录4.3 适用场景当前页的临时数据如多步表单的中间页不希望跨 tab 共享的数据表单防重复提交用的临时标记一些只对当前会话有用的临时 token⬆ 返回目录4.4 常见误区很多人以为 sessionStorage 和“会话”一样关浏览器才清空。实际上关闭标签页→ 数据就没了刷新页面→ 数据还在新开标签页→ 新会话看不到旧数据⬆ 返回目录五、cookie会被请求携带的存储5.1 是什么cookie 是早期方案容量小每次 HTTP 请求会自动带上同域且 path 匹配时。因此常用来存 sessionId、token 等需要和服务端交互的信息。⬆ 返回目录5.2 基本用法cookie 需要手动拼字符串原生 API 不友好// 设置 cookie需手动拼接document.cookietokenabc123; path/; max-age3600;// 1小时过期// 读取 cookieconstcookiesdocument.cookie;// tokenabc123; themedark// 需要自己解析functiongetCookie(name){constmatchdocument.cookie.match(newRegExp((^| )name([^;])));returnmatch?match[2]:null;}getCookie(token);// abc123常用属性说明属性含义path/哪些路径会携带此 cookiemax-age3600多少秒后过期domain.example.com子域名共享Secure仅 HTTPS 传输HttpOnly禁止 JS 访问防 XSS 读 token⬆ 返回目录5.3 适用场景登录凭证sessionId、token尤其是需要服务端校验时与后端交互的会话状态老项目或接口强依赖 cookie 的场景现代项目里很多 token 用 localStorage 存请求时通过Authorization头发送而不再用 cookie。这取决于你的前后端约定和安全方案。⬆ 返回目录六、实战场景该用哪个6.1 Token 存储常见做法有三种方式优点缺点localStorage刷新不丢、跨 tab 共享、实现简单易受 XSS 攻击读走 tokensessionStorage关 tab 即失效相对更安全刷新会丢需配合刷新 token 逻辑cookie (HttpOnly)JS 无法读取防 XSS 偷 token需后端配合设置前后端都要处理建议大部分前后端分离项目用localStorage配合 XSS 防护输入过滤、CSP 等。对安全要求高的项目用HttpOnly cookie由后端设置。仅当前 tab 有效的临时 token用sessionStorage。示例localStorage 存 token// 登录成功后consttokenresponse.data.token;localStorage.setItem(token,token);// 请求拦截器里axios.interceptors.request.use(config{consttokenlocalStorage.getItem(token);if(token){config.headers.AuthorizationBearer${token};}returnconfig;});// 退出登录localStorage.removeItem(token);⬆ 返回目录6.2 用户配置主题、语言等这类配置需要持久化且希望下次打开还是同样的用localStorage// 封装一个简单的配置管理constCONFIG_KEYuserConfig;constdefaultConfig{theme:light,lang:zh,sidebarCollapsed:false};functiongetConfig(){try{constsavedlocalStorage.getItem(CONFIG_KEY);returnsaved?{...defaultConfig,...JSON.parse(saved)}:{...defaultConfig};}catch{return{...defaultConfig};}}functionsetConfig(partial){constconfig{...getConfig(),...partial};localStorage.setItem(CONFIG_KEY,JSON.stringify(config));returnconfig;}// 使用setConfig({theme:dark});constconfiggetConfig();⬆ 返回目录6.3 缓存查询条件表格筛选、分页列表的筛选、排序、分页希望刷新后还能保留用localStorageconstCACHE_KEYuserList_query;// 进入页面时恢复constsavedQueryJSON.parse(localStorage.getItem(CACHE_KEY)||{});this.filterssavedQuery.filters||{};this.paginationsavedQuery.pagination||{page:1,size:10};// 筛选或分页变化时保存functionsaveQuery(filters,pagination){localStorage.setItem(CACHE_KEY,JSON.stringify({filters,pagination}));}// 清空筛选时清除functionclearQuery(){localStorage.removeItem(CACHE_KEY);}⬆ 返回目录6.4 多步表单的中间状态多步表单的中间页只对当前 tab 有效不希望跨 tab 共享用sessionStorage// 第二步填写时保存sessionStorage.setItem(formStep2,JSON.stringify(formData));// 第三步页面加载时恢复conststep2DataJSON.parse(sessionStorage.getItem(formStep2)||{});// 提交成功后清除sessionStorage.removeItem(formStep2);⬆ 返回目录七、怎么选一张表搞定场景推荐理由TokenlocalStorage 或 HttpOnly cookie持久、跨 tab安全要求高用 cookie用户主题、语言、配置localStorage持久化刷新和重开都保留列表筛选、分页、排序localStorage持久化提升使用体验多步表单中间状态sessionStorage仅当前 tab关掉即清空临时防重复提交标记sessionStorage仅当前会话有效需要随请求自动携带的凭证cookie浏览器会自动带上⬆ 返回目录八、踩坑指南坑原因建议存对象报错或乱码只支持字符串用JSON.stringify存JSON.parse取私密模式下 localStorage 可能不可用部分浏览器会限制或清空用 try-catch 包一层失败时降级到内存跨 tab 不同步localStorage 变更不会自动通知其他 tab监听storage事件做同步cookie 超出 4KB单条 cookie 约 4KB 限制大对象改用 localStorage或拆分多个 cookie测试环境数据残留上次测试数据还在测试前localStorage.clear()或单独用测试 keystorage 事件跨 tab 同步当其他 tab 修改了 localStorage当前 tab 会触发storage事件window.addEventListener(storage,(e){if(e.keytheme){// 其他 tab 改了 theme这里同步更新applyTheme(e.newValue);}});注意修改 localStorage 的那个 tab 不会触发只有其他同源页面会收到。⬆ 返回目录九、小结存储方式一句话典型场景localStorage持久、同源共享、不随请求发送用户配置、token、列表筛选缓存sessionStorage当前标签页有效、关掉即丢多步表单、临时标记cookie容量小、随请求自动携带需后端校验的登录凭证记住三点需要持久化、跨 tab用 localStorage仅当前 tab、关掉就丢用 sessionStorage。需要随请求自动携带用 cookie否则优先用 localStorage/sessionStorage。只存字符串对象用JSON.stringify/parse注意容量localStorage 约 5MBcookie 约 4KB。选对存储方式可以少很多莫名其妙的 bug也更符合安全和性能预期。⬆ 返回目录 本系列专栏导航 JS 进阶必会点一、《闭包实战从原理到防抖・节流・缓存JS 进阶必会篇》二、《异步基础Promise async/await 实战JS 进阶必会篇》三、《常用工具函数深拷贝・去重・扁平化手写实战JS 进阶必会篇》四、《事件循环与宏微任务log 顺序实战解析JS 进阶必会篇》五、《设计模式实战单例・发布订阅・策略 JS 轻量用法JS 进阶必会篇》六、《浏览器存储实战localStorage/sessionStorage/cookie 用法详解JS 进阶必会篇》 跟着系列慢慢学把技术功底扎扎实实地打牢 更多内容TS/Vue/工程化等共47篇已整理成「全体系总目录」收藏后可一站式学习 系列总览想系统学习Vue3中后台开发收藏这份「全体系指南」47篇干货从基础到工程化全覆盖《前端基础实战JS/TS与Vue体系化扫盲47 篇完整目录 避坑》 每篇都配套实战场景避坑指南帮你摆脱「面向搜索引擎写代码」的尴尬⬆ 返回目录学习本就是一场持久战不需要急着一口吃成胖子。哪怕今天你只记住了一点点这都是实打实的进步。后续我还会继续用这种大白话、讲实战方式带大家扫盲更多前端基础。关注我不迷路咱们把那些曾经模糊的知识点一个个彻底搞清楚。如果你觉得这篇内容对你有帮助不妨点赞收藏下次写代码卡壳时拿出来翻一翻比搜引擎更靠谱。我是 Eugene你的电子学友我们下一篇干货见