1. Browser Storage란?

HTML5를 사용하기 시작한 후로 Client Browser에 정보를 캐시하거나 저장할 수 있는 다양한 옵션이 제공되었다. 이전엔 브라우저 데이터 저장을 cookie만 사용하여 크기에 제한이 있었으나, session storage와 local storage를 함께 사용하면서 제한이 줄었다고 한다.

browswer storage는 backend storage와 유사한 원리로 작동하지만, 브라우저 즉 사용자의 컴퓨터에 데이터를 저장할 수 있도록 하고 필요할 때 관련 데이터를 검색할 수 있도록 해주는 storage이다.
브라우저에 로컬로 데이터를 저장할 수 있는 방법은 많으며, 그 중 가장 많이 사용되는 세 가지 방법이 'cookie' 'session storage' 'local storage'이다.

2. Browser Storage에 데이터를 저장하는 이유

원격으로 저장된 데이터는 backend 서버에서 사용자에게 전송되는 시간이 걸리는 반면, 사용자의 브라우저에 로컬로 저장된 데이터는 즉시 사용 가능하다.
browser storage를 사용하는 예시는 다음과 같다.

• 사용자 이름 등 이전 탐색 세션의 데이터 유지, 이전 세션의 장바구니 내용 저장, 사용자가 이전에 로그인한 기록 기억
• 사용하가 선택한 색 구성표, 글꼴 크기, 일부 UI 요소의 표시 여부 설정
• 네트워크 연결이 오프라인 상태인 경우 데이터 및 자산을 저장
• 자주 업데이트해야 하는 추적 또는 분석용 데이터

3. Browser Storage 종류 살펴보기

1) Cookie

(1) Cookie란?

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

(2) 특징

• 웹사이트에서 쿠키 설정을 할 경우 모든 웹 요청이 쿠키 정보를 포함하여 서버로 전송된다.
• 쿠키는 개수와 용량에 제한이 있다. 하나의 사이트에 저장할 수 있는 최대 쿠키수는 20개이며, 최대 쿠키크기는 4KB이다.
• 쿠키는 만료일자 지정을 통해 만료일자로 지정된 날짜에 제거된다.
• API가 한번 더 호출된다는 점에서 서버의 부담이 증가된다.

2) Session Storage

(1) Session Storage란?

세션 스토리지는 브라우저를 닫거나 새로고침을 할 경우 클라이언트에 대한 정보가 삭제된다.

(2) 특징

• 데이터가 지속적으로 보관되지 않아, 현재 페이지가 브라우징되고 있는 브라우저 컨텍스트 내에서만 데이터가 유지된다.
• HTML4만 지원하는 브라우저에는 지원이 안된다.

3) Local Storage

(1) Local Storage란?

로컬 스토리지는 저장한 데이터를 지우지 않는 이상 데이터가 영구적으로 보관된다.

(2) 특징

• 데이터가 지속적으로 보관되어, 현재 브라우저를 닫거나 새로고침을 하더라도 데이터가 보관되어 그 데이터를 계속해서 사용할 수 있다.
• HTML4만 지원하는 브라우저에는 지원이 안된다.

<참조 : https://www.xenonstack.com/insights/local-vs-session-storage-vs-cookie
https://jindev-t.tistory.com/107>