웹페이지에서 사용되는 쿠키를 Javascript를 이용하여
생성, 삭제, 기간만료 등의 기능을 제어하는 방법을 알아보겠습니다.
쿠키란?
우리가 웹사이트를 사용할 때 크롬 같은 브라우저에 데이터가 보이게 되는데요.
이런 데이터는 서버에서 DB를 거쳐 데이터가 보이게 됩니다.
이러한 데이터는 서버의 데이터지만 우리가 사용하는 브라우저에도
데이터의 생성과 삭제 등이 일어나게 됩니다.
이렇게 브라우저를 통해 관리되는 데이터를 쿠키라고 합니다.
쿠키는 사용자의 기기정보 같은 개인식별 값으로 구성될 수 있습니다.
일반적인 예로 특정 사이트의 팝업에 다음에 보지 않기 같은 기능은
쿠키에 해당 기능값을 부여하여 같은 브라우저로 접속 시 팝업을 띄우지 않게
하는 역할을 수행합니다.
이러한 값은 인터넷 임시파일에 저장되며 이 파일을 저장하게 되면
쿠키값은 초기화 되게 됩니다.
세션과 다른 점
세션은 데이터를 서버 기반으로 저장하지만
쿠키는 해당 정보를 브라우저(Client)에 저장합니다.
그래서 중요한 정보 같은 경우 세션에 저장하는 것이 올바른 방법입니다.
(사용자가 쿠키정보를 변조할 수 있음)
쿠키 예제 소스
위에 예제로 설명했던 팝업을
쿠키 사용으로 한번 구현해 보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
function deleteCookie() {
var id = document.getElementById("cookie_id").value;
var today = new Date();
today.setTime(today.getTime() - 1*24*60*60*1000);
document.cookie = escape(id)+"=; path=/; expires="+today.toUTCString()+";";
}
function getCookie() {
var id = document.getElementById("cookie_id").value;
if(document.cookie.length != 0){
var id_idx = document.cookie.split('; ');
for(var i=0; i<id_idx.length; i++){
var arr = id_idx[i].split('=');
if(id == arr[0]){
document.getElementById("cookie_save").value = arr[1];
}
}
}else{
return 0;
}
}
function setCookie(time) {
var today = new Date();
if(time == 'second'){
today.setMilliseconds(30000); //30초
}else{
today.setTime(today.getTime() + 3*24*60*60*1000);
}
var id = document.getElementById("cookie_id").value;
var val = document.getElementById("cookie_val").value;
document.cookie = escape(id)+"="+escape(val)+"; path=/; expires="+today.toUTCString()+";";
window.close();
}
</script>
</head>
<body>
쿠키명<input type="text" id="cookie_id"><br>
쿠키값<input type="text" id="cookie_val"><br><br>
<button onclick="setCookie('second')">쿠키 저장(30초)</button>
<button onclick="setCookie('day')">쿠키 저장(3일)</button><br>
<button onclick="getCookie()">쿠키 값</button>
<button onclick="deleteCookie()">쿠키 삭제</button><br><br>
저장된 쿠키값<input type="text" id="cookie_save"><br>
</body>
</html>
구동 화면
쿠키명과 쿠키값에 각각 데이터를 입력하고
저장을 누르면 쿠키가 저장되게 됩니다.
3일과 30초의 만료일을 갖는 쿠키를 생성한 모습입니다.
쿠키 값과 쿠키 삭제는 쿠키명에 값을 넣고
각각 버튼을 누르면 쿠키명에 해당하는 값을 보여주거나
해당 쿠키를 삭제하는 역할을 수행하게 됩니다.
저장된 쿠키를 조회한 모습.
삭제한 모습입니다.
이는 단순 삭제한 모습이 아니라
기간을 과거일로 주어 일자를 만료시킨 모습입니다.
'Dev > JavaScript' 카테고리의 다른 글
| [Javascript] 체크박스 전체선택 해제 예제소스 (0) | 2023.01.28 |
|---|---|
| [Javascript] 페이지 새로고침 명령어 구현 소스 (0) | 2023.01.27 |
| [Javascript] 업로드 이미지 미리보기 예제소스 (0) | 2023.01.26 |
| [Javascript] iframe post 전송 예제 (0) | 2022.12.26 |
| [Javscript] 문자를 숫자, 숫자를 문자로 변환하기 (0) | 2022.12.09 |