JavaScript - 쿠키 가져오기

JavaScript의 쿠키값을 가져오기 위해선 함수를 만들어야 한다.

일단 쿠키값이 있는지 확인해보고 없으면 만들어보자.

구글 크롬에서 개발자도구(F12)를 눌러 현재 가지고 있는 쿠키값을 확인할 수 있는데

F12 -> Application -> Storage -> Cookies -> 확인할 경로에 들어가면

가지고 있는 쿠키값의 목록들을 확인할 수 있다.

* document.Cookie를 사용하면 현재 세션에서 가지고 있는 쿠키값을 코드로 확인할 수 있다.

만약 쿠키값이 없다면 빈 공간을 클릭하여 직접 쿠키를 생성할 수 있다.

자, 이제 함수를 만들어 보자.

function getCookie(name) { --가져올 쿠키의 이름을 파라미터 값으로 받고

     var nameOfCookie = name + "="; --쿠키는 "쿠키=값" 형태로 가지고 있어서 뒤에 있는 값을 가져오기 위해 = 포함

     var x = 0;

     while (x <= document.cookie.length) {  --현재 세션에 가지고 있는 쿠키의 총 길이를 가지고 반복

          var y = (x + nameOfCookie.length); --substring으로 찾아낼 쿠키의 이름 길이 저장

          if (document.cookie.substring(x, y) == nameOfCookie) { --잘라낸 쿠키와 쿠키의 이름이 같다면

               if ((endOfCookie = document.cookie.indexOf(";", y)) == -1) --y의 위치로부터 ;값까지 값이 있으면 

                    endOfCookie = document.cookie.length; --쿠키의 길이로 적용하고

               return unescape(document.cookie.substring(y, endOfCookie)); --쿠키의 시작점과 끝점을 찾아서 값을 반환

          }

          x = document.cookie.indexOf(" ", x) + 1; --다음 쿠키를 찾기 위해 시작점을 반환

          if (x == 0) --쿠키 마지막이면 

               break; --반복문 빠져나오기

     }

     return ""; --빈값 반환

}

함수를 작성했으면 사용해서 값을 확인해보자.

우리는 testCookie를 가져와야 하므로 만들었던 getCookie() 함수에 파라미터로 testCookie를 넣고 값을 반환하면 된다.

var cookie = getCookie('testCookie');
if (cookie != "") {
     alert("쿠키값은 : " + cookie);
}

결과는!

JavaScript - 날짜 설정하기 (사용자 지정 날짜 범위) + 크롬 디버깅 방법

해당 기간의 날짜 안에 무언가를 실행하거나 처리하고 싶다면 

new Date를 활용하면 된다.

Date객체는 활용 범위가 넓은데 제일 간단하게 설정할 수 있는 날짜 셋팅은 아래와 같다고 작성자는 생각한다.

예를 들어 2020-03-12 09:00:00 ~ 2020-03-13 23:59:59 사이에 해당하는 로직을 만들고 싶다면

아래와 같이 작성하면 된다.

var startTime = new Date('03/12/2020 09:00:00'); //시작기간 셋팅
var endTime = new Date('03/13/2020 23:59:59'); //종료기간 셋팅
var nowTime = new Date(); //현재시간 셋팅

if (nowTime < startTime || endTime > nowTime) { //현재기간이 시작기간보다 지나거나 종료기간이 안될때
     alert('이벤트가 실행되었습니다.'); 
     return false; 
} else {

     alert('이벤트가 종료되었습니다.');

     return false;

}

실제로 돌아가는지 궁금하지 않나?

우리는 테스트 해볼 필요가 있다.

크롬 브라우저를 사용중이라면 F12를 눌러 개발자 도구로 들어가서 Console 탭에서 테스트를 할 수 있다.

테스트 하기 전 디버깅을 잡아야 한다.

디버깅 방법

1. F12를 눌러 개발자 도구를 들어간다.

2. Sources 탭에 들어가서 실행되고 있는 페이지를 더블 클릭하면 작성한 코드들이 나와있을 것이다.

3. 멈추고자 하는 라인의 번호를 클릭한다. (6번째 라인을 중지하고 싶으므로 숫자 '6'을 클릭) 파란색으로 클릭했다는 표시가 나타난다.

4. F5(새로고침)를 눌러 코드가 재 실행 되도록 한다.

5. 디버깅 시작 (선택했던 라인에서 코드 실행이 일시정지)

여기 까지가 디버깅 방법이다.

더 나아가 테스트를 해야하므로 값을 변경해보자.

Console탭으로 들어간다.

디버깅 중 실행이 되었던 코드는 변수를 호출해서 값을 볼 수 있다. (전역 변수는 디버깅 끝난 후 확인가능)

변수들을 확인하여 내가 설정한 값이 맞는지 확인해본다.

(Console창에 변수입력하여 확인하거나 Source코드에서 마우스로 올려놓아도 나타난다.)

현재의 시간은 nowTime 이므로 IF 조건에 맞다. 그러므로 '이벤트가 실행되었습니다.'라는 alert창이 뜰것이다.

(디버깅 중 다음 코드로 넘기는 방법은 F10)

그런데 현재 시간을 변경해서 이벤트가 종료되는지를 확인하려면

디버깅 중 직접 코드를 수정해주면 된다.

Console창에서 변경하고자 하는 변수를 셋팅해 주면 된다.

그 다음 F10을 눌러 진행을 하면

IF 조건에 맞지 않으므로 '이벤트가 종료되었습니다.' 라는 alert창이 나타나게 된다.

Javascript, Jquery로 실시간 시간 구하기