JavaScript Cookie 操作封装类：增删改查完整实现

JavaScript Cookie 封装类概述与基础操作

该功能主要依赖于对 document.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"));