本文介绍一个基于 document.cookie 字符串解析的 JavaScript Cookie 封装类。该类提供了便捷的增、删、改、查功能，支持设置过期时间、域名、路径及 Secure 属性。通过示例代码展示了如何快速添加、获取单个或全部 Cookie，以及如何删除指定 Cookie，适用于需要简化 Cookie 管理的 Web 开发场景。
JavaScript Cookie 封装类概述与基础操作
该功能主要依赖于对 document.cookie 字符串的解析与重组来实现各项操作。
回顾一下 JavaScript 中对 Cookie 的基本操作：
在原生 JavaScript 中，可以通过直接赋值的方式添加 Cookie，例如：document.cookie="userId=111";。
完整的实现版本如下：
若需设置更多属性，可编写如下语句：document.cookie="userId=111;domain=.google.com;path=/;secure=secure;expire="+date.toGMTString();。
通过上述方式，用户可以灵活配置 Cookie 的过期时间、作用域名以及访问路径。
删除 Cookie 的逻辑相对简单，只需将过期时间（expire）设置为当前时间之前的某个时刻即可。
Cookie 封装类代码实现
接下来展示一个经过修改和优化的 JavaScript Cookie 处理类。
具体代码实现如下：
/*
Cookie 辅助类定义
旨在简化写入、读取和删除操作
*/
var myCookie={
get:function(name){
if(typeof name != "undefined")
{
//如果提供了名称，则调用获取单个值的函数
return myCookie_get(name);
}else{
//如果未提供名称，则获取所有 Cookie 项
return myCookie_getAll();
}
},
add:function(name,value,options){
//执行写入 Cookie 的操作
myCookie_add(name,value,options);
},
delete:function(name){
//执行删除 Cookie 的操作
myCookie_add(name,null);
}
}
String.prototype.Trim = function()
{
return this.replace(/^\s+/g,"").replace(/\s+$/g,"");
}
/*
Cookie 写入函数定义
@name:Cookie 名称，不能为空
@value:Cookie 值，若为 null 则表示删除该 Cookie
@option:{"expires":过期时间;"path":路径;"domain":域名;"secure":安全标志}
*/
function myCookie_add(name,value,options)
{
if (typeof value != 'undefined') { // 提供了名称和值，设置 Cookie
options = options || {};
if (value === null) {
value = '';
options.expires = -1;
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString(); // 使用 expires 属性，IE 不支持 max-age
}
var path = options.path ? '; path=' + options.path : '';
var domain = options.domain ? '; domain=' + options.domain : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
}
}
/*
获取指定名称的 Cookie 值
@name:Cookie 的名称
*/
function myCookie_get(name)
{
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].Trim();
//检查该 Cookie 字符串是否以期望的名称开头
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
/*
获取所有 Cookie 并以 JSON 格式返回
*/
function myCookie_getAll()
{
var cookieArray = new Array();
var str="";
var temp;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].Trim();
temp=cookie.split('=');
//提取并构建 JSON 字符串片段
cookieArray.push("{\"name\":\""+decodeURIComponent(temp[0])+"\",\"value\":\""+decodeURIComponent(temp[1])+"\"}");
}
str=cookieArray.join(",");
}
str="["+str+"]";
return eval('('+str+')');
} 封装类调用示例与演示
调用方式非常简洁，示例代码如下：
具体调用代码：
myCookie.add("useraccount","admin",{"expires":5});//添加一个有效期为5天的 Cookie
alert(myCookie.get("useraccount"));//读取指定的 Cookie
cookies=myCookie.get();//获取所有 Cookie
for(var i=0;i<cookies.length;i++)
{
alert(cookies[i]["name"]+":"+cookies[i]["value"]);
}
myCookie.delete("useraccount");//删除之前添加的 Cookie
alert(myCookie.get("useraccount"));