๋ฐ์ํ
๐ช์ฟ ํค(Cookie)
์๋ฒ์ ํด๋ผ์ด์ธํธ์ ์ฐ๊ฒฐ ์ง์์ฑ์ ์ ๊ณตํ๊ธฐ ์ํด ํด๋ผ์ด์ธํธ์ ์ ์ฅํ ๋ฌธ์๊ฐ
์ ์๋ ์น์๋ฒ์ ์ด๋ฆ์ ์๋ณ์๋ก ์ฌ์ฉํ์ฌ ๋ค์์ ์ฟ ํค๋ฅผ ์ ์ฅํ๋ฉฐ,
์น์๋ฒ์ ์ ์ํ์ฌ ์นํ๋ก๊ทธ๋จ์ ์์ฒญํ ๊ฒฝ์ฐ
์น์๋ฒ์ ์ด๋ฆ์ผ๋ก ์ ์ฅ๋ ๋ชจ๋ ์ฟ ํค๋ฅผ ์นํ๋ก๊ทธ๋จ์๊ฒ ์ ๋ฌ
์๋ฒ์ ์นํ๋ก๊ทธ๋จ ์์ฒญ ์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ฟ ํค๋ ๋ฌด์กฐ๊ฑด ์ ๋ฌ๋๋ฏ๋ก ํ์ฉํ๋ฉด ๋จ
๐ช์ฟ ํค & ์น์๋น์ค
์๋ฒ์ ํด๋ผ์ด์ธํธ์ ์ฐ๊ฒฐ์ ์ง์์ฑ์ ์ ๊ณตํ์ง ์์
์์ฒญ์ ์๋ต ํ ์๋ฒ๊ฐ ๋จผ์ ๋์ ์?
์ต๋ช ์ ๋ค์์ ์ฌ์ฉ์๊ฐ ์น ์๋น์ค๋ฅผ ์ด์ฉํ๋ฏ๋ก
์ฐ๊ฒฐ์ง์์ฑ์ ํ์ฉํ๊ฒ ๋๋ฉด
์ ์๋ ์ฌ์ฉ์๋ง๋ค ์์ผ์ ๋ง๋ค์ด์ผ ํ๋ฏ๋ก ๋ฉ๋ชจ๋ฆฌ ์ฐจ์ง๊ฐ ๋ง์์ง
์ฆ, ๋์์ ์์๊ฐ ๋ง์์ง์๋ก ์๋ฒ์ ์์ฒญ์ ๋ํ ์๋ต์ด ๊ณ์ ์ง์ฐ๋จ
๊ทธ๋ ๋ค๋ฉด ๊ธฐ์กด์์ฒญ์ฌ์ฉ์ vs ์๋ก์ด์์ฒญ์ฌ์ฉ์ ๊ตฌ๋ถ ์ด๋ป๊ฒ?
์ฟ ํค๋ฅผ ํตํด ์๊ฒ๋จ
๐ช์ฟ ํค & ์๋ฐ์คํฌ๋ฆฝํธ
์๋ฐ์คํฌ๋ฆฝํธ์์๋ ๋์ ์ธ ํ์ด์ง ๋ง๋ค ๋ ์ฟ ํค๋ฅผ ์ฌ์ฉํจ
์ฆ, ์ฟ ํค์ ์ธ์ ์ค ์๋ฐ์คํฌ๋ฆฝํธ๋ ์ฟ ํค๋ง ์ฌ์ฉ ๊ฐ๋ฅํจ
ex) ์ฟ ํค๊ฐ ์์ผ๋ฉด? ํ์ ์ฐฝ ๋์ฐ์ง ๋ง์ธ์
์ฟ ํค๊ฐ ์์ผ๋ฉด? ํ์ ์ฐฝ ๋์์ฃผ์ธ์.
๐ช์ฟ ํค๋ ์ธ์ ์ด์ฉ?
๋ฐ์ค๋ชจ๋ธ ๋์์ธ ์ ๋์ ์ธ ํ์ด์ง๋ฅผ ๊ตฌํํ๊ธฐ ์ํด์ ์ฌ์ฉ
ex) ํ์ ์ฐฝ : ์ค๋ํ๋ฃจ๋์๋ณด์ง์๊ธฐ ์ฒดํฌ ์ ํด๋ผ์ ์ฟ ํค ์ ์ฅ
ex) ์ฟ ํค๋ฅผ ์ด์ฉํด ๋ก๊ทธ์ธ ์ํ ์ ์ง ์ฒดํฌ ์ ๋ธ๋ผ์ฐ์ ์ฐฝ ๋ซ์๋ ๋ก๊ทธ์ธ ์ ์ง
๐ช์ฟ ํค VS ์ธ์
์ฟ ํค : ํด๋ผ์ด์ธํธ์ ์ ์ฅํ ๋ฌธ์๊ฐ
์ธ์ : ์๋ฒ์ ์ ์ฅํ ๋ฌธ์๊ฐ
ex) ์ฅ๋ฐ๊ตฌ๋์ ๋ฌผ๊ฑด ๋ด์๋ ์๋ฒ์ ์ ์ํด ์๋ฌด๋ฐ ์์ ํ์ง ์์ผ๋ฉด
30๋ถ ๋ค ์๋ ๋ก๊ทธ์์ : ์ธ์ ์ด์ฉ
๋ก๊ทธ์์ํ๋๋ฒ : ๋ธ๋ผ์ฐ์ ๋ซ๊ธฐ , ๋ก๊ทธ์์์ด๋ฒคํธ๋ฐ์์ํค๊ธฐ, ๊ฐ๋งํ ์๊ธฐ - ์ธ์ ๋ง๋ฃ
๐ช์ฟ ํค & ๊ฐ๋ฐ์๋๊ตฌ
์ ํ๋ฆฌ์ผ์ด์ >> ์ ์ฅ์ฉ๋ >> ์ฟ ํค
๐ช์ฟ ํค(Cookie) ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
</head>
<body>
<form name="cookieForm">
์์ด๋ : <input type="text" id="id">
<button type="button" id="saveIdBtn">์
๋ ฅ ์์ด๋ ์ ์ฅ</button>
<button type="button" id="useIdBtn">์ ์ฅ ์์ด๋ ์ฌ์ฉ</button>
<button type="button" id="removeIdBtn">์ ์ฅ ์์ด๋ ์ญ์ </button>
</form>
<script type="text/javascript">
๐ชํด๋ผ์ด์ธํธ์ ์ฟ ํค๋ฅผ ์์ฑํ์ฌ ์ ์ฅํ๊ฑฐ๋ ํด๋ผ์ด์ธํธ์ ์ ์ฅ๋ ์ฟ ํค๋ฅผ ๋ณ๊ฒฝํ๋ ํจ์
//=> ์ฟ ํค๋ ์ด๋ฆ๊ณผ ๊ฐ์ ํ๋์ ์์ผ๋ก ๋ฌถ์ด ์ฒ๋ฆฌ - ํ์) ์ด๋ฆ=๊ฐ
//=> ๋ค์์ ์ด๋ฆ๊ณผ ๊ฐ์ ; ๊ธฐํธ๋ก ๊ตฌ๋ถํ์ฌ ์ฌ์ฉ
//=> ์ฟ ํค์๋ ๋ฐ๋์ ์ฟ ํค๋ช
๊ณผ ์ฟ ํค๊ฐ์ด ์ ์ฅ - ํ์ ์์
//=> ์ ์ฉ๋ฒ์, ๋๋ฉ์ธ, ์ง์์๊ฐ ๋ฑ์ ์ฟ ํค์ ์ ์ฅ - ์ ํ ์์(์๋ต์ ๊ธฐ๋ณธ๊ฐ ์ฌ์ฉ)
function setCookie(name,value,path,expires) {
var sc=""; //์ฟ ํค๋ฅผ ์ ์ฅํ๊ธฐ ์ํ ๋ณ์
//๐ช์ฟ ํค๋ณ์์ ์ฟ ํค๋ช
๊ณผ ์ฟ ํค๊ฐ์ ํ๋๋ก ๋ฌถ์ด ์ถ๊ฐ
// => ์ฟ ํค๊ฐ์ ์๋ฌธ์, ์ซ์, ์ผ๋ถ ํน์๋ฌธ์๋ฅผ ์ ์ธํ ๋ฌธ์๊ฐ ์ ์ฅ ๋ถ๊ฐ๋ฅ
// => ์๋ฌธ์, ์ซ์, ์ผ๋ถ ํน์๋ฌธ์๋ฅผ ์ ์ธํ ๋ฌธ์๊ฐ์ ๋ถํธํ ์ฒ๋ฆฌํ์ฌ ์ ์ฅ ๊ฐ๋ฅ
sc+=name+"="+encodeURIComponent(value)+";"
//๐ช์ฟ ํค๋ณ์์ path ์ด๋ฆ์ผ๋ก ์ฟ ํค์ ์ ์ฉ๋ฒ์๋ฅผ ๋ฌถ์ด ์ถ๊ฐ
//=> path ์ด๋ฆ์ ์์ฑ๊ฐ ์๋ต์ ๊ธฐ๋ณธ๊ฐ : ํ์ฌ ์์ฒญ ์นํ๋ก๊ทธ๋จ์ ์ ์ฅ ๋๋ ํ ๋ฆฌ
sc+="path="+path+";"
//๐ช์ฟ ํค๋ณ์์ expires ์ด๋ฆ์ผ๋ก ์ฟ ํค์ ์ง์์๊ฐ์ ๋ฌถ์ด ์ถ๊ฐ
//=> expires ์ด๋ฆ์ ์์ฑ๊ฐ ์๋ต์ ๊ธฐ๋ณธ๊ฐ : 0
//=> ์ฟ ํค์ ์ง์์๊ฐ : ์ฟ ํค๊ฐ ํด๋ผ์ด์ธํธ์ ์ ์ฅ๋์ด ์ฌ์ฉ๋ ์ ์๋ ์๊ฐ
//=> ์ง์์๊ฐ์ด [0]์ผ๋ก ์ค์ ๋ ์ฟ ํค๋ ๋ธ๋ผ์ฐ์ ๋ฉ๋ชจ๋ฆฌ์ ์ ์ฅ - ๋ธ๋ผ์ฐ์ ๊ฐ ์ข
๋ฃ๋๋ฉด ์๋ฉธ
//=> ์ง์์๊ฐ์ด [0]์ด ์๋ ๊ฐ์ผ๋ก ์ค์ ๋ ์ฟ ํค๋ ์ฟ ํคํ์ผ์ ์ ์ฅ - ๋ธ๋ผ์ฐ์ ๊ฐ ์ข
๋ฃ๋์ด๋ ๋ฏธ์๋ฉธ
var date = new Date(); //ํด๋ผ์ด์ธํธ์ ํ์ฌ ๋ ์ง์ ์๊ฐ์ด ์ ์ฅ๋ Date ๊ฐ์ฒด ์์ฑ
date.setDate(date.getDate()+expires); //Date ๊ฐ์ฒด์ ์ ์ฅ๋ ๋ ์ง ๋ณ๊ฒฝ - ์ผ ์ฆ๊ฐ
sc+="expires="+date.toUTCString();
//๐ชcookie ๊ฐ์ฒด : ๋ธ๋ผ์ฐ์ ์ ์ฟ ํค๋ฅผ ์ ์ฅํ๊ธฐ ์ํ ๊ฐ์ฒด
document.cookie=sc; //ํด๋ผ์ด์ธํธ์ ์ฟ ํค ์ ์ฅ
}
๐ชํด๋ผ์ด์ธํธ์ ์ ์ฅ๋ ์ฟ ํค์์ ๋งค๊ฐ๋ณ์๋ก ์ ๋ฌ๋ฐ์ ์ด๋ฆ์ ์ฟ ํค๊ฐ์ ๋ฐํํ๋ ํจ์
function getCookie(name) {
//cookie ๊ฐ์ฒด์ ์ ์ฅ๋ ์ฟ ํค๋ฅผ [;] ๋ฌธ์๊ฐ์ผ๋ก ๊ตฌ๋ถ ๋ถ๋ฆฌํ์ฌ Array ๊ฐ์ฒด๋ก ๋ฐํ๋ฐ์ ์ ์ฅ
var gc=document.cookie.split(";")
for(i=0; i<gc.length; i++){
//๐ชArray ๊ฐ์ฒด์ ์์๊ฐ(์ด๋ฆ=๊ฐ)์ [=] ๊ธฐํธ๋ก ๋ถ๋ฆฌํ์ฌ 0๋ฒ์งธ ์์๊ฐ์ ๋งค๊ฐ๋ณ์๋ก ์ ๋ฌ๋ฐ์ ๊ฐ๊ณผ ๋น๊ตํ์ฌ ๊ฐ์ ๊ฒฝ์ฐ,
if(gc[i].split("=")[0]==name){
//Array ๊ฐ์ฒด์ ์์๊ฐ(์ด๋ฆ=๊ฐ)์ [=] ๊ธฐํธ๋ก ๋ถ๋ฆฌํ์ฌ 1๋ฒ์งธ ์์๊ฐ์ผ๋ก ๋ฐํ
return gc[i].split("=")[1];
}
}
//๐ช๋งค๊ฐ๋ณ์๋ก ์ ๋ฌ๋ฐ์ ์ด๋ฆ์ ๊ฐ์ด ์๋ ๊ฒฝ์ฐ, null ๋ฐํ
return null;
}
๐ช[์ ๋ ฅ ์์ด๋ ์ ์ฅ] ๋ฒํผ์ ํด๋ฆญํ ๊ฒฝ์ฐ ํธ์ถ๋๋ ์ด๋ฒคํธ ์ฒ๋ฆฌ ํจ์ ๋ฑ๋ก
//=>์
๋ ฅํ๊ทธ์ ์
๋ ฅ๊ฐ(์์ด๋)๋ฅผ ๋ฐํ๋ฐ์ ํด๋ผ์ด์ธํธ์ ์ฟ ํค์ ์ ์ฅ
document.getElementById("saveIdBtn").onclick = function() {
var id = cookieForm.id.value; //์
๋ ฅํ๊ทธ์ ์
๋ ฅ๊ฐ์ ๋ณ์์ ์ ์ฅ
if(id==""){//์
๋ ฅ๊ฐ์ด ์๋ ๊ฒฝ์ฐ
alert("์์ด๋๋ฅผ ์
๋ ฅํด ์ฃผ์ธ์.")
return;
}
//์
๋ ฅ๊ฐ์ ์ฟ ํค์ ํ๋ฃจ๋์ ์ ์ฅ
setCookie("id", id, "/", 1); //์ฟ ํค์ด๋ฆ:"id" , ์ฟ ํค๊ฐ(์
๋ ฅ๊ฐ):id , ์ ์ฉ๋ฒ์: ์ ์ฒด , ์ ์ฉ์๊ฐ: ํ๋ฃจ
}
๐ช[์ ์ฅ ์์ด๋ ์ฌ์ฉ] ๋ฒํผ์ ํด๋ฆญํ ๊ฒฝ์ฐ ํธ์ถ๋๋ ์ด๋ฒคํธ ์ฒ๋ฆฌ ํจ์ ๋ฑ๋ก
//=>ํด๋ผ์ด์ธํธ์ ์ ์ฅ๋ ์ฟ ํค์์ ์ฟ ํค๊ฐ(์์ด๋)๋ฅผ ๋ฐํ๋ฐ์ ์
๋ ฅํ๊ทธ์ ์
๋ ฅ๊ฐ์ผ๋ก ์ถ๋ ฅ
document.getElementById("useIdBtn").onclick = function() {
var id = getCookie("id");
if (id == null) {
alert("์ฟ ํค์ ์ ์ฅ๋ ์์ด๋๊ฐ ์์ต๋๋ค.");
return;
}
//์
๋ ฅํ๊ทธ์ ์
๋ ฅ๊ฐ ๋ณ๊ฒฝ - ์ถ๋ ฅ
cookieForm.id.value = id;
}
๐ช[์ ์ฅ ์์ด๋ ์ญ์ ] ๋ฒํผ์ ํด๋ฆญํ ๊ฒฝ์ฐ ํธ์ถ๋๋ ์ด๋ฒคํธ ์ฒ๋ฆฌ ํจ์ ๋ฑ๋ก
//=>ํด๋ผ์ด์ธํธ์ ์ ์ฅ๋ ์ฟ ํค ์ญ์
document.getElementById("removeIdBtn").onclick = function() {
//์ฟ ํค ์ญ์ - ์ฟ ํค์ ์ง์์๊ฐ์ ๊ณผ๊ฑฐ๋ก ๋ณ๊ฒฝ
setCookie("id","","/",-1); //์ง์์๊ฐ: ๊ณผ๊ฑฐ
}
</script>
</body>
</html>
๋ฐ์ํ
