TIL no.49 - 브라우저 데이터 저장 방식 - Local Storage, Session Storage, Cookie 와 IndexedDB

 

스토리지의 사용

우리는 많은 이유 때문에 브라우저에 데이터를 저장해야 할 경우가 발생합니다.

애플리케이션의 정적 리소스인 html, css, javascript, 이미리 뿐만 아니라 사용자의 정보를 담은 데이터도 저장할 필요가 있습니다.

데이터 저장 방식에는 여러 가지가 있습니다. 각각의 차이점을 알아보고 어떠한 상황에 어떤 것을 사용하면 좋은지 어떤 것을 사용하면 안되는지 함께 알아봅시다.

 

 

 

일단 우리가 많이 들어본 저장소에 대해 알아보겠습니다.

로컬 스토리지와 세션 스토리지는 HTML5에서 추가된 저장소입니다.

동기식 API를 갖춘 저장소로 간단한 키와 값을 저장하는 데 사용합니다.

 

- 로컬 스토리지 (Local Storage)

로컬 스토리지는 브라우저에 반영구적으로 데이터를 저장하며 브라우저를 종료해도 데이터가 유지됩니다. 

또한 저장되는 데이터의 만료 기간이 정해져 있지 않습니다.

보통 로그인 정보를 자동 로그인으로 보관하고 있을 때 사용할 수 있습니다.

 

- 세션 스토리지 (Session Storage)

세션 스토리지는 각 세션마다 데이터가 저장된다는 의미로 작용합니다. 브라우저에서 여러 개의 탭을 실행할 때 개별적으로 탭마다 각각의 데이터를 저장하고 있습니다. 현재 사용하는 탭안에서만 유효하며 탭이 닫히면 스토리지도 사라집니다. 

또한 저장되는 데이터의 만료 기간이 정해져 있습니다.

보통 장바구니에 담은 정보들을 현재 탭에서 유지할 때 사용할 수 있습니다.

 

 

로컬 스토리지와 세션 스토리지 모두 도메인이 다를 경우 데이터에 접근할 수 없습니다.

두 저장소 모두 값을 문자열로 변환하여 저장합니다. 오직 String 값만 저장할 수 있습니다.

쿠키와 다르게 5MB까지의 데이터를 저장할 수 있고 서버에 전송되지 않습니다.

 

- 쿠키 (Cookie)

쿠키는 로컬 스토리지와 세션 스토리지가 나오기 전에 사용하던 4kb 용량의 저장소입니다.

쿠키는 만료 기한이 있는 key - value 저장소로 그 기한이 세션 스토리지보다 더 짧습니다.

또 쿠키의 특징으로 매 서버요청마다 쿠키가 같이 전송된다는 점이 있습니다.

쿠키는 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어졌기 때문에 서버로의 전송이 이루어지는 것입니다.

서버에 필요하지 않는 값을 쿠키에 저장할 경우 매 서버 요청마다 이 데이터가 보내지기 때문에 데이터 낭비가 발생할 수 있습니다.

쿠키도 위의 로컬 스토리지와 세션 스토리지와 같이 String 값으로 변환하여 데이터를 저장합니다.

 

 

로컬 스토리지와 세션 스토리지도 저장 용량이 크진 않지만 String으로만 저장하기 때문에 부족하지는 않습니다.

하지만 이러한 간단한 정보들을 저장하는 것 외에 필요한 여러 리소스들을 저장해야하는 경우가 있을 수 있습니다.

그래서 필요에 따라 저장소를 선택하여 사용합니다.

 

- indexedDB

indexedDB는 위의 스토리지에 비해 훨씬 더 많은 양의 데이터를 처리할 수 있습니다. 위의 스토리지들에 비해 코드가 복잡합니다.

이름에 걸맞게 index를 설정할 수 있는데 이 대량의 데이터의 검색 효율성을 위해 제공됩니다.

또한 비동기식과 동기식을 모두 사용할 수 있지만 기본적으로 비동기 API가 제공됩니다.

그래서 간단한 정보를 저장할 때에는 위의 저장소 중에 필요한 스토리지를 선택하여 사용할 수 있고 많은 리소스를 저장해야 할 때는 indexedDB를 사용할 수 있습니다.