[Java Script ] Cookie (쿠키) 사용법
Cookie (쿠키) 사용법
[검토 배경]
- AI Blog 구성을 목적으로, 아파치 서버를 구축 하여 웹 사이트 환경을 구성 하였으나
- 개발 과정 중 서비스 중인 html 페이지를 수정 하여도,
- 사용자 단말이나 PC 에 이전 정보가 남아, 수정된 html 페이지를 새로 읽어 들이지 못하는 문제 해결, 즉 최초 사용자가 접속하여 기록된 정보만 보여지게 됨
- 방안 : 쿠키 설정 하여, 페이지 load 시 마다 이전에 다운 받아 local 에 기록된 쿠키를 제거하고 새로 받을수 있도록 함
- 참고 : https://homzzang.com/b/js-78
[배경 지식]
- Cookie 정의
- 쿠키 : 컴퓨터에 작은 텍스트 파일로 저장된 데이터로,
- 웹 서버가 웹 페이지를 브라우저로 보내면 연결이 종료되고 서버는 사용자에 대한 모든 것을 잊어버림.
- 기술 배경
- 쿠키는 "사용자에 관한 정보를 기억하는 방법"이라는 문제를 해결하기 위해 고안됨.
- 사용자가 웹 페이지를 방문하면 자신의 이름을 쿠키에 저장 가능.
- 다음에 사용자가 페이지 방문하면 쿠키는 자신의 이름을 "기억".
- 쿠키는 이름=값 쌍으로 저장되며, 각 이름=값 쌍은 ; (세미콜론)으로 구분.
- (예) document.cookie = "username=Hz Sinbi; expires=Thu, 19 Dec 2019 12:00:00 UTC";
- 동작 방식
- 브라우저가 서버에서 웹페이지를 요청하면 해당 페이지에 속하는 쿠키가 요청에 추가됨.
- 이런 식으로 서버는 사용자에 대한 정보를 "기억"하는 데 필요한 데이터를 얻음.
- 브라우저에서 로컬 쿠키 지원이 해제되어 있으면 아래 예제 중 어느 것도 작동 안 함
["쿠키 삭제" 예제 코드] : <boad> 에 "onload=" 시 "delCookie()" 을 호출하여 쿠키 삭제
<!DOCTYPE html>
<html>
<head lang="ko">
<meta charset="UTF-8">
<!-- 모바일 환경 : 모바일 너비 맞추기, 최초 화면의 크기는 100%, 화명을 줄었을때 그키 100%, 사용자가 확대 축소를 못하게 함 -->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>AI Insung</title>
<link rel="stylesheet" href="./main.css">
<script>
function delCookie() {
let date = new Date();
date.setDate(date.getDate() - 1); // 이전 날짜로 설정.
let setCookie = '';
setCookie += 'CookieName = Hz;';
setCookie += 'expires = ' + date.toUTCString();
document.cookie = setCookie;
}
</script>
</head>
<body onload="delCookie()">
<table cellspacing="0" cellpadding="1" width="100%">
<tr>
<td>
<a>Hello World!<img src="./index.png"></a>
</td>
</tr>
</table>
</body>
</html>
Comments
Post a Comment