단비의 코딩 공부 blog

[Vanilla JS]study 21일차 - Cookie 본문

javascript&jquery

[Vanilla JS]study 21일차 - Cookie

황굽달 2023. 4. 14. 12:44

1. 쿠키생성

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS - Cookie</title>
    </head>
    <body>
        <script>
            //쿠키 : 사용자의 컴퓨터에 저장되는 작은 텍스트파일 데이터
            //웹서버가 웹페이지를 브라우저로 보내면 연결이 종료되고, 서버는 자용자에 대한 정보는 기억하지 않음
            //쿠키는 사용자에 대한 정보를 기억하는 방법으로 활용

            //쿠키 데이터 : 이름=값 => 쌍으로 저장됨

            document.cookie = "username=test; userpass=1234";
        </script>
    </body>
</html>

2. 쿠키데이터 읽기

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS - Cookie</title>
    </head>
    <body>
        <script>
            //쿠키 : 사용자의 컴퓨터에 저장되는 작은 텍스트파일 데이터
            //웹서버가 웹페이지를 브라우저로 보내면 연결이 종료되고, 서버는 자용자에 대한 정보는 기억하지 않음
            //쿠키는 사용자에 대한 정보를 기억하는 방법으로 활용
           
            //쿠키 데이터 : 이름=값 => 쌍으로 저장됨

            //생성
            document.cookie = "username=test; userpass=1234";

            //데이터를 가져옴
            let x = document.cookie;
        </script>
    </body>
</html>

3. 쿠키데이터 변경 삭제

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>JS - Cookie</title>
    </head>
    <body>
        <script>
            //쿠키 : 사용자의 컴퓨터에 저장되는 작은 텍스트파일 데이터
            //웹서버가 웹페이지를 브라우저로 보내면 연결이 종료되고, 서버는 자용자에 대한 정보는 기억하지 않음
            //쿠키는 사용자에 대한 정보를 기억하는 방법으로 활용
           
            //쿠키 데이터 : 이름=값 => 쌍으로 저장됨

            //생성
            document.cookie = "username=test; userpass=1234";

            //변경
            document.cookie = "username=test2; userpass=5678";

            //삭제
            document.cookie = "username=; userpass=;";
           

        </script>
    </body>
</html>