本文详解JavaScript中Cookie的设置、读取与删除方法。通过对比Session，阐述Cookie在客户端数据持久化的优势，并提供键值对结构解析及具体代码示例，帮助开发者掌握跨页面变量传递与状态保持技巧。
JavaScript与Cookie基础概念
利用JavaScript可以实现对Cookie的设置、读取以及删除操作。由于JavaScript脚本运行在客户端环境中，通常无法直接操作运行在服务器端的Session，因此两者在作用域上存在明显差异。
鉴于Cookie数据存储在客户端，开发者可以使用JavaScript来创建和管理Cookie，从而实现特定场景下的数据交互需求。
考虑一种常见场景：用户从页面A跳转至页面B，若在页面A中通过JavaScript变量temp保存了某个数据值，在页面B中仍需引用该值。然而，JavaScript全局或静态变量的生命周期较短，页面跳转或关闭后变量值会重置，导致数据丢失。为解决此问题，采用Cookie保存变量值是较为理想的方案。接下来将介绍如何设置和读取Cookie。首先需了解Cookie的基本结构：Cookie以键值对（key=value）形式存储，多个Cookie之间通常使用分号“;”进行分隔。
Cookie的设置与读取实现
JavaScript设置Cookie的方法如下：
假设在页面A中需要将变量username的值（例如“jack”）保存到Cookie中，且Key设为name，相应的JavaScript代码如下： document.cookie="name="+username;
JavaScript读取Cookie的方法如下： 假设Cookie中已存储内容：name=jack;password=123
在页面B中获取变量username值的JavaScript代码如下：
var username=document.cookie.split(";")[0].split("=")[1];
//JS操作cookies方法!
//写cookies
function setCookie(name,value)
{
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//读取cookies
function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return unescape(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("name","hayden");
alert(getCookie("name"));
//如果需要设定自定义过期时间
//那么把上面的setCookie 函数换成下面两个函数就ok;
//程序代码
function setCookie(name,value,time)
{
var strsec = getsec(time);
var exp = new Date();
exp.setTime(exp.getTime() + strsec*1);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getsec(str)
{
alert(str);
var str1=str.substring(1,str.length)*1;
var str2=str.substring(0,1);
if (str2=="s")
{
return str1*1000;
}
else if (str2=="h")
{
return str1*60*60*1000;
}
else if (str2=="d")
{
return str1*24*60*60*1000;
}
}
//这是有设定过期时间的使用示例：
//s20是代表20秒
//h是指小时，如12小时则是：h12
//d是天数，30天则：d30
setCookie(“name”,”hayden”,”s20”);
以上即为本文关于JavaScript Cookie操作的全部内容，希望对读者的学习有所帮助，也欢迎大家继续支持本站。