JS를 사용하여 쿠키 설정, 쿠키 읽기, 쿠키 삭제
JavaScript는 클라이언트 측에서 실행되는 스크립트이므로 일반적으로 Session이 서버 측에서 실행되기 때문에 Session 설정이 불가능합니다.
쿠키는 클라이언트에서 실행되므로 JS를 사용하여 쿠키를 설정할 수 있습니다.
이러한 상황이 있다고 가정하면 특정 사용 사례 프로세스에서 페이지 A에서 다음으로 이동합니다. B 페이지에서 temp 변수를 사용하여 특정 변수의 값을 JS로 저장했다면, B 페이지에서는 전역 변수의 수명주기 동안 temp의 변수 값을 참조하기 위해 JS를 사용해야 합니다. JS의 정적 변수는 페이지 이동이 발생하거나 페이지가 닫히면 이러한 변수의 값이 다시 로드됩니다. 즉, 저장 효과가 달성되지 않습니다. 이 문제에 대한 가장 좋은 해결책은 쿠키를 사용하여 변수 값을 저장하는 것입니다. 그러면 쿠키를 설정하고 읽는 방법은 무엇입니까?
먼저 쿠키의 구조를 조금 이해해야 합니다. 간단히 말하면 쿠키는 키-값 쌍의 형태, 즉 키=값 형식으로 저장됩니다. 각 쿠키는 일반적으로 ";"로 구분됩니다.
JS 설정 쿠키:
페이지 A에서 변수 username("jack")의 값을 쿠키에 저장하려고 하며 키 값이 name이고, 해당 JS 코드는 다음과 같습니다.
document.cookie="name="+username;
JS가 쿠키를 읽습니다.
쿠키에 저장된 콘텐츠가 다음과 같다고 가정합니다. name=jack; 🎜>
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”);