집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript 쿠키 이해 및 사용

JavaScript 쿠키 이해 및 사용

jacklove원래의: 2018-05-07 10:36:081663검색

JavaScript 쿠키는 캐싱에서 중요한 역할을 합니다. 이 기사에서는 이에 대해 몇 가지 소개합니다.

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

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

쿠키의 역할은 "클라이언트에서 사용자 정보를 기록하는 방법"을 해결하는 것입니다.

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

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

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

username=John Doe

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

JavaScript를 사용하여 쿠키 만들기

JavaScript는 document.cookie 속성을 사용하여 쿠키를 만들고 읽고 삭제할 수 있습니다.

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

document.cookie="username=John Doe";

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

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

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

document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

JavaScript를 사용하여 쿠키 읽기

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

var x = document.cookie;

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

JavaScript를 사용하여 쿠키 수정

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

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

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

JavaScript를 사용하여 쿠키 삭제

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

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

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

쿠키 문자열

document.cookie 속성은 일반 텍스트 문자열처럼 보이지만 그렇지 않습니다.

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

새 쿠키를 설정해도 기존 쿠키는 덮어쓰이지 않습니다. 새로운 쿠키는 document.cookie에 추가되므로 document.cookie를 다시 읽으면 다음과 같은 데이터를 얻게 됩니다:

cookie1=value; cookie2=value;

모든 쿠키 표시 쿠키 생성 1 쿠키 생성 2 쿠키 삭제 1 쿠키 삭제 2

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

JavaScript 쿠키 예제

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

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

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

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

쿠키 값을 설정하는 함수

쿠키 값을 가져오는 함수

쿠키 값을 감지하는 함수

쿠키 값을 설정하는 함수

먼저 다음 작업에 사용되는 함수를 만듭니다. 방문자 이름 저장:

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

기능 분석:

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

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

쿠키 값을 가져오는 함수

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

function getCookie(cname){
  var name = cname + "=";
  var ca = document.cookie.split(&#39;;&#39;);
  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 "";}

함수 분석:

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

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

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

ca 배열(i=0;i

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

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

쿠키 값 감지 기능

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

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

쿠키가 설정되지 않으면 팝업이 표시됩니다. 방문자 이름을 묻는 창이 표시되고, 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);
    }
  }}

전체 예시

예

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(&#39;;&#39;);    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("欢迎 " + user + " 再次访问");    }
    else {
        user = prompt("请输入你的名字:","");          if (user!="" && user!=null){
            setCookie("username",user,30);        }
    }}

本篇对相关cookie的相关知识做出了一些了解，更多的学习资料清关注php中文网即可观看。

JavaScript 쿠키 이해 및 사용

관련 기사