[javascript]javascript로 쿠키 생성

페이지 넘길 때 값을 넘겨주는 방식으로 POST/GET방식, 쿼리스트링방식, 쿠키 등 이 세가지 방식이 자주 쓰인다.

 

 

1. 쿠키생성시 날짜와 시간을 설정할 때 자주 사용하는 함수

 

new Date(); 현재 날짜,시간을 반환한다.

 

ooo.getMonth() : 현재 ooo의 월을 정수로 반환 한다 (0~11로 반환됨 즉, 1월은 0으로 반환됨)

ooo.getDate() : 현재 ooo의 날을 숫자로 반환한다. (Month와 다르게 1~31까지 우리가 사용하는 형식 그대로 반환됨)

 

ooo.getDate(7) : 현재 ooo의 날을 교체한다 7일로 교체한다.

 

escape(“문자열”)함수 : 괄호안의 문자를 16진수로 바꿔준다.

 

 

<script>
    function set_cookie(name, value, expiredays){
        var todayDate = new Date();
        todayDate.setDate( todayDate.getDate() + expiredays);
        //쿠키 생성
        document.cookie = name + "=" + escape( value ) + "; path=/ ; expires=" + todayDate.toGMTString() +";"
        // console.log(document.cookie);
        // return false;
    }
</script>

 

쿠키 생성부분 : document.cookie는 key:value ; 형식으로 나눠진다.

 

 

 

 

 

2.  쿠키 식별자

 

indexOf(value, position)함수 : ()안의 value 문자열에서 값이 존재하면 검색된 문자열이 '첫번째'로 나타나는 위치 index를 리턴한다. position의 기본값은 0

찾는 문자열이 없으면 -1을 리턴한다.

문자열을 찾을 때 대소문자를 구분.

 

<script>
// 쿠키 식별자 (함수가 아니라서 호출할 때만 열리는게 아니라 페이지 열릴때마다 항상 훑고 내려가는 구문)
    cookiedata = document.cookie;
    if(cookiedata.indexOf("divpop=Y") < 0){
        //쿠키 존재하지 않음
        $("#divpop").css("display","block");
    } else {
        //쿠키 존재함
        $("#divpop").css("display","none");    }
</script>

 

 

<< 쿠키 생성 규칙 >>

쿠키 생성 시 구성요소타이틀을 함부로 적으면 안된다.

f12 관리자모드 - Application에 들어가면 왼쪽 세로바에 Storage라는 구역이 나타나는데 거기안의 사이트를 아무거나 클릭

- 그래면 Name, Value, Domain, path, Expires/Max-Age 등이 보인다. 이 이름과 타이틀이 같아야 제대로 작동하게 된다.

 

 

 

 

 

 

아래는 전체코드

 

<!-- layer창(팝업) div -->
<div id="divpop">      
    <form name="div_frm">
        <input type="checkbox" name="chk_box" onclick="close_divpop('div_frm','divpop')">            
        오늘 더 이상 보이지 않기            
        <a href="javascript:;" onclick="close_divpop('div_frm','divpop')"><b>[닫기]</b></a>
    </form>        
</div>




<!-- Layer창 시작-->
<script>
    function close_divpop(frm, div){
        var k = eval('document.'+frm);
        if(k.chk_box.checked) set_cookie(div,'Y',1);        
        $("#divpop").css("display","none");
    }
</script>

<script>
    function set_cookie(name, value, expiredays){
        var todayDate = new Date();
        todayDate.setDate( todayDate.getDate() + expiredays);
        //쿠키 생성
        document.cookie = name + "=" + escape( value ) + "; path=/ ; expires=" + todayDate.toGMTString() +";"
        // console.log(document.cookie);
        // return false;
    }
    // 쿠키 식별자 (함수가 아니라서 페이지 열리면 항상 훑고 내려가는 구문)
    cookiedata = document.cookie;
    if(cookiedata.indexOf("divpop=Y") < 0){
        //쿠키 존재하지 않음
        $("#divpop").css("display","block");
    } else {
        //쿠키 존재함
        $("#divpop").css("display","none");    }
</script>