자바스크립트 쿠키


쿠키는 웹페이지에 사용자 정보를 저장하는 데 사용됩니다.

쿠키란 무엇인가요?

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

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

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

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

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

쿠키는 다음과 같이 이름/값 쌍의 형태로 저장됩니다.

username=John Doe

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

JavaScript를 사용하여 쿠키 만들기

JavaScript는 document.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; 만료=Thu, 18 Dec 2013 12:00:00 GMT; path=";

JavaScript를 사용하여 쿠키 읽기

JavaScript에서는 다음을 사용할 수 있습니다. 쿠키를 읽는 코드:

var x = document.cookie;

Notedocument.cookie 将以字符串的方式返回所有的 cookies，类型格式： cookie1=value; cookie2=value; cookie3=value;

JavaScript를 사용하여 쿠키 수정

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

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

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

JavaScript를 사용하여 쿠키 삭제

쿠키 삭제는 매우 쉽습니다. 아래와 같이 만료 매개변수를 이전 시간으로 설정하면 됩니다. 1970년 1월 1일 목요일 00:00:00 GMT:

document.cookie = "username=; 만료=Thu, 01로 설정하세요. Jan 1970 00:00:00 GMT";

쿠키를 삭제할 때 쿠키 값을 지정할 필요가 없습니다.

쿠키 문자열

document.cookie 속성은 일반 텍스트 문자열처럼 보이지만

document.cookie에 완전한 쿠키 문자열을 작성하더라도 쿠키 정보를 다시 읽으면 쿠키 정보가 이름/값 쌍의 형태로 표시됩니다.

새 쿠키를 설정하면. , 오래된 쿠키는 덮어쓰이지 않습니다. 새 쿠키는 document.cookie에 추가되므로 document.cookie를 다시 읽으면 다음과 같은 데이터를 얻게 됩니다.

cookie1=value; cookie2=value;

특정 쿠키 값을 찾아야 하는 경우 쿠키 문자열에서 쿠키 값을 찾으려면 JavaScript 함수를 만들어야 합니다.

JavaScript 쿠키 예제

다음 예제에서는 방문자 이름을 저장하는 쿠키를 생성하겠습니다.

먼저 방문자가 웹페이지를 방문하면 이름을 입력하라는 메시지가 표시됩니다. 이 이름은 쿠키에 저장됩니다.

다음에 방문자가 페이지를 방문하면 환영 메시지가 표시됩니다.

이 예에서는 3개의 JavaScript 함수를 만듭니다.

  1. 쿠키 값을 설정하는 함수

  2. 쿠키 값을 가져오는 함수

  3. 쿠키 값을 감지하는 함수

쿠키 값 설정 함수

먼저 방문자의 이름을 저장하는 함수를 만듭니다.

            함수 setCookie(cname,cvalue,exdays)
{
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var 만료 = "expires="+d.toGMTString();
document.cookie = cname + "=" + cvalue + "; " + 만료;
}

함수 분석:

위 함수 매개변수에서 쿠키 이름은 cname, 쿠키 값은 cvalue, 쿠키 만료 시간이 설정됩니다.

이 함수는 쿠키 이름, 쿠키 값, 쿠키 만료 시간을 설정합니다.

쿠키 값을 가져오는 함수

그런 다음 지정된 쿠키의 값을 반환하는 함수 사용자를 만듭니다.

function getCookie(cname)
{
var name = cname + "=";
var ca = document.cookie .split(';');
for(var i=0; i {
var c = ca[i].trim();
if (c.indexOf(이름 )== 0) return c.substring(name.length,c.length);
}
return "";
}

기능 분석:

쿠키 이름의 매개 변수는 cname입니다.

지정된 쿠키를 검색하기 위한 텍스트 변수를 만듭니다: cname + "=".

세미콜론을 사용하여 document.cookie 문자열을 분할하고 분할 문자열 배열을 ca(ca = document.cookie.split(';'))에 할당합니다.

ca 배열(i=0;i<ca.length;i++)을 반복한 다음 배열의 각 값을 읽고 앞뒤 공백을 제거합니다(c=ca[i].trim()).

쿠키가 발견되면(c.indexOf(name) == 0), 쿠키의 값(c.substring(name.length,c.length)을 반환합니다.

쿠키가 발견되지 않으면 "를 반환합니다. ".

쿠키 값 감지 기능

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

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

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

function checkCookie()
{
var username=getCookie("사용자 이름");
if (사용자 이름!="")
{
Alert("다시 오신 것을 환영합니다" + 사용자 이름);
}
else
{
사용자 이름 = 프롬프트("이름을 입력하세요:","");
if (사용자 이름!="" && 사용자 이름!=null)
{
setCookie("사용자 이름",사용자 이름,365);
}
}
}

전체 인스턴스

Instance

<!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>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

다음 예에서는 checkCookie()를 실행하는 경우는 다음과 같습니다. 페이지가 로드되는 기능입니다.