브라우저의 개발자 도구를 열면 애플리케이션 항목에 여러 저장소들을 볼 수 있다. 각각 어떤 역할을 하는지 알아보자.

먼저 브라우저 저장소는 크게 쿠키와 웹 스토리지로 나뉜다.
또, 웹 스토리지는 로컬 스토리지와 세션 스토리지로 나뉜다.

Cookie vs Web Storage

먼저 쿠키와 웹 스토리지의 차이를 살펴보자.
(쿠키에 대한 자세한 설명은 이전 글을 참고)

Web Storage

html5에 포함된 스펙으로 데이터를 클라이언트에 저장할 수 있는 새로운 자료 구조이다. 기존의 cookie의 몇가지 단점을 보완했다.

일단 구조는 쿠키와 같은 key-value 구조이다. 그리고 로컬 스토리지와 세션 스토리지로 구성된다.

쿠키와의 차이는 다음과 같다.

• 웹 사이트에서 쿠키를 설정하면 이후 모든 요청에 쿠키가 포함된다. 이로 인해 불필요한 트래픽이 발생하는데, 웹 스토리지는 데이터를 저장만 할 뿐 서버로 전송되지 않는다.
• 웹 스토리지는 객체 정보를 저장할 수 있다. 따라서 쿠키보다 편하게 개발에 사용할 수 있다.
• 웹 스토리지는 용량에 제한이 없다. 쿠키의 경우 하나당 4kb로 제한되어 있다. 그리고 개수도 제한이 되어있는데, 웹 스토리지는 이런 제한이 없다. (찾아보니 브라우저마다 정해진 용량이 있었다. 대략 10mb정도이다.)
• 쿠키는 만료기한을 설정할 수도 있고, 안 할 수도 있는데 웹 스토리지는 만료기한 설정이 없다.

---

Local Storage vs Session Storage

이제 웹 스토리지 안의 로컬 스토리지와 세션 스토리지를 비교해보자.

일단 웹 스토리지는 쿠키와 마찬가지로 도메인 단위로 데이터를 구성한다. a라는 도메인의 데이터를 도메인에서 사용할 수 없다는 뜻이다.

• Local storage
  저장한 데이터를 직접 지우지 않는 한 영구적으로 보관한다. 도메인별로 로컬 스토리지가 생성되며, windows 전역 객체인 LocalStorage라는 컬렉션을 통해 저장과 조회가 이루어진다.
• Session Storage
  데이터의 유효 기간과 접근 범위에 제한이 있다. windows 전역 객체인 SessionStorage라는 컬렉션을 통해 저장과 조회가 이루어진다.

차이점

1. 데이터 유효 기간
   로컬 스토리지의 경우 영구적으로 보관이 가능하지만, 세션 스토리지는 세션 쿠키와 비슷하다. 브라우저가 열려있는 동안에는 페이지를 새로고침해도 유지가 되지만 브라우저가 종료되면 데이터가 사라진다.
2. 데이터 범위
   로컬과 세션 스토리지 모두 도메인별로 생성된다. 그러나 같은 사이트의 같은 도메인이라고 해도 세션 스토리지는 다른 저장소를 제공한다. 즉, 새 탭을 열거나 다른 브라우저를 이용해 같은 페이지를 보더라도, 이 두 페이지의 세션 스토리지는 별개의 영역이다. 로컬 스토리지는 이와 달리 도메인만 같으면 전역적으로 공유가 가능하다.

---

IndexedDB

IndexedDB는 파일이나 블롭 등 많은 양의 구조화된 데이터를 클라이언트에 저장하기 위한 로우 레벨 API이다.

웹 스토리지가 쿠키에 비해 큰 용량을 가지고 있지만(약 10mb), 그 보다 더 큰 용량의 데이터를 위한 저장소이다.

특징

• 많은 양의 구조화된 데이터를 저장할 수 있다.
• js가 인식할 수 있는 자료형과 객체를 저장할 수 있다.
• key-value 형태로 저장되며 문자열 타입이 아니어도 된다.
• 비동기적으로 작동한다.

동작

1. db 열기
2. db에 객체 저장소 생성
3. 트랜잭션 시작(데이터 읽기, 쓰기, 삭제 등 작업 요청)
4. 이벤트 리스너 이용해 요청이 완료될 때까지 기다림
5. 요청 결과 받음