[jQuery] 🍪 팝업창 띄우기, 팝업창 쿠키 / jQuery cookie

jQuery 🍪 site

 

제이쿼리에서 제공하는 쿠키 API

 

우리가 홈페이지를 들어가면 만나게되는 팝업창,

'하루동안 보지않기' 라는 문구를 많이 봤을 것이다.

우리가 실제로 페이지를 제작할 때 이런 팝업창은 어떻게 만드는걸까?

 

 

jQuery cookie 라는 api 를 이용하면 쉽게 팝업창 제작이 가능하다고 한다.

 

var getCookie = $.cookie('popup');
    console.log(getCookie)

    if (!getCookie) {
        $('.popup').show();
    }

    $('.popup input').on('change', function () {
        $.cookie('popup', '팝업쿠키', { expires: 1 });
        $('.popup').hide();
    });

 

이렇게 작업을 한 쿠키는 개발자도구에서 확인할 수 있다.

개발자도구 > 어플리케이션 > 쿠키

 

 

시험삼아 팝업을 끄고나서 보면

짜잔! popup이라는 이름으로 내가 만들어준 쿠키가 나온다.

이 쿠키를 delete 해주면 다시 팝업창이 뜨는 것을 확인할 수 있다!

 

📂 오늘의 실습 파일 : hd_jjr

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

jQuery 🍪 Github

 

다운로드가 자꾸 실패해서.. 여기 찾아보니 npm install 하는 방법이 있었다.

$ npm i js-cookie

그런데 이 방법도 나는 안된다. ㅠ.ㅠ