Back to feed
Renewal·서른의 생활코딩

Sample Source 5) JavaScript Basic Document Structure: Cookie (2)

NS
normalstory
cover image


Sample Source 5) JavaScript Basic Document Structure: cookie (2)



Creating popups and controlling them with cookies

1)Example

<!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>cookie</title>

<script type="text/javascript">

//<![CDATA[

var cookieName="pop_chk";

var cookieValue="pop2010";


// check the cookie first 

var str=document.cookie;  // initialize 

if(str.indexOf("pop_chk") != -1){ // indexOf "returns -1 when the target character is not found." returns 0, 1, ... when found

num = str.substr(cookieName.length+1);

// substr lets you extract the desired substring using index positions. 

// str(start index, length) /// if length is omitted it goes to the end...   

//-> in the end, it grabs the value from the cookie.

}

// check the value

alert(num);

// cookie creation function 

function mk_cookie(){

today=new Date();

today.setDate(today.getDate()+1);

document.cookie=cookieName+ "=" +escape(cookieValue)+ "; path=/; expires=" +today.toGMTString()+ ";";

// path=/   <-"path" 

}

// cookie deletion function 

function del_cookie(){

today=new Date();

today.setDate(today.getDate()-10); // set the expiry to a past date so the cookie has already expired and is therefore deleted.

document.cookie=cookieName+ "=" +escape(cookieValue)+ "; path=/; expires=" +today.toGMTString()+ ";";

}

// load cookie

document.write(document.cookie+"<br />");

//]]>

</script>

</head>


<body>

<div id="popup" style="background-color:yellow; width:200px;"> 

This is an ad banner. 

<br /><br />

<a href="javascript:mk_cookie();">Don't show this window again </a>

</div>

<br /> 

<a href="javascript:del_cookie();">delete cookie</a>  

<br />


</body>

</html> 








2) The roles are flipped... swap them
 <!DOCTYPE html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>cookie</title>

<script type="text/javascript">

//<![CDATA[

window.onload = function(){// run the function after the document has finished loading 

// <= swap the roles — an "IF" statement in the middle causes an error  :: because it is an interpreted language read line by line 

// swap the roles.

if (num == "pop2010") {

document.getElementById("popup").style.display = "none";

}

}

var cookieName="pop_chk";

var cookieValue="pop2010";

// check the cookie first 

var str=document.cookie;  // initialize 

if(str.indexOf("pop_chk") != -1){ // indexOf는 "찾고자하는 문자가 없으면 -1이 나온다." 있으면 0,1

num = str.substr(cookieName.length+1);

//substr인덱스 번호를 이용해 원하는 문자열을 가져다 쓸 수 있게 한다. 

//str(시작 번호,문자 개수)///문자 갯수안쓰면 끝까지...   

//-> 결국, 쿠키에서 값을 가져온다.

}

// occasional checkpoints — verify the value alert(num);

// cookie creation function 

function mk_cookie(){

today=new Date();

today.setDate(today.getDate()+1);

document.cookie=cookieName+ "=" +escape(cookieValue)+ "; path=/; expires=" +today.toGMTString()+ ";";

// path=/   <-"경로" 

}

// cookie deletion function 

function del_cookie(){

today=new Date();

today.setDate(today.getDate()-10); //만료값을 이전으로 바꿔서 만료기간이 이미 종료하게하여 삭제하는 형태를 만든다.

document.cookie=cookieName+ "=" +escape(cookieValue)+ "; path=/; expires=" +today.toGMTString()+ ";";

}

// load cookie

document.write(document.cookie+"<br />");

//]]>

</script>

</head>


<body>

<div id="popup" style="background-color:yellow; width:200px;"> 

This is an ad banner. 

<br /><br />

<a href="javascript:mk_cookie();">Don't show this window again </a>

</div>

<br /> 

<a href="javascript:del_cookie();">delete cookie</a>  

<br />


</body>

</html>

This English version was translated by Claude.

친절한 찰쓰씨
Written by
친절한 찰쓰씨

Pleasant Charles — UI/UX researcher at AIT. Keeping notes on design, planning, and slow days here since 2010.

More on the author's page

Keep reading

Renewal

Steadily, for the long haul, without burning out

Mar 31, 2026·9 min
Renewal

Tech-life balance

Feb 7, 2026·3 min
Renewal

Humanality, by Park Jeong-ryeol

Feb 7, 2026·11 min