JavaScript 操作 Cookies 详解及路径设置问题

作者:函数茶馆时间:2026-10-21 22:35:27浏览:440

本文详细介绍JavaScript中操作Cookies的常用方法,重点解析在跨页面或不同命名空间下获取不到Cookie的常见原因。通过演示如何设置path属性为根路径,解决因默认路径限制导致的数据无法共享问题,确保Cookie在域名下全局可用。

JavaScript 操作 Cookies 详解

JavaScript 操作 Cookies 详解

跨页面获取 Cookie 的路径问题与解决

这套操作 Cookies 的方法我已使用许久,此前一直未遇到明显问题。但在近期开发中,我尝试实现一个功能:在第一个页面保存 Cookie,随后在第二个或第三个页面获取该 Cookie,却发现了方法的局限性。例如,第一个页面的路径为 http://xxxxx/cyb-car2016/h5OfficeWorker/index,而第二个页面的路径为 http://xxxxx/cyb-car2016/h5AlertController/index。尽管两个页面的域名相同,但命名空间(路径前缀)不同。由于浏览器默认将 Cookie 保存在当前页面路径下,因此在第一个页面保存的 Cookie,因路径不匹配,导致第二个页面无法获取。解决方法是在保存 Cookie 时显式设置 path 参数,代码示例如下:document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString()+";path=/"。其中,path=/ 表示将 Cookie 保存在域名根路径下,从而实现全局可用。


/***********************操作cookies的方法***************************/
//写cookies 
//这是有设定过期时间的使用示例: 
//s20是代表20秒 
//h是指小时,如12小时则是:h12 
//d是天数,30天则:d30 
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()+";path=/"; 
}

//读取cookies 
function getCookie(name){
 var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");

 if(arr=document.cookie.match(reg)) 
  return unescape(arr[2]); 
 else 
  return false; 
}

// 删除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()+";path=/";
}

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; 
  } 
}


//获取Cookie
//var name = getCookie("name");
//var phone = getCookie("phone");
//
//if(phone != ""){
// $("input[name=phone]").val(phone);
//}
//if(name!="false"){
// $("input[name=name]").val(name);
//}

/***********************操作cookies的方法***************************/


感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

作者最新文章