JavaScript Cookie

Let's Just Go·2022년 6월 27일

목록 보기

10/10

JavaScript

쿠키

쿠키를 생성하여 값을 넣어주기 위해서는 형식을 반드시 지켜야함
쿠키 생성 및 저장
- 쿠키변수 += 쿠키이름 + ‘=’ + 쿠키값 + ‘;’;
- 쿠키변수 += ‘expires=’ + 날짜변수.toUTCString();
- document.cookie = 쿠키변수;

Code

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    쿠키 이름 : <input type="text" id="cookieName"> <br>
    쿠키 값 : <input type="text" id="cookieValue"><br>
    <button id="make">쿠키 생성</button>

    <hr>

    찾을 쿠키 이름 : <input type="text" id="cookieFind">
    <button id="get">쿠키 찾기</button>

    <script>
        const $make = document.getElementById('make');
        $make.addEventListener('click', createCookie);
        // id가 make인 버튼을 클릭하게 되면 createCookie라는 함수가 발동 

        // 쿠키 생성 
        function createCookie() {
            const name = document.getElementById('cookieName').value;
            const value = document.getElementById('cookieValue').value;
            // 사용자가 입력한 값을 가져옴

            // 쿠키의 유효시간 설정 
            const date = new Date();
            date.setDate(date.getDate() + 7);
            // 현재시간으로부터 7일 뒤로 세팅
            // date.setSeconds(date.getSeconds() + 30);
            // 현재시간으로부터 30초 뒤로 세팅

            // 쿠키에 저장할 문자열 생성 (무조건 형식을 지켜야함)
            let cookie = '';
            cookie += name + '=' + value + ';';
            /// 쿠키를 넣기 위한 형식이며 반드시 지켜야한다

            cookie += 'expires=' + date.toUTCString();
            //toUTCString()은 date타입인 것을 문자열로 변환
            // 쿠키 유효시간 설정

            // 쿠키에 저장
            document.cookie = cookie;

        }
        // 쿠키 확인 
        const $get = document.getElementById('get');
        $get.addEventListener('click', getCookie);

        function getCookie() {
            const find = document.getElementById('cookieFind').value;
            // 찾을 쿠키 이름 
            console.log(document.cookie);
            // 쿠키 확인

            const cookies = document.cookie.split(';');
            // 쿠키는 ;로 구분되어 있으므로 ;를 기준으로 분리
            console.log(cookies);

            // 특정 쿠키를 찾는 로직
            let flag = false;
            for (let c of cookies) {
                if (c.search(find) !== -1) {
                    // search() : 값을 찾으면 찾은 위치를 반환, 없으면 -1을 반환
                    console.log(c.replace(find + '=', ''))
                    // 쿠키 이름을 지우기 위해서 기존 문자열을 빈 문자열로 대체
                    flag = true;
                    break;
                }

            }
            if (!flag) {
                console.log('쿠키를 찾지 못했습니다.');
            }
        }
    </script>
</body>

</html>

Let's Just Go

안녕하세요! 공부한 내용을 기록하는 공간입니다.

이전 포스트

JavaScript Cookie

JavaScript

JavaScript

JavaScript BOM

0개의 댓글