JavaScript 操作 Cookie 的完整实现与使用指南

作者：纸飞机时间：2026-10-30 03:17:37浏览：659

本文详细解析了 JavaScript 中 Cookie 的基本操作方法，包括设置、读取和删除。通过面向对象的思想封装了 Cookie 类，解决了原生 JS 缺乏现成处理方案的问题。内容涵盖过期时间、路径、域名的设置，以及中文值的编码解码处理，并提供了完整的代码示例和调用方法，帮助开发者高效管理浏览器存储。

JavaScript Cookie 操作概述

本文详细介绍 JavaScript 中 Cookie 的基本操作方法，供读者参考学习。

相较于 C#、Java 等语言，JavaScript 在处理 Cookie 时缺乏内置的便捷方案，需要开发者自行实现。基于面向对象的设计思想，本文整理了一套 Cookie 处理逻辑，旨在为开发者提供实用的参考。

Cookie 常见操作分析

以下是对 Cookie 常见操作的详细分析：

（1）设置 Cookie：该功能兼具添加与修改作用。若指定名称的 Cookie 已存在，则执行更新操作。设置时可配置可选参数，包括声明周期、访问路径、域名及安全性标志。此外，为确保 Cookie 能正确存储中文内容，需对存储值进行编码处理。

（2）获取 Cookie 值：该方法以 Cookie 名称为参数，返回对应的值。由于存储时已进行编码，获取时应自动解码后返回。此方法也可扩展为返回特定格式的数据，不仅限于单一值。

（3）删除 Cookie：通过将该 Cookie 的过期时间设置为过去的时间点来实现删除。方法接收 Cookie 名称作为参数，从而移除该 Cookie。实现中还包含将名称置空的逻辑，以预防未来多 Cookie 设置时可能出现的名称冲突。

（4）其他操作：此处留白，供读者自行探索其他相关功能。

代码实现与类封装

接下来展示具体代码实现：


/* 对cookie的操作 */
//创建
var Cookie = new Object();
//设置(修改)属性和方法
Cookie.setCookie = function(sName, sValue, oExpires, sPath, sDomain, bSecure) {
  var sCookie = sName + "=" + escape(sValue); // 名称和值
  if (oExpires) {
    sCookie += "; expires=" + oExpires.toGMTString(); // 过期时间
  }
  if (sPath) {
    sCookie += "; path=" + sPath; // 访问路径
  }
  if (sDomain) {
    sCookie += "; domain=" + sDomain; // 访问路径
  }
  if (bSecure) {
    sCookie += "; true"; // 安全性
  }
  document.cookie = sCookie;
}
//获取
Cookie.getCookie = function(sName) {
  var cookieArray = document.cookie.split(";"); //得到分割的名值对
  var tempCookie = new Object();
  for (var i = 0; i < cookieArray.length; i++) {
    var tempArr = cookieArray[i].split("="); //将名称和值分开
    if (tempArr[0] == sName) { //如果是指定的cookie，返回它的值
      return unescape(tempArr[1]);
    }
  }
  return "There's no such a cookie name!";
}
//删除
Cookie.deleteCookie = function(sName, sPath, sDomain) {
  var sCookie = sName + "=; expires=" + (new Date(0)).toGMTString(); // 设置名称为空，过期时间为0，也可以设置过期时间为负数 (var sCookie = sName + "=; expires=-1"; )
  if (sPath) {
    sCookie += "; path=" + sPath;
  }
  if (sDomain) {
    sCookie += "; domain=" + sDomain;
  }
  document.cookie = sCookie;
}
function test() {
  Cookie.setCookie("test", "cookieTest");
  alert(Cookie.getCookie("test"));
  alert(Cookie.getCookie("test2")); // ???
  Cookie.deleteCookie("test");
  alert(Cookie.getCookie("test"));
}

补充：JavaScript 操作 Cookie 的封装类


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;
  }
}

具体用法示例

具体用法如下：

一、设置 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");

希望本文的内容能对您的 JavaScript 编程工作有所帮助。

作者最新文章

JS动态构建复杂嵌套JSON对象的方法

2026-11-05 15:41:52

JS负数取余为什么是负数？详解余数与模运算区别

2026-11-05 13:34:41

JS 解压出现乱码或报错怎么解决？

2026-11-05 12:32:38

JS 中 startsWith、indexOf 与正则判断字符串前缀的对比

2026-11-04 22:19:43

JS解析Excel后怎么将数据转换为JSON格式

2026-11-04 20:58:28