[JavaScript] Cookie로 데이터 저장해보자.

Web/JavaScript
2024. 9. 5.

💭 쿠키의 구성

// 기본 쿠키 설정
document.cookie = "username=John Doe";

// 쿠키에 만료일을 추가
document.cookie = "username=John Doe; expires=Fri, 31 Dec 2024 23:59:59 GMT";

// 도메인, 경로, 보안 설정
document.cookie = "username=John Doe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/; domain=example.com; Secure; HttpOnly";

ChatGPT가 알려준 cookie의 구성 모습입니다.

cookie를 삽입할 때, 다양한 형태로 저장하게 되는데, 왜 이런 형태가 나왔는지를 알아보도록 하겠습니다.

💭 쿠키의 기본 규칙

// 기본 쿠키 설정
document.cookie = "userName=값";

쿠키의 기본규칙은 Object처럼 key와 Value의 형태로 구성됩니다.

key와 value 의 규칙을 따른 것처럼 name과 value의 위치를 지니고 있습니다.

💭 쿠키 확인하기

//cookie 확인하기
console.log(document.cookie);

위의 cookie를 저장해 봤다면, 어떻게 저장되었는지 확인해 보도록 합니다.

위에서 저장된 값이 그대로 표시된 것을 확인할 수 있습니다.

💿 Cookie Option

💭 Expires

document.cookie = "username=John Doe; expires=Fri, 31 Dec 2024 23:59:59 GMT";

cookie가 언제 삭제될 것인지를 정의하는 코드입니다.

시간은 GMT 혹은 UTC형식을 따라옵니다. 해당 코드는 GMT형식입니다.

✔️ 파기 날짜 입력하지 않을 경우, 브라우저 종료 시 쿠키 삭제 ( 해당 브라우저를 모두 종료 )

let date = new Date();
//현재 날짜에서 더하기
date.setTime(date.getTime() + (day * 24 * 60 * 60 * 1000));
console.log(date.toUTCString());
expires = "; expires=" + date.toUTCString();

document.cookie = "user=value; "+expires;

해당코드를 직접 치기는 어려우니, JS의 DATE함수를 통해서 날짜형태를 잡아오도록 합니다.

2번째 행의 day는 더하고 싶은 '일수'를 추가하시면 정해진 일수만큼 적용되어 진행됩니다.

💭 Max-age

document.cookie ="username=va; max-age=3600";

Expires가 어렵다면, '초'를 계산해서 적용하는 방법도 있습니다.

1의 단위는 1초이며, 1시간은 3600입니다.

5를 입력하면, 5초 뒤 내가 지정한 cookie가 사라지는 것을 확인할 수 있습니다.

max-age의 값을 -1로 설정할 경우, Cookie를 삭제할 수 있습니다.

💭 Secure

document.cookie="user=va; Secure";

SSL에서만 cookie가 적용되도록 만들 수 있는 코드입니다.

SSL은 URL창의 https를 의미합니다.

💭 Domain

document.cookie="user=va; Domain=localhost";

도메인을 설정할 경우, 내가 만든 cookie가 해당 도메인에서만 실행되도록 설정 할 수 있습니다.

도메인은 url창에 표시되는 주소를 말하며, 포트번호 앞부분까지가 도메인에 속합니다.

여기서 서브도메인은 포함되지 않습니다.

mail.naver.com => naver.com입니다.

💭 Path

document.cookie="user=va; path=/;";

path입니다.

기본적으로 파일의 위치에 해당되며, 혹은 IP와 port가 더 이상 확장이 안 될 때, port 다음으로 나타나는 URL코드이기도 합니다.

기본적으로 현재 실행되고 있는 프로젝트의 폴더위치를 기준으로, 해당 폴더의 하위디렉터리 모두가 대상에 속합니다.

💭 JS 접근 불가

document.cookie="user=va; httpOnly";

JS에서 코드에 대한 접근을 방지한다.

🧲 Cookie 불러오기

function getCookies(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1);
        if (c.indexOf(nameEQ) == 0) {
            return c.substring(nameEQ.length, c.length);
        }
    }
    return null;
}

//cookie 저장 형태
cook=100; cook1=150

여러 개의 cookie가 쌓였을 때, 내가 저장한 cookie를 조회하는 방법이다.

getCookies 함수를 불러올 때, 불러오고 싶은 cookiename을 변수로 담아서 보내면, 값을 return 받을 수 있습니다.

🧲 Cookie 삭제하기

function delCookie() {
    let name=  document.getElementById('inpName').value;
    console.log('name: ', name);
    document.cookie = name + '=; Max-Age=-1;';
}

//Path=/으로 저장했을 경우
document.cookie="user=va; Max-Age=-1; Path=/";

Cookie를 저장했을 때, 반대로 Cookie를 지우는 방법입니다.

Cookie를 지우기 위해서는 Max-Age 기능을 사용해야 합니다.

여기서 주의 사항, cookie를 등록했을 때 옵션을 그대로 적용해야 한다는 부분입니다.

만약, option이 일치하지 않는다면 cookie가 삭제되지 않는 일이 발생됩니다.

🧲 마무리, cookie를 JSON으로 활용하기

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="button" value="저장">
    <input type="button" value="불러오기">
    <input type="button" value="key 불러오기">

    <script>
        document.querySelectorAll('input[type="button"]')[0].addEventListener('click', () => {
            let obj = { 'id': 'apple', 'name': 'blue' };
            document.cookie = 'cook=' + JSON.stringify(obj);
        });

        document.querySelectorAll('input[type="button"]')[1].addEventListener('click', () => {
            console.log(document.cookie);
        })

        document.querySelectorAll('input[type="button"]')[2].addEventListener('click', () => {
            let cookieValue = getCookies('cook');
            console.log(cookieValue);
            let obj = JSON.parse(cookieValue);
            console.log(obj);
            console.log('id: ', obj.id);
        })

        function getCookies(name) {
            var nameEQ = name + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i];
                while (c.charAt(0) == ' ') c = c.substring(1);
                if (c.indexOf(nameEQ) == 0) {
                    return c.substring(nameEQ.length, c.length);
                }
            }
            return null;
        }

    </script>
</body>

</html>

'Web > JavaScript' 카테고리의 다른 글

[JavaScript] Promise 확인하기 (0)	2024.09.03
[Node] File BLOB로 저장하기 (0)	2024.04.23
[JavaScript] CallBack 함수 사용하기 (1)	2023.11.20
[JavaScript] Object 복사하기 (0)	2023.11.10
[JavaScript] Date타입 다루기 (0)	2023.06.05

작은 새의 날개짓