오늘 하루는 보지 않기 팝업을 구현합니다.
쿠키와 로컬 스토리지가 어떤 것인지 간단하게 알아보고
두가지 방법으로 구현하는 방법을 함께 알아봐요!
구현 사항 및 방법 정리
어떤 걸 구현해야 할까?
- 사용자가 그냥 닫기를 눌렀는지, 오늘 하루 보지 않기 버튼을 눌렀는지 확인
- 팝업이 다시 보이는 시각 계산하여 저장
- 저장한 값을 읽고 눌렀다면 보이게, 보이지 않게 스타일 변경
버튼에 이벤트 거는 설명은 생략. 오늘 중요한 건 사용자가 오늘하루 보지 않기 버튼을 눌렀는지, 안 눌렀는지 확인하는 것이다.
적당한 저장 장소 찾기
HTTP, 보통 볼 수 있는 웹 페이지는 상태를 저장하지 않는 stateless 프로토콜이다. 주소를 입력해 페이지를 접속하면 서버는 언제나 동일하게 똑같은 html 정보를 브라우저로 보내 준다.
다시 말하자면, 오늘 하루 보지 않기 버튼 클릭 여부를 확인하는 상태를 저장하는 변수를 만들어 열심히 버튼을 클릭 해서 변수를 아무리 바꾼다 한들, 페이지에 새로 진입할 때마다 팝업은 다시 나타날 것이다. 내가 버튼을 눌렀다는 사실을 다른 어딘가에 저장해두고, 페이지를 열 때마다 그 정보를 불러와 팝업을 보이지 않도록 해야 한다. 어떻게 하면 될까?
이런 경우에 사용할 수 있는 대표적인 저장 장소 두 가지.
쿠키 vs 로컬 스토리지
쿠키 : 예전부터 이런 경우에 일반적으로 많이 사용(참고 소스가 많다), 쿠키 만료 시간을 있으니 이를 이용하면 다시 보이게 하는 로직도 쉽게 구현 가능
로컬 스토리지 : 클라이언트와 통신할 필요 X, 어차피 서버에서 알 필요가 없는 정보인데, 클라이언트 내부에서 해결하는 게 좋지 않을까?
둘 다 개념은 조금 다르지만 구현 자체는 비슷하게 하면 된다. 하나씩 알아보자.
쿠키로 구현하기
쿠키로 구현 예시 : 네이버
상단에 웨일 사용을 독려하는 띠 배너가 노출된다.
우측의 3일 동안 보지 않기 버튼을 누르면 사라지고 3일 뒤에 다시 나타난다.
3일 동안 보지 않기 버튼을 누르고 크롬 개발자 도구를 통해 쿠키를 확인해보면 NM_TOP_PROMOTION이란 이름의 쿠키가 생성된 것을 볼 수 있다. 만료 시간은 클릭한 날짜로부터 3일 뒤(정확히는 72시간 뒤)의 시각이 저장된다. (표기 시각은 GMT 기준)
쿠키란?
먼저 지금 사용하려 하는 쿠키에 대해 간단하게 정리해보자
서버는 클라이언트를 구분하고, 클라이언트가 어떤 상태인지 구별하기 위해 클라이언트에게 관련 정보가 담긴 쿠키를 내려 준다. 보내만 주고 다시 잊어버리지만.
대신 클라이언트가 다시 서버에게 리퀘스트를 보낼 때 쿠키를 같이 보내고, 서버는 이때 클라이언트로부터 쿠키를 다시 읽어 들이면서 해당 클라이언트가 어떤 상태였는지 파악할 수 있다.
컴퓨터 내부에 브라우저 단위로 저장되기 때문에 다른 곳에 접속하거나, 다른 브라우저로 보면 동일한 개체로 간주하지 않고 다른 클라이언트로 인식하게 된다.
쿠키 헤더 디렉티브
쿠키에 들어 가는 정보들은 다음과 같다
- 이름, 값 : 필수, 쿠키 이름과 해당 쿠키의 값
- Expires, Max-Age : 쿠키 만료시간 관련
- Domain, Path : 쿠키가 적용되어야 하는 url 주소 관련
- Secure, HttpOnly : 보안 관련
실제로 구현하기
See the Pen jquery today popup(cookie) by ylem76 (@ylem76) on CodePen.
코드펜에서는 쿠키 관련 소스가 동작하지 않는다. 실제 동작은 직접 다운로드 받아서 확인해보자
코드 살펴보기
// 쿠키 관련 함수
var handleCookie = {
// 쿠키 쓰기 (이름, 값, 만료일)
setCookie: function (name, val, exp) {
var date = new Date();
// 만료 시간 구하기(만료일을 ms단위로 변경)
date.setTime(date.getTime() + exp * 24 * 60 * 60 * 1000);
console.log(name + "=" + val + ";expires=" + date.toUTCString() + ";path=/");
// 실제로 쿠키 작성하기
document.cookie = name + "=" + val + ";expires=" + date.toUTCString() + ";";
},
// 쿠키 읽어오기(쿠키 이름을 기준으로 정규식 이용해서 가져오기)
getCookie: function (name) {
var value = document.cookie.match("(^|;) ?" + name + "=([^;]*)(;|$)");
return value ? value[2] : null;
}
};쿠키 데이터는 document.cookie에 저장이 된다. 다만 개발자 탭에서는 편의성을 위해 보기 좋게 나눠주지만 실제 데이터는 여러 쿠키데이터가 죽 나열 된 하나의 문자열이기 때문에 setCookie에서 저장한 이름을 기준으로 정규식을 이용해 값을 찾아줘야한다.
쿠키로 구현하기 단점
그러나 쿠키로 이런 기능을 구현하는 데는 단점이 하나 있다
쿠키는 서버와 통신할 때 사용하는 문자열이기 때문에, 서버와 이 데이터를 전송하면서 통신 해야 한다. 워낙 작은 기능이라 큰 문제는 없지만, 굳이 쿠키를 이용해 서버와 통신을 하는 것이 맞을까?
이를 위한 대안 또한 있다.
로컬 스토리지로 구현하기
로컬 스토리지란?
html5부터 web storage API라고 하는 일종의 저장 공간이 추가 되었다. (정확히는 window객체를 확장하여 localStorage와 sessionStorage 속성을 추가한다) 서버와 지속적으로 통신해야하는 쿠키 대신 브라우저에서 직관적으로 데이터를 저장 및 이용할 수 있다.
창을 닫으면 데이터가 사라지는 세션 스토리지와 창을 닫아도 정보가 남아있는 로컬 스토리지로 구분되는데, 오늘 하루 보지 않기 팝업에는 로컬 스토리지를 이용해 구현하는 게 적합하다.
로컬 스토리지로 팝업 제어하기
사실 쿠키로 구현하는 것과 기본 로직은 크게 다르지 않다.
다만 저장하는 위치와, 만료 시간이 따로 없기 때문에 직접 현재시각과 비교해 주어야 한다.
/* 스토리지 제어 함수 정의 */
var handleStorage = {
// 스토리지에 데이터 쓰기(이름, 만료일)
setStorage: function (name, exp) {
// 만료 시간 구하기(exp를 ms단위로 변경)
var date = new Date();
date = date.setTime(date.getTime() + exp * 24 * 60 * 60 * 1000);
// 로컬 스토리지에 저장하기
// (값을 따로 저장하지 않고 만료 시간을 저장)
localStorage.setItem(name, date)
},
// 스토리지 읽어오기
getStorage: function (name) {
var now = new Date();
now = now.setTime(now.getTime());
// 현재 시각과 스토리지에 저장된 시각을 각각 비교하여
// 시간이 남아 있으면 true, 아니면 false 리턴
return parseInt(localStorage.getItem(name)) > now
}
};See the Pen jquery today popup(local storage) by ylem76 (@ylem76) on CodePen.
코드펜에서도 잘 돌아가나, 로컬스토리지 데이터는 도메인 기준으로 저장이 되므로, cdpn.io 한 곳에 모두 저장된다. 다른 코드펜 소스에서 today라는 이름의 스토리지 아이템이 있으면 오류가 날 수도 있다. 주의
이렇게 두 가지 방법을 알아보았다. 맥락과 상황에 알맞게 선택하여 사용해보자!
참고자료
https://ko.javascript.info/cookie
https://developer.mozilla.org/ko/docs/Web/API/Document/cookie
