JavaScript本地存储完整指南：localStorage、sessionStorage与Cookie区别-速维云

浏览器本地存储是前端开发中经常会用到的能力。登录状态提示、主题偏好、草稿内容、临时筛选条件、购物车缓存、访问引导标记，都可能需要在用户浏览器里保存少量数据。

JavaScript 常见的本地存储方式包括 localStorage、sessionStorage 和 Cookie。它们都能保存数据，但生命周期、容量、是否随请求发送、安全属性和适用场景都不一样。本文从实际开发角度讲清三者区别和使用注意事项。

三者区别

localStorage 适合长期保存少量前端数据，关闭浏览器后仍然存在；sessionStorage 适合当前标签页会话内的临时数据，标签页关闭后通常会清除；Cookie 既可以给前端读取，也会按规则随 HTTP 请求发送给服务器。

简单理解：前端偏好设置常用 localStorage；单页临时状态可用 sessionStorage；需要服务端参与识别的状态才考虑 Cookie。

localStorage 基础

localStorage 以键值对形式保存数据，键和值都是字符串。常见方法包括 setItem、getItem、removeItem 和 clear。

localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme');
localStorage.removeItem('theme');

它适合保存主题、语言、用户关闭过的提示、非敏感配置等。不要把 token、密码、身份证号等敏感信息放进去。

localStorage、sessionStorage 和 Cookie 都能存数据，但生命周期和安全边界完全不同。

存对象数据

本地存储只能保存字符串。如果要保存对象或数组，需要先用 JSON.stringify 转成字符串，读取时再用 JSON.parse 还原。

const userSetting = {
  theme: 'dark',
  fontSize: 16
};

localStorage.setItem('setting', JSON.stringify(userSetting));

const setting = JSON.parse(localStorage.getItem('setting'));

读取时要考虑数据不存在或格式异常的情况。线上项目最好加容错，避免本地旧数据导致页面报错。

sessionStorage 场景

sessionStorage 的 API 和 localStorage 基本一致，但生命周期更短，通常只在当前标签页有效。关闭标签页后，数据会被清除。

sessionStorage.setItem('currentStep', '2');
const step = sessionStorage.getItem('currentStep');

它适合保存多步骤表单当前进度、临时筛选状态、当前页一次性提示等。不适合保存长期偏好，因为用户关掉页面后数据就没了。

Cookie 基础

Cookie 是更早期的浏览器存储机制。它最大的特点是会根据域名、路径、过期时间等规则随 HTTP 请求发送给服务器。

document.cookie = 'lang=zh-CN; max-age=86400; path=/';

正因为 Cookie 会随请求发送，所以不适合存放大量前端数据。否则每次请求都会额外携带这些内容，增加网络开销。

Cookie 安全属性

Cookie 有一些重要安全属性，比如 HttpOnly、Secure、SameSite。其中 HttpOnly 可以阻止 JavaScript 读取 Cookie，常用于降低脚本窃取风险。

需要注意，前端通过 document.cookie 设置不了真正的 HttpOnly Cookie。涉及登录态、会话凭证等敏感 Cookie，应该由服务端设置。

容量差异

localStorage 和 sessionStorage 的容量通常比 Cookie 大，常见约为几 MB；Cookie 单条和总量限制都更小，通常只适合保存短小信息。

但这不代表可以把大量数据塞进 localStorage。它是同步 API，读写过大数据可能影响页面性能。本地缓存要克制使用。

过期机制

localStorage 默认没有过期时间，除非用户清理浏览器数据或代码主动删除。sessionStorage 随标签页会话结束。Cookie 可以设置过期时间或最大存活时间。

document.cookie = 'promo=closed; max-age=604800; path=/';

如果想让 localStorage 支持过期，可以自己保存时间戳，读取时判断是否过期。

不要存敏感信息

localStorage 和 sessionStorage 都能被同源页面里的 JavaScript 读取。如果页面存在 XSS 漏洞，攻击脚本也能读取这些数据。因此不要把敏感凭证直接放进去。

登录态设计要结合业务风险。高安全要求场景通常会使用服务端设置的 HttpOnly、Secure、SameSite Cookie，并配合 CSRF 和 XSS 防护。

跨标签同步

localStorage 的变化可以触发其他同源标签页的 storage 事件，适合做简单的跨标签同步，比如退出登录通知。

window.addEventListener('storage', (event) => {
  if (event.key === 'logout') {
    console.log('其他标签页触发了退出');
  }
});

sessionStorage 通常只属于当前标签页，不适合做跨标签共享。

怎么选择

如果数据只给前端用，并且需要长期保留，用 localStorage；如果数据只在当前标签页临时使用，用 sessionStorage；如果数据需要服务端在请求中识别，并且很短小，才考虑 Cookie。

比如主题偏好适合 localStorage；结算页临时步骤适合 sessionStorage；服务端会话标识适合由服务端设置 Cookie。

常见错误

第一种错误是把敏感 token 长期放在 localStorage。第二种错误是把大量 JSON 数据塞进 Cookie。第三种错误是读取 JSON 时不做异常处理。第四种错误是以为 localStorage 会自动过期。

还有一种常见问题是开发环境和生产环境域名不同，Cookie 的 domain、path、SameSite 设置不一致，导致本地正常、线上异常。

实践建议

本地存储要先明确数据用途：是否敏感、是否需要服务端读取、需要保存多久、数据量有多大。非敏感偏好用 localStorage，临时页面状态用 sessionStorage，服务端会话交给 Cookie。

存储只是手段，不是越多越好。保持数据少、结构简单、过期可控，并做好异常处理，才能让本地存储既方便又不埋坑。

文章版权归作者所有，未经允许请勿转载。

THE END

教程
# 前端开发 # JavaScript # 本地存储

JavaScript本地存储完整指南：localStorage、sessionStorage与Cookie区别