프론트엔드 개발

브라우저 쿠키 처음 사용한다면? 본문

Browser/Browser

브라우저 쿠키 처음 사용한다면?

태나미 2021. 6. 15. 16:58
전 글에서 쿠키와 세션에 차이점을 알아보았다.
이번에는 직접 함수를 구현하여, Javascript로 쿠키를 읽어보고, 생성 및 삭제를 알아보겠다.

쿠키 저장

function setCookie(name, value, day) {
    const date = new Date();
    date.setTime(date.getTime() + day * 24 * 60 * 60 * 1000);
    document.cookie = name + '=' + value + ';expires=' + date.toUTCString() + ';path=/';
};

쿠키 읽기

function getCookie(name) {
    const value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
    return value ? value[2] : null;
};

쿠키 삭제

function delCookie(name){
    let date = new Date();
    date.setDate(date.getDate() - 100);
    let Cookie = `${name}=;Expires=${date.toUTCString()}`
    document.cookie = Cookie;
}

Practice

(1) 브라우저 쿠키를 넣지 않고, 읽기

<!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>
    <div id="container">Zero Cookie</div>

    <script>
        function getCookie(name) {
            const value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
            return value ? unescape(value[2]) : null;
        };

        const test = getCookie("test");

        if (test) {
            const insertContents = document.getElementById('container').innerHTML="test";
        }

        console.log(test); // null
    </script>
</body>
</html>

브라우저에 Cookie가 없을 때

 

(2) 브라우저 쿠키를 넣고, 읽기

<!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>
    <div id="container">Zero Cookie</div>

    <script>
        setCookie('test', 'Cookie exist', 1)

        const test = getCookie("test");

        if (test) {
            const insertContents = document.getElementById('container').innerHTML=test;
        }

        function setCookie(name, value, day) {
            const date = new Date();
            date.setTime(date.getTime() + day * 24 * 60 * 60 * 1000);
            document.cookie = name + '=' + value + ';expires=' + date.toUTCString() + ';path=/';
        };
        
        function getCookie(name) {
            const value = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
            return value ? unescape(value[2]) : null;
        };
        
        console.log(test); // Cookie exist
    </script>
</body>
</html>

브라우저에 cookie를 넣었을 때,

Name 속성과 Value 속성

- 데이터를 저장하고 읽는 데 사용하는 속성이기 때문에, 반드시 지정해야 속성이다.

   

Expires 속성

- Expires 속성은 쿠키의 파기 날짜를 지정하는 속성이다.

- GMT 형식이나 UTC 형식으로 날짜를 입력해야 한다.

- 아무 값도 입력하지 않으면 브라우저가 종료될 때 쿠키가 삭제된다.

 

Secure 속성

- Secure 속성을 지정하면 해당 쿠키는 SSL을 사용해서만 요청할 수 있다.

 

Domain 속성

- Domain 속성을 입력하지 않으면 현재 도메인의 경로로 자동 입력된다.

- 페이지 요청과 비교해서 도메인의 경로와 Domain 속성이 일치하지 않으면, 쿠키에 접근하는 것을 막는다.

 

Path 속성

- Path 속성을 ' / '로 설정하면 도메인 내의 모든 곳에서 접근할 수 있다.

- Path 속성은 일부러 지정하는 경우가 많은데 특정 경로(폴더명)를 설정한다.

- Path 속성은 /폴더/ 로 설정되는데, 폴더 또는 현재 폴더의 하위에서 접근할 수 있다.

 

 

출처: 

https://wickedmagica.tistory.com/72

 

 

'Browser > Browser' 카테고리의 다른 글

Rendering pipeline stage costs  (0) 2021.03.28
how to browsers work, 브라우저 동작원리  (0) 2021.03.26
쿠키와 세션 차이점  (0) 2021.03.14
브라우저 네트워크  (0) 2021.02.10
'Browser/Browser' Related Articles more
Comments