집 > 기사 > 웹 프론트엔드 > JavaScript 쿠키 사용(개념, 설정, 읽기 및 삭제)

JavaScript 쿠키 사용(개념, 설정, 읽기 및 삭제)

高洛峰원래의: 2017-01-18 13:20:321291검색

이 기사의 예에서는 자바스크립트 쿠키의 사용법을 설명합니다. 참고하실 수 있도록 공유해 주세요. 자세한 내용은 다음과 같습니다.

1. 쿠키란 무엇인가요?

쿠키는 페이지에서 자동 로그인, 사용자 이름 기억 등의 정보를 저장하는 데 사용됩니다.

2. 쿠키의 특징

같은 웹사이트의 모든 페이지는 쿠키를 공유합니다

쿠키에는 수량과 크기에 제한이 있습니다

쿠키에는 유효기간이 있습니다. 시간

3. 쿠키는 어떻게 사용하나요?

document.cookie를 통해 쿠키 쓰기

<!DOCTYPE HTML>
<html>
<head>
 <meta charset="UTF-8">
 <title>cookie基础</title>
</head>
<body>
</body>
</html>
<script type="text/javascript">
document.cookie = &#39;username=abc&#39;;
document.cookie = &#39;password=123&#39;;
document.cookie = &#39;email=abcdef@123.com&#39;;
</script>

브라우저를 열어 쿠키를 보면 새로 정의된 쿠키가 원래 쿠키를 덮어쓰지 않는 것을 확인할 수 있습니다.

만료 시간을 설정하지 않은 경우 브라우저를 닫으면 쿠키가 삭제됩니다. 만료 시간을 설정하는 방법은 무엇입니까? 대답은 만료됩니다. 일반적으로 Date 객체와 함께 사용합니다.

var d = new Date();
d.setTime(d.getTime() + 1 * 3600 * 1000);
document.cookie = &#39;username=abc; expires=&#39; + d.toGMTString();

Firefox를 통해 사용자 이름의 만료 시간이 현재 시간으로부터 1시간임을 알 수 있습니다.

마지막으로 쿠키를 얻는 방법을 요약합니다.

function setCookie(name,value,hours){ 
 var d = new Date();
 d.setTime(d.getTime() + hours * 3600 * 1000);
 document.cookie = name + &#39;=&#39; + value + &#39;; expires=&#39; + d.toGMTString();
}

이제 쿠키 설정 방법을 배웠으니 쿠키를 어떻게 읽나요?

먼저 쿠키에는 어떤 내용이 들어있는지 살펴볼까요?

document.cookie = &#39;username=abc&#39;;
document.cookie = &#39;password=123&#39;;
document.cookie = &#39;email=abcdef@123.com&#39;;
typeof document.cookie; //string
alert(document.cookie); //&#39;username=abc; password=123; email=abcdef@123.com&#39;

는 문자열을 받습니다. 각 ; 뒤에 공백이 있다는 점에 유의해야 합니다.

그럼 구체적인 값은 어떻게 구하나요? 첨부 코드:

function getCookie(name){ 
 var arr = document.cookie.split(&#39;; &#39;);
 for(var i = 0; i < arr.length; i++){
 var temp = arr[i].split(&#39;=&#39;);
 if(temp[0] == name){
  return temp[1];
 }
 }
 return &#39;&#39;;
}

쿠키를 설정하고 받는 것 외에도 쿠키를 삭제할 수도 있습니다. 실제로 쿠키 삭제를 사용하는 인터넷에서 사용자 이름 삭제와 같은 기능을 자주 볼 수 있습니다.

쿠키 삭제는 실제로 매우 간단합니다. 만료 시간을 과거 시간으로 설정하기만 하면 됩니다.

function removeCookie(name){
 var d = new Date();
 d.setTime(d.getTime() - 10000);
 document.cookie = name + &#39;=1; expires=&#39; + d.toGMTString();
}

마지막으로 쿠키 설정, 가져오기 및 삭제를 cookie.js로 캡슐화합니다

1234567891011121314151617181920 function setCookie(name,value,hours){ var d = new Date (); d.setTime(d.getTime() + 시간 * 3600 * 1000); document.cookie = 이름 + '=' + 값 + '; 만료=' + d.toGMTString();}function getCookie(이름) { var arr = document.cookie.split('; '); for(var i = 0; i < arr.length; i++){ var temp = arr[i].split('='); [0] == name){ return temp[1]; } } return '';}function RemoveCookie(name){ var d = new Date(); d.setTime(d.getTime() - 10000); cookie = name + '=1; 만료=' + d.toGMTString();}

이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

자바스크립트 쿠키 사용에 대한 더 기본적인 튜토리얼(개념, 설정, 읽기 및 삭제)을 보려면 PHP 중국어 웹사이트를 주목하세요!

성명：

이전 기사：Node.js 로그 처리 모듈 log4js다음 기사：Node.js 로그 처리 모듈 log4js

JavaScript 쿠키 사용(개념, 설정, 읽기 및 삭제)

관련 기사