JavaScript 创建与读取 Cookie 完整指南

作者：拾光时间：2026-10-30 05:08:05浏览：324

本文详细介绍 JavaScript 中 Cookie 的创建与读取方法。涵盖基础赋值、特殊字符编码及 SetCookie 函数的完整参数配置。重点解析两种读取策略：通过字符串索引定位和通过数组遍历匹配，并提供对应代码实现，帮助开发者掌握 Cookie 操作核心技巧。

JavaScript Cookie 创建与读取概述

本文主要讲解 JavaScript 中 Cookie 的创建与读取操作，分为两个部分展开，旨在提供具体的实现方案供参考学习。

创建 Cookie 的方法

一、创建 Cookie

最简单的创建方式是直接赋值：document.cookie = 'key=value';

若值中包含特殊字符，需使用 encodeURIComponent() 进行编码处理。

例如：document.cookie = 'user='+encodeURIComponent('郭钱;');

在读取编码后的值时，应使用 decodeURIComponent() 进行解码。

具体示例如下：


document.cookie = 'name=guoqian';
document.cookie = 'age=24';
document.cookie = 'address=hunan';
document.cookie = 'user='+encodeURIComponent('郭钱;');

自定义一个创建 Cookie 的方法，以便更好地控制过期时间、路径等属性。


function SetCookie(name, value, expires, path, domain, secure) {
 var today = new Date();
 today.setTime(today.getTime());
 if(expires) { expires *= 86400000; }
 var expires_date = new Date(today.getTime() + (expires));
 document.cookie = name + "=" + escape(value)
  + (expires ? ";expires=" + expires_date.toGMTString() : "")
  + (path ? ";path=" + path : "")
  + (domain ? ";domain=" + domain : "")
  + (secure ? ";secure" : "");
}

读取 Cookie 的两种策略

二、获取 Cookie

方法一：使用字符串方式解析。


function getCookieByString(cookieName){
 var start = document.cookie.indexOf(cookieName+'=');
 if (start == -1) return false;
 start = start+cookieName.length+1;
 var end = document.cookie.indexOf(';', start);
 if (end == -1) end=document.cookie.length;
 return document.cookie.substring(start, end);
}

方法二：使用数组方式解析。


function getCookieByArray(name){
 var cookies = document.cookie.split(';');
 var c;
 for(var i=0; i<cookies.length ; i++){
  c = cookies[i].split('=');
  if (c[0].replace(' ', '') == name) {
   return c[1];
  }
 }
}
var r = decodeURIComponent(getCookieByArray('user'));
alert(r);

以上就是本文的全部内容，希望对大家的学习有所帮助。

作者最新文章

JS处理含Emoji或中文的字符串转数组乱码问题

2026-11-05 16:12:28

JS怎么使用展开运算符合并对象

2026-11-05 14:42:18

ES6+环境下判断JS对象为空的简洁写法

2026-11-05 12:12:23

怎么通过replacer函数自定义JS中JSON的格式化输出

2026-11-05 11:19:44

JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符

2026-11-05 11:16:58