쿠키, 웹 스토리지 사용법(JavaScript)
[1] 개요
사실 카테고리를 어디에 둘까 매우 고민했습니다.
IT 정보로 두려고 했는데, 사용법이 주 가 되려면 자바스크립트 코드는 필수니,
고민 끝에 언어 카테고리에 적고, 쿠키, 웹 스토리지가 뭔지 간략하게 설명하려고 합니다.
[2] 설명
우선 대부분 크롬, 파이어폭스, 엣지와 같은 대중적인 브라우저를 사용한다는 가정하에 설명드립니다.
저는 크롬을 사용하겠습니다.
F12를 누르면 개발자 도구가 나오는데, 여기에서 응용프로그램(Application)탭을 클릭합니다.
그리고 왼쪽 사이드바에서 쿠키, 세션 스토리지, 로컬 스토리지가 나옵니다.
이번 포스트에서는 위의 화면에서 로컬 스토리지, 세션 스토리지, 쿠키를 다룰 예정입니다.
IndexedDB, 웹 SQL등은 사용자의 브라우저에 저장하는 DB API정도로 이해하면 됩니다.
어쨋든 위의 3개 저장소를 특정 사이트에서 각각 눌러보면 어떤 목록이 나오거나 안나오기도 합니다.
그래서 여길 왜 들어가야 하는데?
지금부터 사용할 코드들이 위 3개 저장소에서 저장되기 때문입니다.
쿠키
- 우리가 방문한 웹 사이트의 정보를 클라이언트(우리의 브라우저)에 저장하는 파일입니다.
- 따라서 브라우저를 닫고 다시 켜도 만료 일자가 남아 있으면 사이트를 들어가도 이전에 설정한 정보 그대로로 보여줍니다.
- 쿠키는 특정 사이트 내 최대 저장 갯수가 제한되어 있고, 만료 일자를 정해야 합니다.
- 예시) 특정 사이트에서 나오는 하루 동안 보지 않기 팝업창
웹 스토리지 - 세션 (HTML5 이상부터 지원)
- 우리가 방문한 웹 사이트의 정보를 클라이언트(우리의 브라우저)에 저장하는 파일입니다.
- 다만, 쿠키와는 다르게 브라우저를 닫으면 저장된 정보가 다 없어집니다.
- 예시) 특정 입력 페이지(회원가입 페이지), 일회성 로그인 페이지, 비로그인 장바구니 페이지
웹 스토리지 - 로컬 (HTML5 이상부터 지원)
- 우리가 방문한 웹 사이트의 정보를 클라이언트(우리의 브라우저)에 저장하는 파일입니다.
- 이 정보는 따로 삭제하지 않는 이상 브라우저를 닫아도 영구적으로 남아있습니다.
- 예시) 자동 로그인, 특정 사이트 다크모드 등
(제 블로그에서 사용 중입니다)
그 외 보안성이라던가, 데이터 용량관련 설명도 있는데,
사용법을 남기려고 했지, 그런건 필요가 없다고 생각이 듭니다.
[3] 구현
Local Storage
1-1. web-storage 라는 폴더에 index.html과 가져올 js파일인 reference.js를 만듭니다(= 프로젝트 생성)
1-2. 그리고 이를 vscode 확장팩인 Live Server로 구동시켜봅니다(오프라인에서 직접 열어도 가능)
1-3. reference.js에서 Local Storage를 생성합니다.
reference.js 1
2
3
4(function () {
var value = "영구 저장 값";
localStorage.setItem("local", value);
})();1-4. 위의 값을 저장 하면 Live Server가 재시작 되므로 바로 콘솔창을 확인할 수 있습니다.
위의 값은 브라우저를 닫고 다시 켜도 같은 주소 (위에서는 http://127.0.0.1:5500/)면 영구적으로 남게 됩니다.
물론 삭제도 가능합니다. 콘솔창에서 키 / 값 쪽 영역에서 마우스 우클릭하고 삭제 버튼을 누르면 삭제가 됩니다.
Session Storage
2-1. Local Storage와 구현 방식은 동일합니다. JS코드만 바꿔주도록 합니다.
reference.js 1
2
3
4(function () {
var value = "브라우저 끄면 사라지는 값";
sessionStorage.setItem("session", value);
})();2-2. 위의 값은 브라우저를 닫으면 사라지게 됩니다. (지금은 즉시 실행 함수에 의해 무조건 다시 생김)
Cookie
3-1. document.cookie 라는 JS 내장 기능을 이용합니다.
reference.js 1
2
3(function () {
document.cookie = "name=value; max-age=3600;";
})();3-2. 그럼 콘솔에서는 아래와 같이 나옵니다.
3-3. 위에 필드명에 쓰여진 대로 domain, path, expire / max-age.. 여러가지 정보를 직접 설정 할 수 있습니다. 위 코드 같은 경우엔 쿠키의 유효시간을 1시간(max-age=3600)으로 주었습니다. 자세한건 모던 JavScript 튜토리얼 쿠키편 을 참고하시면 됩니다.
[4] 결론
예시 사용법에 나와있는 대로 쓰임새를 생각하여, 골라서 쓰시면 됩니다.
다시 말씀드리면,
- 세션 스토리지는 정보의 1회성 저장에 용이하며,
- 로컬 스토리지는 정보의 영구 저장에 용이하고,
- 쿠키는 정보의 특정 기간동안 저장에 용이합니다.
그 외에 세션이라는, 서버(백엔드) 메모리에 저장되는 데이터도 있지만, 여기서는 다루지 않겠습니다.
※ 세션은 세션 스토리지와 다른 개념입니다. (영문 참고)
[5] 참고 사이트
쿠키, 웹 스토리지 사용법(JavaScript)
https://mgs-95.github.io/2021/10/09/2021-10-09-003-web-storage/