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(); // 전체 삭제