JavaScript 设置与读取 Cookie 的方法及本地测试注意事项
本文详解了如何使用 JavaScript 在客户端设置和读取 Cookie,提供了三种常见的实现代码示例。重点指出 Chrome 浏览器出于安全策略,禁止在本地 HTML 文件中读写 Cookie,必须在服务器环境下运行才能生效。
JavaScript 操作 Cookie 的基本原理
JavaScript 作为客户端脚本运行,因此通常无法直接操作 Session,因为 Session 数据存储在服务器端。
相比之下,Cookie 存储在客户端,因此可以通过 JavaScript 进行设置和管理。
以下是几种通过 JavaScript 设置 Cookie 的方法汇总:
JavaScript 设置 Cookie 的代码示例
第一种实现方式如下:
<script>
//设置cookie
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}
//获取cookie
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
}
return "";
}
//清除cookie
function clearCookie(name) {
setCookie(name, "", -1);
}
function checkCookie() {
var user = getCookie("username");
if (user != "") {
alert("Welcome again " + user);
} else {
user = prompt("Please enter your name:", "");
if (user != "" && user != null) {
setCookie("username", user, 365);
}
}
}
checkCookie();
</script>
第二种实现方式如下:
<script>
//JS操作cookies方法!
//写cookies
function setCookie(c_name, value, expiredays){
var exdate=new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
}
//读取cookies
function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return (arr[2]);
else
return null;
}
//删除cookies
function delCookie(name)
{
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null)
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
//使用示例
setCookie('username','Darren',30)
alert(getCookie("username"));
</script>
第三种示例代码:
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script language="JavaScript" type="text/javascript">
function addCookie(objName, objValue, objHours){//添加cookie
var str = objName + "=" + escape(objValue);
if (objHours > 0) {//为0时不设定过期时间,浏览器关闭时cookie自动消失
var date = new Date();
var ms = objHours * 3600 * 1000;
date.setTime(date.getTime() + ms);
str += "; expires=" + date.toGMTString();
}
document.cookie = str;
alert("添加cookie成功");
}
function getCookie(objName){//获取指定名称的cookie的值
var arrStr = document.cookie.split("; ");
for (var i = 0; i < arrStr.length; i++) {
var temp = arrStr[i].split("=");
if (temp[0] == objName)
return unescape(temp[1]);
}
}
function delCookie(name){//为了删除指定名称的cookie,可以将其过期时间设定为一个过去的时间
var date = new Date();
date.setTime(date.getTime() - 10000);
document.cookie = name + "=a; expires=" + date.toGMTString();
}
function allCookie(){//读取所有保存的cookie字符串
var str = document.cookie;
if (str == "") {
str = "没有保存任何cookie";
}
alert(str);
}
function $(m, n){
return document.forms[m].elements[n].value;
}
function add_(){
var cookie_name = $("myform", "cookie_name");
var cookie_value = $("myform", "cookie_value");
var cookie_expireHours = $("myform", "cookie_expiresHours");
addCookie(cookie_name, cookie_value, cookie_expireHours);
}
function get_(){
var cookie_name = $("myform", "cookie_name");
var cookie_value = getCookie(cookie_name);
alert(cookie_value);
}
function del_(){
var cookie_name = $("myform", "cookie_name");
delCookie(cookie_name);
alert("删除成功");
}
</script>
</head>
<body>
<form name="myform">
<div>
<label for="cookie_name">
名称
</label>
<input type="text" name="cookie_name" />
</div>
<div>
<label for="cookie_value">
值
</lable>
<input type="text" name="cookie_value" />
</div>
<div>
<label for="cookie_expireHours">
多少个小时过期
</lable>
<input type="text" name="cookie_expiresHours" />
</div>
<div>
<input type="button" value="添加该cookie" onclick="add_()"/><input type="button" value="读取所有cookie" onclick="allCookie()"/><input type="button" value="读取该名称cookie" onclick="get_()"/><input type="button" value="删除该名称cookie" onclick="del_()"/>
</div>
</form>
</body>
</html>
Chrome 浏览器本地测试限制说明
需要注意以下事项:
在 Chrome 浏览器中,如果在本地直接获取 Cookie 可能会失败。必须将文件部署到服务器上才能正常读写。若需在本地测试,可将文件放入本地 Web 服务器(如 local 的 www 目录)中运行。
Google Chrome 仅支持对在线网站的 Cookie 进行读写操作,出于安全考虑,禁止对本地 HTML 文件执行 Cookie 操作。因此,如果在本地直接打开 HTML 文件运行相关代码,弹出的对话框内容将为空。
document.cookie = "Test=cooo";
alert(document.cookie);
若该页面部署为在线网站内容,则能正常显示已设置的 Cookie 内容,例如 Test=cooo 等。
以上就是本文关于 JavaScript 设置与读取 Cookie 的全部内容,希望对你有所帮助。
怎么在线格式化压缩JS代码并保留原始注释
2026-11-05 09:15:34
生产环境怎么自动移除JS控制台打印日志
2026-11-05 09:07:54
Babel 配置 core-js 完整指南:@babel/preset-env 与 useBuiltIns 设置
2026-11-04 20:32:23
Rollup打包集成Terser进行JS压缩的配置方法
2026-11-03 11:58:27
core-js v3 安装配置:配合 @babel/preset-env 实现按需引入
2026-11-03 11:11:05
