목표
음악 관련 프로젝트 중 앨범 커버 이미지와 앨범 내 음원 파일을 등록하는 과정에서 임시 저장 기능을 개발해야 했다.
문제
보통 임시 저장 기능을 개발하는 경우 localStorage나 sessionStorage를 사용하는데, 일반 문자열 아닌 이미지 file 객체나 wav 파일의 경우 저장이 불가능하다.
해결
그래서 IndexedDB를 통해 앨범의 제목 같은 문자열과 앨범에 속한 음원 파일을 임시 저장하는 기능을 개발하였다.
앨범 커버 이미지와 음원 같은 file 객체는 미리보기 처리를 위해 저장 시 File → Blob 변환, 조회 시 Blob → File 변환 과정을 적용하였다.
IndexedDB
정의
파일이나 Blob 등 많은 양의 구조화된 데이터를 클라이언트에 저장하기 위한 로우 레벨 API
특징
- localStorage, sessionStorage 같은 Web Storage API와 다르게 명확한 제한 용량이 있는 것이 아닌, 브라우저마다 컴퓨터의 디스크 용량을 기준으로 최대 용량이 정해진다. (크롬의 경우 디스크 기준 60% 정도 할당할 수 있다.)
- 비동기로 동작한다.
- 트랜잭션을 지원한다.
후기
- Web Storage API 저장소만 자주 사용하다가 IndexedDB는 처음 사용해 봤는데 파일이 저장되는 게 되게 신기했다.
- 트랜잭션을 지원해서 안정성을 보장받는 부분과 컴퓨터 디스크를 기준으로 저장 공간이 결정되는 부분이 인상 깊었다.
참고
