JS | 쿠키(🍪cookie)

뉴진스 Cookie 🍪

쿠키와 세션 : 정보를 지속적으로 유지하기 위한 수단 

 

https://ko.javascript.info/cookie

쿠키와 document.cookie

 

js 쿠키(🍪cookie)

 

쿠키를 문자열로 받음

 

 

 

---

 

예제 1 ) 🍪 Cookie의 이름과 🍪 Cookie의 값을 입력 받아 🍪 쿠키를 만들고

🍪 Cookie의 이름을 검색해서 🍪 Cookie 찾기

 

🍪

1번 html

2번 html

1번 🍴

html 

Cookie Name : <input type="text" id="cookieName">
Cookie Value : <input type="text" id="cookieValue">
<button id = "btn">쿠키 만들기</button>

script 

 //// document.cookie = "키=값";
        //// document.cookie = "키=값; expires = UTC스트링시간타입";

        //var date = new Date(); 
        //date.setMinutes(date.getMinutes()+1); //지금 시간으로부터 1분뒤
        
        //console.log(date);

        ////                        path=/; : 쿠키가 생성된 도메인 (생략가능)
        //document.cookie = "키=값; path=/; expires=UTC스트링" + date.toUTCString();


        var cookieName = document.getElementById("cookieName"); 
        var cookieValue = document.getElementById("cookieValue"); 

        var btn = document.getElementById("btn");

        

        btn.onclick = function(){

            var date = new Date();
            date.setHours(date.getHours()+1); //지금 시간으로부터 1시간 뒤

            var key = cookieName.value; //사용자가 입력한 값
            var val = cookieValue.value; //사용자가 입력한 값 

            var cookie = "";
            cookie += key + "=" + val + ";";
            cookie += " path=/;";
            cookie += " expires=" + date.toUTCString();

            document.cookie = cookie; 

            // document.cookie = "키=값; path=/; expires="+date.toUTCStrint();
        }

        //고유하게 확인할 값들을 넣어준다. 개인정보 x
        //인코딩 시켜서 넣어도 다시 디코딩 시켜서 뺄 수 있음
        //쿠키는 동일한 key가 만들어지면 덮어씌어진다. (map과 같음)

 

2번 🍴

html 

 <h3>1번 페이지에서 만든 쿠키를 사용할거야</h3>
    
    <input type="text" id="findCookie">
    <button id="btn">찾을 쿠키명</button>

script 

  // console.log(document.cookie); 
        var findCookie = document.getElementById("findCookie");
        var btn = document.getElementById("btn");
        
        btn.onclick = function(){

            //사용자가 입력한 값 
            var find = findCookie.value;

            var arr = document.cookie.split(";");
            console.log(arr); 

            //반복을 이용해서 쿠키를 찾음
            for(i in arr){ //i는 인덱스
                if(arr[i].indexOf(find) != -1){ //입력한 값이 있다면
                    //console.log('쿠키있음');
                    console.log(arr[i]);
                    var value = arr[i].replaceAll(" ","").replace(find+"=",""); //값
                    console.log("키 : " + find);
                    console.log("값 : " + value); 
                }
            }
        }

---

퀴즈 1 ) 팝업창 하루동안 열지 않기 🍪쿠키 만들기

popup.html

0.00MB

popup.js

0.00MB

main.html

0.00MB