本文详细讲解如何使用JavaScript创建、存储和读取Cookie,涵盖基础概念及多种应用场景。重点演示了通过数组和正则表达式提取Cookie值的方法,并提供了完整的HTML与JS代码示例。特别指出Chrome等现代浏览器出于安全策略,禁止本地文件直接读写Cookie,需通过Web服务器发布后访问方可生效。
JavaScript Cookie基础与应用场景
本文回顾JavaScript中Cookie的创建与存储方法,并分享相关实践心得。首先梳理基础概念:
Cookie的基本定义
Cookie是存储在用户计算机中的变量。当同一台计算机通过浏览器请求特定页面时,会自动发送该Cookie。利用JavaScript,开发者可以创建并获取Cookie的值。
Cookie应用示例
姓名Cookie:当访客首次访问页面时,系统可能要求输入姓名,并将姓名存入Cookie。当访客再次访问网站时,页面会显示如“欢迎 John Doe!”的问候语,姓名即从Cookie中读取。
密码Cookie:访客首次访问时输入的密码也可存入Cookie。再次访问时,系统会从Cookie中取回密码信息。
日期Cookie:访客首次访问网站时,当前日期可存入Cookie。再次访问时,页面会提示如“您上次访问时间为2005年8月11日星期二!”的信息,日期数据同样源自Cookie。
Cookie的创建与提取实现
接下来通过具体实例演示如何创建和提取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值。以下是测试代码:
<body onload="checkCookie()">
<p id="cookieUser"></p>
</body>
浏览器本地运行限制与解决方案
利用JavaScript将信息保存至Cookie后,可在其他页面调用,既方便又实用,且代码量较少。但需注意,部分浏览器(如Chrome)出于安全考虑,不支持本地文件直接读写Cookie,必须将网站发布至服务器在线环境下才能正常读取。
具体代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Cookie的读取例子</title>
<link href="CSS/sheet.css" rel="external nofollow" rel="stylesheet" type="text/css">
<script language="javascript">
function writeCookie(){//写入cookie
document.cookie=encodeURI("username="+document.form1.username.value);
document.cookie=encodeURI("password="+document.form1.password1.value);
}
function readCookie(){//读取cookie
var cookieString=decodeURI(document.cookie);//调用decodeURI函数获取Cookie
if(cookieString.length!=0){//cookie不为空
var cookies=cookieString.split(";");//使用字符串的split函数利用“;“分割字符串为数组,这样就把username和password分开了
for(var i=0;i<cookies.length;i++){
var cookieN=cookies[i].split("=");//使用字符串的split函数利用“=“分割字符串为数组,这样就把username和username的值分开了
var cookieName=cookieN[0];//
var cookieValue=cookieN[1];
alert("Cookie名称为:"+cookieName+" ,值为:"+cookieValue);
}
}else
alert("Cookie为空,请填写信息");
}
</script>
</head>
<body onload="makesnake()">
<form action="" method="post" name="form1">
<table >
<tr align="right"><td>用户名:</td><td><input type="text" name="username" /></td></tr>
<tr align="right"><td>密码:</td><td><input type="password" name="password1" /></td></tr>
<tr align="right"><td>确认密码:</td><td><input type="password" name="password2" /></td></tr>
<tr align="center">
<td ><input type="button" value="写入Cookies" onClick="writeCookie();"></td>
<td><input type="button" value="读取Cookies" onClick="readCookie();"></td></tr>
</table>
</form>
</body>
</html>
在Chrome浏览器中的运行效果:
(填写用户名后,点击“写入”按钮,再点击“读取”按钮)


注意:在IE、Firefox等浏览器中,直接打开HTML文件即可读取Cookie;但在Chrome中,必须通过Web服务器发布后访问(例如通过IP地址访问)才能生效。
总结
以上就是本文的全部内容,希望这些内容对您的学习或工作有所帮助。感谢支持本站,如需了解更多相关内容,请查阅相关链接。