브라우저 쿠키(Cookie), 세션스토리지(Session Storage), 로컬스토리지(Local Storage)

요약

데이터베이스를 사용하지 않고 데이터를 임시적인 용도로 저장 할 때 사용하는 것

• 대부분의 데이터는 데이터베이스에 저장하고 해당하는 사용처에 따라 쿠키, 세션스토리지, 로컬스토리지를 적절히 사용해야한다.
• 대부분 임시적인 용도의 데이터나 캐시, history 기능을 위해 사용한다.
• 글 작성 중간에 임시로 글을 저장하는 용도로도 많이 사용된다. (form)
• 쇼핑몰의 장바구니, 좋아하는 콘텐츠(찜, 좋아요와 같은 기능들)등 수시로 변경되는 정보를 저장 할 때 사용한다.
• 방문자의 이동 경로를 저장하였다가 이동 시에 사용한다.
• 그 외 서버에 저장할 필요가 없는 정보들을 저장 할 때 사용한다.
• 가장 중요한 것은 보안적인 문제가 될 만한 것들을 저장할 때 사용하면 안된다.

쿠키

• 브라우저 요청이 있을 경우 자동으로 서버에 전송한다.
• 사용자의 하드에 저장되어 보안위험이 있다.
• 같은 도메인 상에서 쿠키 값은 공유된다.
• 하나의 쿠키는 4KB까지 저장 가능하다.
• key, value 데이터 파일로 이름, 값, 만료 날짜(저장 날짜), 경로 정보가 필요하다.

스토리지

• 쿠키의 단점을 보완해서 만든 기술이다.
• key, value로 이루어진 데이터 파일이다.
• 서버의 자원이 사용하므로 서버의 공간이 필요하다.
• 기기마다 차이는 있으나 모바일 2.5MB, 데스크탑 5MB~10MB정도 저장 가능하다.
• 쿠키 보다 보안이 우수하며 많은 정보를 담을 수 있다.
• Local Storage, Session Storage로 나뉘며 데이터의 만료에 따라 나뉜다. (사용자가 데이터를 삭제하지 않는 한)
• Local Storage = 만료기한 없음, Session Storage = 세션 종료 시 만료.

---

쿠키(Cookie)

• 클라이언트 로컬(하드)에 저장되는 key, value값이 들어 있는 데이터 파일이다.
• 서버에 저장되는 것이 아니기 때문에 보안과 상관없는 정보들에 사용한다.
• 재 요청 시 저장된 값을 참조, 재사용 한다.
• 사용자의 하드에 저장되기 때문에 공공장소에서 해킹 등의 악용이 가능하다.
• 클라이언트에 300개, 하나의 도메인에 20개의 값만 저장이 되며 하나의 쿠키는 4KB까지 저장 가능하다.
• 이름, 값, 만료 날짜(저장 기간), 경로 정보가 있어야하며 일정시간 동안 데이터를 저장할 수 있다.
• 같은 도메인 상에서 쿠키의 값은 공유된다.
• 클라이언트가 요청하지 않아도 브라우저 요청이 있을 경우 Request Header에 넣어서 자동으로 서버에 전송한다.

웹 사이트에서의 쿠키

• 필수적인 쿠키 : 페이지 탐색, 웹 사이트 보안 영역 접속, 기본 기능 활성화
• 기능 쿠키 : 접속자의 지역, 언어 등
• 성능 쿠키 : 정보의 익명 수집, 보고
• 마케팅 쿠키 : 방문 내역 추적

출처 : https://kobrekim.com/footer-ko-kr/cookie-policy-ko-kr/what-are-cookies-and-why-we-use-them-ko-kr/

쿠키가 서버로 계속 전송되는 이유는 무엇일까?

1. HTTP 요청은 클라이언트의 상태에 대한 정보를 가지고 있지 않다.
2. 브라우저에서 서버로 클라이언트에 대한 정보를 가져오라는 Get 요청을 보낼때, 서버는 요청 자체만으로 그 요청이 어떤 클라이언트에게서 온 것인지 정보가 없다.
3. 그래서 요청에 대한 응답을 할 수 없는데, 이 때 쿠키에 클라이언트의 정보를 담아서 서버에 보내면 서버는 쿠키를 읽어서 클라이언트를 파악한다.
4. 쿠키는 서버-클라이언트간의 지속적인 데이터 교환을 위해 만들어졌다.

API 사용 방법

// 현재 저장된 쿠키 정보 document.cookie; // 저장 document.cookie = 'key=value'; // 삭제 document.cookie = 'name=;expires=Sat, 01 Jun 2019 02:31:46 GMT;path=/';

코드 확인 : https://cionman.tistory.com/31

사용 사례

• '오늘 팝업을 열지 않음'
• 장바구니
• 자동 로그인

예시 바로가기

https://okayoon.tistory.com/entry/%EC%BF%A0%ED%82%A4Cookie

 

---

로컬 스토리지(Local Storage)

데이터의 만료기간이 없으며 사용자가 데이터를 지우지 않은 한 영구적으로 보존된다.
사이트 재 방문시 이전에 저장되었던 정보를 이용 할 수 있어 활용도가 높다.
사용자 설정 저장, 브라우저를 닫고 열었음에도 정보가 남아야 하는 것들을 저장할 때 사용한다.

API 사용 방법

window.localStorage.setItem('key','value'); window.localStorage.getItem('key'); window.localStorage.removeItem('key'); window.localStorage.clear(); // All clear

key, value 값의 타입은 string, boolean(true or false), number, null, undefinet등을 저장할 수 있지만 모두 문자열로 변환된다.

API 예제

localStorage.setItem('name', 'yoonseo'); localStorage.getItem('name'); // yoonseo localStorage.removeItem('name'); localStorage.getItem('name'); // null  localStorage.clear(); // All clear

localStorage.setItem('name', 'yoonseo'); localStorage.getItem('name'); // yoonseo localStorage.removeItem('name'); localStorage.getItem('name'); // null localStorage.clear(); // All clear

 

예시 바로가기

https://okayoon.tistory.com/entry/%EB%A1%9C%EC%BB%AC-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80Local-Storage

 

---

세션 스토리지(Session Storage)

데이터의 세션이 끝나면(브라우저 종료) 데이터가 지워진다.
휘발성 데이터를 저장할 때 사용한다.

API 사용 방법

window.sessionStorage.setItem('key', 'value); window.sessionStorage.getItem('key'); window.sessionStorage.removeItem('key'); window.sessionStorage.clear(); // All clear

예시 바로가기

https://okayoon.tistory.com/entry/%EC%84%B8%EC%85%98-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80Session-Storage

 

---

참고

• https://www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048
• https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage
• https://developer.mozilla.org/ko/docs/Web/API/Window/sessionStorage