当前位置：首页 > 行业动态 > 正文

cookie本地存储例子

admin
行业动态
2025-02-07
7

在Web开发中，本地数据存储是实现用户状态管理、个性化设置的基础能力，本文通过具体场景案例，解析Cookie技术的实现原理与实践方法。

一、Cookie的核心机制

Cookie通过HTTP协议头部实现浏览器与服务器的信息交换，当服务器响应请求时，通过Set-Cookie头部创建存储条目：

Set-Cookie: theme=dark; Path=/; Max-Age=2592000; Secure

浏览器接收到该指令后，会在后续请求中自动携带：

Cookie: theme=dark; sessionID=ABCEF12345

关键参数说明：

Expires/Max-Age：设置存储时效（服务器时间或秒数）

Domain：限定生效域名范围

Path：控制URL路径作用域

Secure：仅HTTPS连接时传输

HttpOnly：禁止客户端脚本访问

二、客户端操作实例

基础读写方法

// 写入新Cookie
document.cookie = "user_prefs=fontsize:16|lang:cn; path=/; max-age=604800";
// 读取全部Cookie 
const cookieData = document.cookie.split('; ').reduce((prev, current) => {
  const [name, value] = current.split('=');
  prev[name] = decodeURIComponent(value);
  return prev;
}, {});
// 删除指定Cookie
document.cookie = "temp_session=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

封装工具类

class CookieManager {
  static set(name, value, days=7) {
    const date = new Date();
    date.setTime(date.getTime() + (days*86400000));
    document.cookie =${name}=${encodeURIComponent(value)}; expires=${date.toUTCString()}; path=/;
  }
  static get(name) {
    return document.cookie
      .split('; ')
      .find(row => row.startsWith(${name}=))
      ?.split('=')[1];
  }
}
// 使用示例
CookieManager.set('ui_scale', '1.2');
const scaleValue = CookieManager.get('ui_scale');

三、典型应用场景

1、用户身份验证

存储加密后的会话ID

cookie本地存储例子

配合服务端实现自动登录

示例：设置HttpOnly的安全令牌

 Set-Cookie: auth_token=xyz789; HttpOnly; Secure; SameSite=Strict

2、个性化配置存储

界面主题设置（深色/浅色模式）

地区语言偏好记录

文本字号/对比度配置

3、购物车暂存

临时保存未登录用户的选购商品

cookie本地存储例子

跨页面同步选购数据

 // 存储JSON格式数据
   const cartItems = [{id: 'P123', qty: 2}];
   document.cookie =cart=${JSON.stringify(cartItems)}; max-age=172800;

四、安全防御措施

1、敏感信息防护

绝对避免存储密码、支付信息等敏感数据

对必要信息进行加密处理（如AES-256）

2、属性加固方案

 Set-Cookie: __Secure-ID=123; Secure; Path=/; SameSite=Lax; HttpOnly

3、跨站攻击防护

启用SameSite属性防止CSRF攻击

定期更换会话标识符

cookie本地存储例子

五、存储方案选型建议

特性	Cookie	localStorage	sessionStorage
存储容量	4KB	5MB	5MB
生命周期	可设置	永久	会话级
服务端访问	支持	不支持	不支持
自动携带	是	否	否