JavaScript 创建与读取 Cookie 完整示例及正则提取法

首先介绍相关基础知识：

Cookie 基本概念与应用场景

1、什么是 Cookie

Cookie 是存储在访问者计算机中的变量数据。每当同一台计算机通过浏览器请求某个页面时，浏览器会自动发送该 Cookie。你可以使用 JavaScript 来创建和获取 Cookie 的值。

2、有关 Cookie 的常见应用场景：

• 名字 Cookie：当访问者首次访问页面时，可能会填写姓名。该姓名会存储在 Cookie 中。当访问者再次访问网站时，系统会从 Cookie 中取回姓名，并显示类似 "Welcome John Doe!" 的欢迎词。

• 密码 Cookie：当访问者首次访问页面时，可能会填写密码。该密码也可被存储在 Cookie 中。当他们再次访问网站时，系统会从 Cookie 中取回密码。

• 日期 Cookie：当访问者首次访问你的网站时，当前日期可存储在 Cookie 中。当他们再次访问网站时，系统会从 Cookie 中取回日期，并显示类似 "Your last visit was on Tuesday August 11, 2005!" 的消息。

接下来通过一个实例演示如何创建 Cookie 以及如何从中提取数据。

JavaScript 创建与提取 Cookie 实现

JavaScript 实现代码如下：

 
//创建cookie
function setCookie(name, value, expireday) {
var exp = new Date();
exp.setTime(exp.getTime() + expireday*24*60*60*1000); //设置cookie的期限
document.cookie = name+"="+escape(value)+"; expires"+"="+exp.toGMTString();//创建cookie
} 
//提取cookie中的值
function getCookie(name) {
var cookieStr = document.cookie;
if(cookieStr.length > 0) {
var cookieArr = cookieStr.split(";"); //将cookie信息转换成数组
for (var i=0; i<cookieArr.length; i++) {
var cookieVal = cookieArr[i].split("="); //将每一组cookie(cookie名和值)也转换成数组
if(cookieVal[0] == name) {
return unescape(cookieVal[1]); //返回需要提取的cookie值
} 
} 
} 
} 
//测试cookie
function checkCookie() {
var cookieUser = document.getElementById("cookieUser");
var userName = getCookie("userName");
if(userName) {
cookieUser.innerHTML = "您好"+userName+"，欢迎再次回来！";
} else {
var value = prompt("请输入用户名", "");
if(value) {
setCookie('userName', value, 1);
} else {
alert("请输入用户名！");
} 
} 
} 

正则表达式提取法

提取所需 Cookie 信息的关键在于解析过程。在上述 getCookie 函数中，主要将 Cookie 字符串分割为数组来查找目标值。此外，还可以使用正则表达式进行匹配，示例如下：

 
function getCookie(name) {
var cookieStr = document.cookie;
var cookieArr = cookieStr.match(new RegExp(name+"=[a-zA-Z0-9]*;$"));
var cookieVal = cookieArr.split("=");
if(cookieVal[0] == name) {
return unescape(cookieVal[1]);
} 
} 

在上述示例中，如果浏览器中尚未存储名为 userName 的 Cookie，系统会提示用户输入用户名。当页面再次刷新时，则会显示之前输入的 Cookie 值。

HTML 测试代码示例

最后，我们可以使用以下 HTML 代码测试上述功能：

 
<body onload="checkCookie()">
<p id="cookieUser"></p>
</body>