> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 쿠키 기술에 대한 자세한 설명

JavaScript 쿠키 기술에 대한 자세한 설명

高洛峰
풀어 주다: 2016-12-06 15:01:30
원래의
1249명이 탐색했습니다.

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

그런 다음 B에서 페이지의 사용자 이름 변수 값을 가져오는 JS 코드는 다음과 같습니다.

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”);
로그인 후 복사


관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿