JavaScript Cookie 操作完整实现:设置、读取与删除

作者:代码拾荒时间:2026-10-29 01:25:47浏览:568

本文提供经过验证的JavaScript代码,详细演示如何设置、读取和删除浏览器Cookie。包含setCookie、getCookie和delCookie三个核心函数的完整实现及逐行注释,涵盖参数定义、日期转换、字符串解析及过期处理逻辑,适用于需要手动管理Cookie的前端开发场景。

// 复制代码

JavaScript Cookie 操作完整实现:设置、读取与删除

代码如下:

// 代码已验证可用
// JavaScript 源文件
// 使用说明:
// 设置Cookie:调用 setCookie("name", value);
// 获取Cookie:var name = getCookie("name");
// 删除Cookie:调用 delCookie("name");
// 设置Cookie函数
function setCookie(NameOfCookie, value, expiredays)
{
// 参数说明:包含三个变量用于定义新Cookie:
// Cookie的名称、存储的值,
// 以及Cookie的过期天数。
// 以下代码将天数转换为合法的日期对象
var ExpireDate = new Date();
ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000));
// 以下代码用于存储Cookie,只需简单赋值给 document.cookie 即可。
// 注意:日期通过 toGMTString() 函数转换为GMT格式字符串。
document.cookie = NameOfCookie + "=" + escape(value) + ((expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString());
}
// 获取Cookie值函数
function getCookie(NameOfCookie)
{
// 首先检查Cookie是否存在。
// 如果不存在,document.cookie 的长度将为0。
if (document.cookie.length > 0)
 {
// 接着检查Cookie名称是否存在于 document.cookie 字符串中。
// 由于可能存储多个Cookie值,即使 document.cookie 长度不为0,
// 也不能保证我们需要的特定名称的Cookie存在。
//如果begin的变量值得到的是-1那么说明不存在
begin = document.cookie.indexOf(NameOfCookie + "=");
if (begin != -1)
  {
// 如果 begin 变量值为 -1,说明目标Cookie不存在。
// 若存在,则 begin 加上 NameOfCookie 的长度再加1,得到Cookie值的起始位置。
end = document.cookie.indexOf(";", begin); // 获取结束位置
if (end == -1) end = document.cookie.length; // 若未找到分号,则结束位置为字符串末尾
return unescape(document.cookie.substring(begin, end));
  }
 }
return null;
// 若Cookie不存在,则返回null
}
// 删除Cookie函数
function delCookie(NameOfCookie)
{
// 该函数检查Cookie是否已设置,若已设置则将过期时间设置为过去的时间;
// 其余清理工作由操作系统在适当时候自动处理。
if (getCookie(NameOfCookie))
 {
document.cookie = NameOfCookie + "=" + "; expires=Thu, 01-Jan-70 00:00:01 GMT";
 }
}
作者最新文章