[TIL] Cookie vs LocalStorage vs SessionStorage

web 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-2. LocalStorage의 장/단점

 + 장점 : 서버에 불필요한 데이터를 저장을 안 하고, 용량이 크다.

 - 단점 : HTML4만 지원되는 브라우저에는 지원이 안된다.

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

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

 

4. SessionStorage

◎ SessionStorage는 세션 종료 시(브라우저를 닫을 경우) 클라이언트에 대한 정보가 삭제된다.

SessionStorage는 windows 전역 객체의 SessionStorage라는 컬렉션을 통해 저장/조회가 이루어진다.

4-1. SessionStorage의 특징

 - 데이터가 지속으로 보관되지 않는다. 이는 마치 브라우저 기반 세션 쿠키와 그 성질이 비슷한데, 현재 페이지가 브라우징 되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지된다.

4-2. SessionStorage의 장/단점

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

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

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

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

 

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

 - 팝업 창 : Cookie

 - 자동 로그인 : LocalStorage

 - 입력 폼 정보 :  SessionStorage

 - 비로그인 장바구니 :  SessionStorage

 

※ 참조

https://kcizzang.tistory.com/entry/SessionStorage-%EC%99%80-LocalStorage-%EC%B0%A8%EC%9D%B4%EC%A0%90

SessionStorage 와 LocalStorage 차이점

https://www.zerocho.com/category/HTML/post/5918515b1ed39f00182d3048

(HTML&DOM) 로컬스토리지, 세션스토리지 - 그리고 쿠키