Cookie와 Storage 이란?
이 쿠키 탐난다..
그럼 웹 브라우저 상에서 말하는 cookie란 무엇일까요?
쿠키란?
쿠키는 유저의 정보가 들어가 있는 파일입니다. 이 파일은 유저가 웹사이트에 접속할 때 자동으로 생성이 됩니다.
마치 쿠키를 먹으면 많은 부스러기가 남아있는 모습이 때문에 쿠키라는 이름은 가지게 되었습니다.
유저의 정보를 key=value의 형태로 대부분 간단하게 저장합니다.
쿠키 종류
| 종류 | 기능 |
| session cookie | 만료일을 정해 놓아 보통은 브라우저가 종료 후에 삭제 됩니다. |
| persistent cookie | 장시간 저장하는 쿠키 파일로 저장하여 브라우저 종료 후에도 남아있습니다. |
| secure cookie | https에서만 사용하는 쿠키 value가 암호화되어 전송됩니다. |
| third-party cookie | 광고 베너를 사용할 때 쓰임 유입 경로등을 추적하는데 사용됩니다. |
만약 자신의 방문한 곳에 쿠키를 보고 싶다면 개발자 도구에 Application에 들어가서 확인할 수 있습니다.
단점
서버와 통신을 할 때 사용자가 요청하지 않아도 자동으로 넘어갑니다.
=> 트래픽을 유발합니다.
보안이 상대적으로 취약합니다.
크기를 4kb 밖에 사용하지 못합니다. 저장하는 갯수도 한정이 되어있습니다.
하나의 도메인에는 20개 클라이언트 당 300개만 가질 수 있습니다.
쿠키 활용하는 방법
ex) 팝업창 7일동안 보지 않기, 유저의 방문기록 , 환경설정 저장 , 장바구니 저장 등...
Storage이란?
HTML5에서 추가된 저장소 입니다. 쿠키의 단점을 보완하기 위해서 만들어 졌습니다.
LocalStorage와 SessionStorage로 나누어져 있습니다.
특징
key=value의 형식으로 데이터를 저장합니다.
모바일은 2.5MB 데스크탑은 5 ~ 10MB 까지의 크기로 저장 가능 합니다.
쿠키보다 보안이 우수합니다.
쿠키와는 다르게 서버와 통신할 때 정보가 넘어가지 않는다.(넣고 싶을 때만 넣을 수 있다.)
LocalStorage란?
딱히 데이터를 지우지 않는 이상 영구적으로 데이터를 가지고 있을 수 있습니다.
localStorage.setItem('name', 'burkI'); // key = 'name' , value = 'burkI' 로 추가
localStorage.setItem('date', 0511 ); // key = 'date' , value = '0511' 로 추가
localStorage.getItem('name'); // burkI
localStorage.getItem('date'); // 0511 (문자열)
localStorage.removeItem('date'); //삭제
localStorage.getItem('date'); // null (삭제됨)
localStorage.clear(); // 전체 삭제
SessionStorage란?.
LocalStorage와 다르게 휘발성인 데이터(브라우저 끄면 사라질 데이터)를 넣을 때 사용됩니다.
sessionStorage.setItem('name', 'burkI'); // key = 'name' , value = 'burkI' 로 추가
sessionStorage.setItem('date', 0511 ); // key = 'date' , value = '0511' 로 추가
sessionStorage.getItem('name'); // burkI
sessionStorage.getItem('date'); // 0511 (문자열)
sessionStorage.removeItem('date'); //삭제
sessionStorage.getItem('date'); // null (삭제됨)
sessionStorage.clear(); // 전체 삭제