JavaScript Cookie 技术详解:设置、读取与删除

作者:半夏时间:2026-10-30 16:52:13浏览:323

本文详解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操作的全部内容,希望对读者的学习有所帮助,也欢迎大家继续支持本站。

作者最新文章