javascript_쿠키

쿠키

• 하드에 파일로 저장되기 때문에 컴퓨터나 브라우저가 꺼졌다 다시 켜져도 값을 유지할 수 있다.
• name : 쿠키 이름 설정
• value : 쿠키 실제값
  • 값은 보통 true를 넣음. false는 안씀. 유효기간이 지나면 쿠키자체가 지워지니까.
• expires : 쿠키 유효기간
• domain : 저장된 쿠키를 서버에서 전송할 때의 도메인 지정 (많이 쓰진 않음)
• path : 쿠키가 전송될 서버의 url
  path를 / 로 지정하면 해당 사이트의 모든 페이지에서 쿠키정보를 확인할 수 있다.
• secure : 보안적인 채널로 전송
  대부분의 경우 쿠키에는 위험한 데이터를 저장하지 않는다. 그래서 많이 사용하지 않는다.
• document.cookie = name = value; expires = "20:00"; path = "/"
• 쿠키는 유효기간을 무한으로 줄 수 없다. 그래서 접속할 때 마다 갱신해주면 된다.
• 제일 많이 사용하는 기능 : 레이어드팝업, 로그인 유지하기

쿠키 읽기

function getCookie(c_name){
    let tmp_cookie = document.cookie.split(";"); //[쿠키이름 = true, value = "값", expires = "20:00", path = "/"]
    for(let i=0; i<tmp_cookie.length; i++){
        let tmp = tmp_cookie[i].split("="); //[쿠키이름, true]
        if(tmp[i].trim() == c_name){
            // 해당 쿠키가 있음.
            return unescape(tmp[i]);
            // unescape()는 알파벳, 숫자, @ - _ + * / .을 제회한 문자를 모두 16진수로 바꾼다. 
            // ;와 충돌을 피하기 위해 사용.
        }
    }
    return null;
}

• unescape()는 알파벳, 숫자, @ - _ + * / .을 제회한 문자를 모두 16진수로 바꾼다.
  ;와 충돌을 피하기 위해 사용.
• .trim() : 양 끝에 공백이 있으면 없앰.
• 생성한 쿠키를 ; 기준으로 자르고, = 기준으로 잘라서 해당 쿠키 이름인 게 있는지 체크
• 생성하는 사람마다 name, expires, path의 순서가 달라질 수 있어서 무조건 0번방을 체크하지 않는다.

쿠키 생성

• expires 에 밀리초로 계산된 시간을 넣어주면 됨

function setCookie(name, value, exp){
    let dt = new Date();
    dt.setTime(dt.getDate() + (1000*60*60*24*exp)); // 1000밀리초 * 60 -> 1분 * 60 -> 1시간 * 24 -> 1일 * exp
    //생성할땐 밀리초기준으로 날짜를 잡고 그걸 다시 날짜로 변경해줘야한다. 
    document.cookie = `${name}=${value};expires=${dt.toUTCString};path=/`;
    //toUTCString : 기준시 기준으로 날짜 변경
}

• 생성할땐 밀리초기준으로 날짜를 잡고 그걸 다시 날짜로 변경해줘야한다.
• toUTCString : 기준시 기준으로 날짜 변경
• document.cookie = `${name}=${value};expires=${dt.toUTCString};path=/`;

쿠키 삭제

• expires 에 0초 또는 -1초로 생성하면 됨.
• 삭제 자체가 없음.
• 생성할 때 삭제도 같이 만들면 된다. 위 function 같이 사용하고, exp를 0초로 해놓으면 유효기간이 0초가 돼서 쿠키가 알아서 삭제된다.