IndexedDB API: Intro (개요)

MDN 원문 참조: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API 
날짜 : 2022.11.08 (문서 내용은 계속 변경되는 부분이라 정리한 날짜를 함께 기록)

위 참조 링크 내용을 정리하였습니다. 

---

IndexedDB

- file/blob을 포함한 구조화된 데이터를 클라이언트 스토리지에 저장하기 위한 API 

- 저장된 데이터를 인덱스를 사용하여 고성능 검색이 가능 

- 많은 양의 데이터를 저장 가능 (Web Storage는 적은 양의 데이터 저장에 유용) 

 

Note - Web Workers에서 사용이 가능 

Note - IndexedDB API는 강력하지만, 복잡. 단순한 API를 원하면 라이브러리(원문) / 라이브러리(원문->정리) 참고 

 

주요 개념과 사용 

- 트랜잭션 데이터베이스 시스템 

- RDBMS처럼 고정 컬럼 테이블을 사용하지 않고, JavaScript 기반 객체 지향 데이터베이스 

- Key로 인덱싱된 객체를 저장/검색 가능 

- The structured clone algorithm(원문)에서 지원하는 모든 개체를 저장 가능 

- 데이터베이스 schema를 지정 > 데이터베이스에 대한 연결을 open > transaction 내에서 데이터를 검색/업데이트

 

Note - 동일 출처 정책 (same-origin policy)을 따릅니다. (다른 도메인의 데이터는 액세스 불가)

 

- 동기, 비동기 : IndexedDB를 사용하여 수행되는 작업은 애플리케이션을 차단하지 않도록 비동기로 수행됨. 

- 저장 한도 및 제거 기준 : 브라우저마다 다름. Firefox의 경우 어떻게 작동하는지 설명(원문)

 

인터페이스

// 데이터베이스에 액세스 하려면 window 객체의 indexedDB 속성에서 open()을 호출 
const request = window.indexedDB.open("데이터베이스명", 버전(optional)); // IDBRequest 반환

// 비동기 작업은  IDBRequest에서 이벤트를 발생시켜 호출 프로그램과 통신. 
request.onerror = function (event) { }
request.onsuccess = function (event) { }
request.onupgradeneeded = function (event) { }

-- 데이터베이스에 연결 -- 

IDBFactory(원문) : 데이터베이스에 대한 액세스를 제공. 전역 객체  indexedDB에 의해 구현된 인터페이스로 API의 진입점. 

IDBOpenDBRequest(원문) : 데이터베이스 열기 요청을 나타냄

IDBDatabase(원문) : 데이터베이스에 연결을 나타냄. 데이터베이스에서 트랜잭션을 얻는 유일한 방법. 

 

-- 데이터 검색 및 수정 -- 

IDBTransaction(원문) : 트랜잭션을 나타냄. 데이터베이스에 트랜잭션을 만들고, 범위(예:액세스 하려는 객체 저장소)를 지정하고 원하는 액세스 유형(readonly, readwrite)을 결정. 

IDBRequest(원문) : 데이터베이스 요청을 처리 및 결과 액세스를 제공하는 제네릭 인터페이스. 

IDBObjectStore(원문) : primary key로 조회된 IndexedDB 데이터베이스의 데이터 집합에 대한 액세스를 허용하는 객체 저장소. 

IDBIndex(원문) : indexedDB 데이터베이스의 데이터 하위 집합에 액세스를 허용, primary key가 아닌 index를 사용하여 검색. 

IDBCursor(원문) : 객체 저장소 및 index를 반복(iterate)

IDBCursorWithValue(원문) : 객체 저장소 및 index를 반복하고, cursor의 현재 값을 반환. 

IDBKeyRange(원문) : 특정 범위의 데이터베이스의 데이터를 검색하기 위한 키 범위를 지정

IDBLocaleAwareKeyRang(원문) (비표준) : 특정 index에 대해 지정된 locale 규칙에 따라 정렬된 특정 범위의 데이터베이스의 데이터를 검색하기 위한 키 범위를 지정. 이 인터페이스는 2.0 사양이 아님. 

 

-- 사용자 정의 이벤트 인터페이스 -- 

이 사양은 아래 사용자 정의 인터페이스로 이벤트를 발생시킴. 

IDBVersionChangeEvent(원문) : IDBOpenDBRequest.onupgradeneeded 이벤트 핸들러 함수의 결과로 데이터베이스 버전이 변경되었음을 나타냄.  

 

예시

To-do Notifications(GitHub) 

동작 확인 (개발자 도구 > 애플리케이션 > indexedDB > toDoList 확인 )

 

---

IndexedDB 정리 목록

IndexedDB API: Intro (개요)

IndexedDB API: IndexedDB 사용 - 1 (개요)

IndexedDB API: IndexedDB 사용 - 2 (저장소(store) 생성 및 구조화)

IndexedDB API: IndexedDB 사용 - 3 (데이터 추가, 검색, 제거)

IndexedDB API: IndexedDB 사용 - 4 (버전 변경 시 다른 탭, 보안, 브라우저 종료 시 경고 등 나머지 내용)

IndexedDB API: IndexedDB 주요 특징 및 기본 용어