JavaScript 设置 Cookie 与读取 Cookie 实战

创建 Cookie：基础用法与安全编码

在浏览器环境中，最简单的方法是直接使用 document.cookie 属性进行赋值。然而，若 Cookie 的值包含非 URL 安全的特殊字符（如中文或分号），直接赋值会导致存储失败或读取异常。

1. 简单赋值：适用于纯英文字母和数字组合。

   document.cookie = 'name=guoqian';
   document.cookie = 'age=24';
   document.cookie = 'address=hunan';

2. 安全编码赋值：针对包含特殊字符的数据，必须使用 encodeURIComponent() 进行编码，否则在后续读取时必须配合 decodeURIComponent() 解码。

   document.cookie = 'user=' + encodeURIComponent('郭钱;');

封装 SetCookie 方法

原生赋值功能单一，通常建议封装一个通用的 SetCookie 函数，以便同时配置过期时间、路径和域名等关键属性。

function SetCookie(name, value, expires, path, domain, secure) {
 var today = new Date();
 today.setTime(today.getTime());
 
 // 将天数转换为毫秒数
 if(expires) { expires *= 86400000; }
 var expires_date = new Date(today.getTime() + (expires));
 
 document.cookie = name + "=" + escape(value)
  + (expires ? ";expires=" + expires_date.toGMTString() : "")
  + (path ? ";path=" + path : "")
  + (domain ? ";domain=" + domain : "")
  + (secure ? ";secure" : "");
}

逻辑说明：

• expires 单位通常为“天”，代码内部乘以 86400000 转为毫秒累加至当前时间。
• 使用三元运算符判断各可选参数是否存在，有效且无用的部分不写入字符串。

获取 Cookie：两种解析策略

由于 document.cookie 返回的是所有 Cookie 拼成的长字符串，因此解析过程需要遍历并切分。以下是两种经典实现方式。

第一种：使用字符串截取 (getCookieByString)

该方法通过 indexOf 寻找目标 Key 的起始位置，并截断后续内容。

function getCookieByString(cookieName){
 var start = document.cookie.indexOf(cookieName+'=');
 if (start == -1) return false;
 start = start + cookieName.length + 1;
 var end = document.cookie.indexOf(';', start);
 if (end == -1) end = document.cookie.length;
 return document.cookie.substring(start, end);
}

注意：此方法无法自动处理解码，若存入时使用了 encodeURIComponent，获取后需再次调用 decodeURIComponent。

第二种：使用数组分割 (getCookieByArray)

利用 split(';') 将所有 Cookie 拆分为数组对象，效率较高，且在循环中直接过滤目标项。

function getCookieByArray(name){
 var cookies = document.cookie.split(';');
 for(var i=0; i < cookies.length; i++){
  var c = cookies[i].split('=');
  if (c[0].replace(' ', '') == name) {
   return c[1];
  }
 }
}

// 示例调用及解码
var r = decodeURIComponent(getCookieByArray('user'));
console.log(r); // 输出: 郭钱;

通过这种方式处理中文或特殊符号存储时，能确保数据还原准确。

以上就是 JavaScript 设置 Cookie 与读取 Cookie 的详细内容，更多关于 JavaScript Cookie 操作的知识请持续关注本站的相关技术文章！