자바스크립트 쿠키

쿠키란 무엇인가요?

쿠키는 귀하의 컴퓨터에 텍스트 파일로 저장되는 데이터 조각입니다.

웹 서버가 웹 페이지를 브라우저에 보낼 때 연결이 종료된 후에는 서버가 사용자 정보를 기록하지 않습니다.

쿠키는 "클라이언트 측에서 사용자 정보를 기록하는 방법"을 해결하는 데 사용됩니다.

사용자가 웹 페이지를 방문하면 해당 사용자의 이름이 쿠키에 기록될 수 있습니다.

다음번에 사용자가 이 페이지를 방문할 때 쿠키에 있는 사용자 액세스 기록을 읽을 수 있습니다.

쿠키는 아래와 같이 이름/값 쌍으로 저장됩니다.

username=John Doe

브라우저가 서버에서 웹페이지를 요청하면 해당 페이지에 속한 쿠키가 요청에 추가됩니다. 서버는 이러한 방식으로 사용자 정보를 얻습니다.

문서 쿠키 속성 정의

쿠키 속성은 현재 문서와 관련된 모든 쿠키를 설정하거나 쿼리할 수 있습니다. 구문은 다음과 같습니다.

document.cookie [ = name1=value1; 만료=GMT_String; path=; domain=;]

쿠키 값 설정

이제 두 개의 쿠키를 설정해야 합니다.

user_id=2 ;

user_name=admin;

JavaScript 코드는 다음과 같습니다.

document.cookie = "user_id=2";

document.cookie = "user_name=admin";
쿠키 만료 시간 설정 , 경로 및 범위
다음 예에서는 만료 시간을 1일로 설정하고 경로는 웹 사이트 루트 디렉터리이며 이 도메인 이름 아래의 모든 쿠키가 공유됩니다.

//현재 시간 가져오기

var date=new 날짜 ();
date.setTime(date.getTime ()+24*3600*1000); document.cookie = "user_id=2;path=/;domain=.5idev.com;expire="+date.toGMTString( );

쿠키 설정을 위한 특수 설정이 있습니다.

기호는 쿠키 이름이나 값에 세미콜론(;), 쉼표(,), 등호(=) 및 공백을 사용할 수 없습니다. 값에 유지되므로 인코딩을 위해 escape() 함수를 사용해야 합니다. 일부 특수 기호를 16진수로 표현할 수 있습니다.

document.cookie = "test="+escape("JavaScript cookie test");

값을 꺼낸 후 unescape()를 사용하여 디코딩하여 원래 쿠키 값을 얻습니다. 이 방법을 사용하면 중국어 왜곡도 효과적으로 방지할 수 있습니다. 문자. 잠깐만요.

쿠키 값 가져오기

document.cookie를 통해 현재 페이지의 쿠키 값을 직접 가져올 수 있으며 결과는 문자열입니다. 다음 예에서는 현재 페이지에 대한 쿠키(있는 경우)를 읽습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
  <p>与本文档相关的 cookies（如果存在的话）：</p>
<script type="text/javascript">
  document.write(document.cookie)
</script>
</body>
</html>

쿠키 값을 감지하는 함수

마지막으로 쿠키가 생성되었는지 감지하는 함수를 만들 수 있습니다.

쿠키가 설정되어 있으면 인사말 메시지가 표시됩니다.

쿠키가 설정되지 않은 경우 팝업창이 표시되어 방문자의 이름을 묻고, setCookie 함수가 호출되어 방문자의 이름을 365일 동안 저장합니다.

function checkCookie()
{
var username=getCookie("username");
if (username!="")
  {
  alert("Welcome again " + username);
  }
  else 
  {
  username = prompt("Please enter your name:","");
  if (username!="" && username!=null)
    {
    setCookie("username",username,365);
    }
  }
}

JavaScript를 사용하여 쿠키 생성 cookie

JavaScript는 문서의 .cookie 속성을 사용하여 쿠키를 생성하고 읽고 삭제할 수 있습니다.

JavaScript에서 다음과 같이 쿠키를 만듭니다.

document.cookie="username=John Doe";

쿠키에 만료 시간(UTC 또는 GMT 시간)을 추가할 수도 있습니다. 기본적으로 쿠키는 브라우저가 닫히면 삭제됩니다.

document.cookie="username=John Doe; 만료=Thu, 18 Dec 2013 12:00:00 GMT";

다음을 사용하여 브라우저에 알릴 수 있습니다. path 매개변수 서버 쿠키의 경로입니다. 기본적으로 쿠키는 현재 페이지에 속합니다.

document.cookie="username=John Doe; 만료=2013년 12월 18일 목요일 12:00:00 GMT; path=";

JavaScript를 사용하여 쿠키 읽기

JavaScript에서 다음을 수행할 수 있습니다. 쿠키를 읽으려면 다음 코드를 사용하십시오.

var x = document.cookie;

팁: document.cookie는 문자열 형식으로 모든 쿠키를 반환합니다. 형식: cookie1=value; cookie2=value cookie3; =값;

JavaScript를 사용하여 쿠키 수정

JavaScript에서 쿠키 수정은 다음과 같이 쿠키 생성과 유사합니다.

document.cookie="username=John Smith; 만료=Thu, 18 Dec 2013 12:00:00 GMT; path=";

오래된 쿠키를 덮어씁니다.

JavaScript를 사용하여 쿠키 삭제

쿠키를 삭제하는 것은 매우 쉽습니다. 아래와 같이 만료 매개변수를 이전 시간으로 설정하기만 하면 됩니다. Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; 만료=Thu, 01 Jan 1970 00 :00:00 GMT";

삭제할 때 쿠키 값을 지정하지 않아도 된다는 점에 유의하세요.

전체 예시

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php.cn</title>
</head>
<head>
<script>
function setCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name)==0) return c.substring(name.length,c.length);
}
return "";
}
function checkCookie(){
var user=getCookie("username");
if (user!=""){
alert("Welcome again " + user);
}
else {
user = prompt("Please enter your name:","");
  if (user!="" && user!=null){
    setCookie("username",user,30);
    }
}
}
</script>
</head>
<body onload="checkCookie()"></body>
</html>

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p>与本文档相关的 cookies（如果存在的话）：</p> <script type="text/javascript"> document.write(document.cookie) </script> </body> </html>

제출하다 코드 재설정

자동운전