Cookie vs LocalStorage vs SessionStorage

1web logo

1.Cookie(쿠키)

• 쿠키는 클라이언트에 대한 정보를 이용자의 PC에 있는 하드디스크에 보관하기 위해 웹사이트에서 클라이언트
  웹 브라우저에 전송하는 정보이다.

1-1. Cookie의 특징

• 쿠키를 웹 사이트에서 설정하면 모든 웹 요청은 쿠키 정보를 포함하여 서버로 전송된다.
• 쿠키는 개수와 용량에 있어 제한을 걸어두고 있다. 하나의 사이트에서 저장 가능한 최대 쿠키수는 20개이며,  
  하나의 사이트에서 저장 가능한 최대 쿠키 크기는 4KB로 제한되어 있다.

1-2. Cookie의 장/단점

• 장점
  • 대부분의 브라우저에 지원이 다 된다.
• 단점
  • api가 한번 더 호출되면서 서버에 부담이 증가된다.

 

2. WEB STORAGE (웹 스토리지)

• HTML5에는 웹 사이트의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 WebStorage 스펙이
  포함되어 있다.
• Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고  키를 기반으로 데이터를 조회하는 패턴이다.
• 그리고 영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터를 지속성을 구분할 수 있어
  응용 환경에 맞는 선택이 가능하다.
• 쿠키와 거의 차이가 없어 보일지라도 몇 가지 쿠기의 단점을 극복하는 개선점이 도입되었다.

2-2. WebStorage의 특징

• 저장된 데이터가 클라이언트에 존재할 뿐 서버로 전송은 이루어지지 않는다.이것은 네트워크 트래픽 비용을 줄여 준다는 주요 장점이 된다.
• WebStorage는 용량 제한이 없다.
• 만료기간의 대한 설정이 없다. 즉 한번에 저장한 데이터는 영구적으로 존재한다는 뜻.
• 데이터의 지속성과 관련해 두 가지 용도로 저장이 가능하다. (LocalStorage, SessionStorage)

 

3. LocalStorage

• LocalStorage는 저장한 데이터를 지우지 않는 이상 영구적으로 보관이 가능하다. 도메인마다 별도로 로컬 스토리지가 생성이 된다는 것이다. Windows 전역 객체의 LocalStorage라는 컬렉션을 통해 저장/조회가 이루어진다.

3-1. LocalStorage의 특징

• 브라우저를 종료한다해도 데이터는 보관되며 다음번에 접속하더라도 그 데이터를 사용할 수 있다.
• 저장 용량 한도는 3가지 중에서 가장 높다.

3-2. LocalStorage의 장/단점

• 장점
  • 서버에 불필요한 데이터 저장을 하지않고, 용량이 크다.
• 단점
  • HTML4만 지원되는 브라우저에서는 지원이 되지 않는다.

3-3. LocalStorage 저장 / 조회 / 삭제하는 법

localStorage.setItem("access_token", "jungho") // 저장
localStorage.getItem("access_token"); // 조회: jungho
localStorage.removeItem("acess_token"); // access_token 으로 설정된 키로 접근해 삭제
localStorage.clear(); // 전체 삭제

 

4. SessionStorage

• SessionStoarge는 세션 종료 시(브라우저를 닫는 경우)클라이언트에 대한 정보가 삭제된다.
  SessionStorage는 windows 전역 객체의 SessionStorage라는 컬렉션은 통해 저장/조회가 이루어진다.

4-1. SessionStorage의 특징

 - 데이터가 지속적으로 보관되지 않는다. 이는 마치 브라우저 기반 세션 쿠기와 그 성질이 비슷한데,

현재 페이지가 브라우징 되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지된다.

4-2. SessionStorage의 장/단점

+ 장점 : LocalStorage와 같음. 단지 기능 차이

- 단점: LocalStorage와 같음. 단지 기능 차이

 

4-3. SessionStorage 저장/조회/삭제하는 법

sessionStorage.setItem("access_token", "Jungho"); // 저장
sessionStorage.getItem("access_token"); // 조회 : Jintae
sessionStorage.removeItem("access_token") | // access_token 으로 설정된 키로 접근해 삭제
sessionStorage.clear(); // 전체 삭제

5. 어떤 상황에서 사용하는게 좋을까?

- 팝업 창 : Cookie

- 자동 로그인 : LocalStorage

- 입력 폼 정보 : SessionStorage

- 비로그인 장바구니 : SessionStorage

 

※ 참조

[TIL] Cookie vs LocalStorage vs SessionStorage