JavaScript Cookie 操作类封装与使用详解

作者:函数茶馆时间:2026-10-29 07:52:25浏览:370

本文介绍一个轻量级的 JavaScript Cookie 操作类,提供 SetCookie、GetCookie 和 Expire 三个核心方法。支持设置普通键值、指定过期时间、自定义域名与路径,以及存储带子键的复合数据。通过示例展示如何封装字符串处理与 DOM 操作,实现便捷的 Cookie 读写与删除功能。

JavaScript Cookie 操作类封装与使用详解

本文分享一个用于处理 Cookie 的 JavaScript 类库,旨在为开发者提供一套简洁易用的解决方案。

该类的具体使用方式如下:

首先,介绍如何向 Cookie 中写入数据。


var cookie = new JSCookie();
// 普通设置
cookie .SetCookie("key1","val1");
// 过期时间为一年
var expire_time = new Date();
expire_time.setFullYear(expire_time.getFullYear() + 1);
cookie .SetCookie("key2","val2",expire_time);
// 设置域及路径,带过期时间
cookie .SetCookie("key3","val3",expire_time,".cnblogs.com","/");
// 设置带子键的cookie,子键分别是k1,k2,k3
cookie .SetCookie("key4","k1=1&k2=2&k3=3");

其次,演示如何从 Cookie 中读取已保存的数据。


// 简单获取
cookie .GetCookie("key1");
cookie .GetCookie("key2");
cookie .GetCookie("key3");
cookie .GetCookie("key4");
// 获取key4的子键k1值
cookie .GetChild("key4","k1");

最后,讲解如何使特定的 Cookie 失效。


cookie .Expire("key1");
cookie .Expire("key2");
cookie .Expire("key3");
cookie .Expire("key4");

以下是具体的代码示例:


<script type="text/javascript">
 String.prototype.Trim = function()
 {
   return this.replace(/^\s+/g,"").replace(/\s+$/g,"");
 }
 function JSCookie()
 {
   this.GetCookie = function(key)
   {
     var cookie = document.cookie;
     var cookieArray = cookie.split(';');
     var getvalue = "";
     for(var i = 0;i<cookieArray.length;i++)
     {
       if(cookieArray[i].Trim().substr(0,key.length) == key)
       {
         getvalue = cookieArray[i].Trim().substr(key.length + 1);
         break;
       }
     }
     return getvalue;
   };
   this.GetChild = function(cookiekey,childkey)
   {
     var child = this.GetCookie(cookiekey);
     var childs = child.split('&');
     var getvalue = "";
     for(var i = 0;i < childs.length;i++)
     {
       if(childs[i].Trim().substr(0,childkey.length) == childkey)
       {
         getvalue = childs[i].Trim().substr(childkey.length + 1);
         break;
       }
     }
     return getvalue;
   };
   this.SetCookie = function(key,value,expire,domain,path)
   {
     var cookie = "";
     if(key != null && value != null)
       cookie += key + "=" + value + ";";
     if(expire != null)
       cookie += "expires=" + expire.toGMTString() + ";";
     if(domain != null)
       cookie += "domain=" + domain + ";";
     if(path != null)
       cookie += "path=" + path + ";";
     document.cookie = cookie;
   };
   this.Expire = function(key)
   {
     expire_time = new Date();
     expire_time.setFullYear(expire_time.getFullYear() - 1);
     var cookie = " " + key + "=e;expires=" + expire_time + ";"
     document.cookie = cookie;
   }
 }
</script>

以上就是该 Cookie 操作类的完整实现与用法。

希望这段代码能帮助读者更好地掌握 JavaScript 中 Cookie 的管理技巧。

作者最新文章