【前端】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'));

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

相关推荐
前端_学习之路33 分钟前
React--Fiber 架构
前端·react.js·架构
伍哥的传说1 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409191 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding1 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜1 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD1 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding1 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
柚子8161 小时前
scroll-marker轮播组件不再难
前端·css
你的人类朋友2 小时前
🫏光速入门cURL
前端·后端·程序员
01传说2 小时前
vue3 配置安装 pnpm 报错 已解决
java·前端·vue.js·前端框架·npm·node.js