【前端】cookie和web stroage(localStorage,sessionStorage)的使用方法及区别

在Web开发中,CookieWeb Storage(包括localStoragesessionStorage)都是客户端存储技术,但用途和特性不同。下面详细说明它们的使用方法及区别:


一、Cookie

用途 :主要用于会话管理、个性化设置和用户跟踪(如登录状态),可自动随HTTP请求发送到服务器。
特性

  • 最大容量约 4KB
  • 可设置过期时间(若不设置则为会话级Cookie,关闭浏览器失效)
  • 通过HTTP头或JavaScript读写
  • 每次请求自动附加在Cookie请求头中
1. 通过JavaScript操作
javascript 复制代码
// 设置Cookie(带过期时间)
document.cookie = "username=John; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";

// 读取所有Cookie
const cookies = document.cookie; // "username=John; auth_token=abc123"

// 删除Cookie(设置过期时间为过去)
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";
2. 通过HTTP Header(服务器端)
http 复制代码
# 服务器响应头设置Cookie
HTTP/1.1 200 OK
Set-Cookie: sessionId=abc123; Expires=Wed, 21 Oct 2026 07:28:00 GMT; Secure; HttpOnly
3. 封装Cookie工具函数
javascript 复制代码
// 设置Cookie
function setCookie(name, value, days) {
  const date = new Date();
  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
  document.cookie = `${name}=${value}; expires=${date.toUTCString()}; path=/`;
}

// 读取Cookie
function getCookie(name) {
  const cookies = document.cookie.split(';');
  for (let cookie of cookies) {
    const [key, val] = cookie.trim().split('=');
    if (key === name) return decodeURIComponent(val);
  }
  return null;
}

// 删除Cookie
function deleteCookie(name) {
  setCookie(name, '', -1); // 过期时间设为过去
}

二、Web Storage(localStorage 和 sessionStorage)

用途 :存储较大数据(5MB+),不与服务器自动通信,适合客户端临时数据。
特性

  • 仅通过JavaScript操作
  • 不随HTTP请求发送
  • 键值对形式存储(字符串)
1. localStorage

生命周期:永久存储,除非手动清除。

javascript 复制代码
// 保存数据
localStorage.setItem('theme', 'dark');

// 读取数据
const theme = localStorage.getItem('theme'); // "dark"

// 删除单个数据
localStorage.removeItem('theme');

// 清空所有
localStorage.clear();
2. sessionStorage

生命周期:仅限当前浏览器标签页,关闭标签页后清除。

javascript 复制代码
// 使用方式同localStorage
sessionStorage.setItem('tempData', JSON.stringify({ id: 1 }));
const data = JSON.parse(sessionStorage.getItem('tempData'));

三、核心区别

特性 Cookie Web Storage
容量 约 4KB 约 5MB+
是否自动发到服务器 是(通过HTTP头)
生命周期 可设置过期时间 localStorage永久,sessionStorage标签页关闭失效
访问权限 服务器和客户端均可读写 仅客户端JavaScript
存储类型 字符串 字符串(需序列化对象)

四、使用场景建议

  • Cookie

    • 用户认证(如JWT Token)
    • 保存语言偏好等小数据
    • 注意:敏感数据需设置HttpOnlySecure防XSS
  • localStorage

    • 长期保存客户端配置(如主题、字体大小)
    • 缓存静态资源数据(减少网络请求)
  • sessionStorage

    • 单次会话的临时数据(如表单草稿)
    • 页面间传递一次性参数

五、安全注意事项

  1. 敏感数据避免存Cookie :防止XSS攻击,对敏感Token设置HttpOnly

  2. Web Storage不存储密码:易被XSS攻击窃取,用后及时清除。

  3. 序列化数据

    javascript 复制代码
    // 存对象
    localStorage.setItem('user', JSON.stringify({ name: 'Alice' }));
    // 取对象
    const user = JSON.parse(localStorage.getItem('user'));

掌握这些技术后,可根据实际需求选择合适的存储方案!

相关推荐
Cache技术分享5 分钟前
219. Java 函数式编程风格 - 从命令式风格到函数式风格:迭代与数据转换
前端·后端
豆苗学前端8 分钟前
JavaScript原型对象、构造函数、继承与类详解
前端·javascript·后端
飞翔的佩奇10 分钟前
【完整源码+数据集+部署教程】【运动的&足球】足球比赛分析系统源码&数据集全套:改进yolo11-RFAConv
前端·python·yolo·计算机视觉·数据集·yolo11·足球比赛分析系统
支付宝体验科技14 分钟前
SEE Conf 2025:开启体验科技的新十年
前端
TeamDev15 分钟前
使用 Shadcn UI 构建 C# 桌面应用
前端·后端·.net
尘世中一位迷途小书童42 分钟前
Vuetify Admin 后台管理系统
前端·前端框架·开源
参宿742 分钟前
图解Vue3 响应式,手动实现核心原理
前端·javascript·vue.js
2301_801252221 小时前
前端框架Vue(Vue 的挂载点与 data 数据对象)
java·前端·javascript·vue.js·前端框架
资讯第一线1 小时前
《Windows Server 2022》 [2025年10月版 ] [官方IOS] 下载
前端
非凡ghost1 小时前
EaseUS Fixo(易我视频照片修复)
前端·javascript·后端