쿠키 :: doornuddle

쿠키

2023. 1. 13. 14:46

쿠키란?

쿠키는 사용자의 컴퓨터에 작은 텍스트 파일로 저장되는 데이터이다.

쿠키를 사용하면 웹 페이지에 사용자 정보를 저장할 수 있다.

웹 서버가 웹 페이지를 브라우저로 보내면 연결이 종료되고,

서버는 사용자에 대한 모든 정보를 잊어버립니다.

쿠키는 사용자에 대한 정보를 기억하기 위해 위해 발명되었다.

사용자가 웹 페이지를 방문하면 사용자의 이름이 쿠키에 저장될 수 있습니다.
다음에 사용자가 페이지를 방문하면 쿠키는 사용자의 이름을 기억한다.

쿠키는 다음과 같은 name - value 쌍으로 저장됩니다.

username = John Doe

브라우저가 서버에서 웹 페이지를 요청하면 페이지에 속한 쿠키가 요청에 추가됩니다.

이 방법으로 서버는 사용자에 대한 정보를 "기억"하는 데 필요한 데이터를 가져옵니다.

단 브라우저에서 로컬 쿠키 지원이 꺼져 있는 경우 쿠키를 사용하지 못한다.

JavaScript로 쿠키 만들기

JavaScript는 document.cookie속성을 사용하여 쿠키를 생성, 읽기 및 삭제할 수 있습니다.

쿠키 생성

document.cookie = "username=John Doe";

만료 날짜(UTC 시간)를 추가할 수도 있습니다.

기본적으로 쿠키는 브라우저를 닫으면 삭제됩니다.

(여기서 궁금한 점은 쿠키는 브라우저를 닫아도 데이터를 기억하는것이라고 했다.

일반적으로 쿠키에는 만료일이 있다.

예를 들어, 브라우저를 닫는 경우 자동으로 삭제되는 쿠키도 있으며(세션쿠키)

일부는 수동으로 삭제되기 전까지 남아있는 등 더 오랜기간 동안 컴퓨터에 저장되는 쿠키도 있다.(지속적 쿠키))

참고사이트 : https://kobrekim.com/footer-ko-kr/cookie-policy-ko-kr/what-are-cookies-and-why-we-use-them-ko-kr/

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

경로 매개변수를 사용하면 쿠키가 속한 경로를 브라우저에 알릴 수 있습니다.

기본적으로 쿠키는 현재 페이지에 속합니다.

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

쿠키 읽기

let x = document.cookie;

쿠키 변경

쿠키를 만들때와 같은 방식으로 쿠키를 변경할 수 있다.

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

쿠키 삭제

쿠키를 삭제하는 것은 매우 간단하다.

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

만료 매개변수를 과거 날짜로 설정하기만 하면 됩니다.

올바른 쿠키를 삭제하려면 쿠키 경로를 정의해야 합니다.

경로를 지정하지 않으면 일부 브라우저에서는 쿠키를 삭제할 수 없습니다.

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

쿠키 문자열

document.cookie 속성은 일반 텍스트 문자열처럼 보입니다.

하지만 그렇지 않다!

document.cookie에 전체 쿠키 문자열을 작성하더라도 다시 읽으면 이름-값 쌍만 볼 수 있습니다.

새 쿠키를 설정하면 이전 쿠키를 덮어쓰지 않습니다.

쿠키를 이용하여 javascript 예제를 만들어보자

쿠키를 set, get, check하는 함수 3개를 만들었다.

<!DOCTYPE html>
<html>
<head>
<script>
function setCookie(cname,cvalue,exdays) {
  const d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  let expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i < ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

function checkCookie() {
  let 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>

'Web > javascript' 카테고리의 다른 글

prototype의 이해 (0)	2023.01.16
arguments 객체 (0)	2023.01.16
클로저(Closures) (0)	2023.01.10
JS Type 형 변환 테이블 (0)	2023.01.10
JS if문 , switch문 , 반복문 (0)	2023.01.10

doornuddle

쿠키