IndexedDB

IndexedDB는 파일이나 블롭 등 많은 양의 구조화된 데이터를 클라이언트에 저장하기 위한 로우 레벨 API입니다. IndexedDB API는 인덱스를 사용해 데이터를 고성능으로 탐색할 수 있습니다. Web Storage는 적은 양의 데이터를 저장하는데 유용하지만 많은 양의 구조화된 데이터에는 적합하지 않은데, 이런 상황에서 IndexedDB를 사용할 수 있습니다. 이 페이지는 MDN에서 IndexedDB에 대한 내용을 다루는 시작 문서로 전체 API 참고서, 사용 안내서, 세부적인 브라우저 지원 상황, 그리고 핵심 개념에 대한 설명을 제공하는 링크를 찾을 수 있습니다.

주의: 이 기능은 Web Worker에서 사용할 수 있습니다

참고: IndexedDB API는 강력하지만, 간단하게 사용하기엔 좀 복잡해 보일 수 있습니다. 보다 단순한 API를 선호한다면, IndexDB를 좀 더 프로그래머 친화적으로 만들어주는 localForage, dexie.js, ZangoDB, PouchDB, idb, idb-keyval, JsStore 같은 라이브러리를 알아보세요.

핵심 개념과 사용

IndexedDB는 SQL을 사용하는 관계형 데이터베이스(RDBMS)와 같이 트랜잭션을 사용하는 데이터베이스 시스템입니다. 그러나 IndexedDB는 RDBMS의 고정컬럼 테이블 대신 JavaScript 기반의 객체지향 데이터베이스입니다. IndexedDB의 데이터는 인덱스 를 사용해 저장하고 회수할 수 있으며, 구조화된 복사 알고리즘을 지원하는 객체라면 모두 저장할 수 있습니다. 사용하려면 데이터베이스 스키마를 지정하고, 데이터베이스와 통신을 연 후에, 일련의 트랜잭션을 통해 데이터를 가져오거나 업데이트해야 합니다.

참고: 대부분의 웹 저장 솔루션처럼, IndexedDB도 동일 출처 정책을 따릅니다. 그렇기 때문에, 저장한 데이터는 같은 도메인에서만 접근할 수 있으며 다른 도메인에서는 접근할 수 없습니다.

동기와 비동기

IndexedDB 작업은 애플리케이션 블록을 방지하기 위해 모두 비동기로 이뤄집니다. 이전엔 동기적 API와 비동기적 API 모두 있었으며, 동기적 API는 웹 워커에서만 사용할 용도였습니다. 그러나 그 필요성에 대한 의문으로 인해 명세에서 제거된 상황입니다. 다만 충분한 수요가 있다면 동기적 API가 미래에 다시 추가될 수도 있습니다.

저장 용량 한도와 제거 기준

하나의 종류 또는 다른 종류의 데이터를 클라이언트 측(즉, 로컬 디스크 상)에 저장하는 웹 기술은 많습니다. IndexedDB는 가장 일반적으로 언급되는 것입니다. 브라우저가 얼마만큼의 공간을 web data storage에 할당할지 그리고 용량이 한계에 도달했을 때 무엇을 지울지의 프로세스는 간단하지 않고, 브라우저마다 다릅니다. 브라우저 저장 공간 제한과 퇴거 기준을 Firefox의 경우 이 작동 방식을 설명하려고 시도합니다.

인터페이스

To get access to a database, call open() on the indexedDB attribute of a window object. This method returns an IDBRequest (en-US) object; asynchronous operations communicate to the calling application by firing events on IDBRequest (en-US) objects.

데이터베이스 연결

IDBEnvironment (en-US)
Provides access to IndexedDB functionality. It is implemented by the window and worker objects. This interface isn't part of the 2.0 specification.
IDBFactory (en-US)
Provides access to a database. This is the interface implemented by the global object indexedDB and is therefore the entry point for the API.
IDBOpenDBRequest (en-US)
Represents a request to open a database.
IDBDatabase (en-US)
Represents a connection to a database. It's the only way to get a transaction on the database.

데이터 가져오기 및 수정하기

IDBTransaction (en-US)
Represents a transaction. You create a transaction on a database, specify the scope (such as which object stores you want to access), and determine the kind of access (read only or readwrite) that you want.
IDBRequest (en-US)
Generic interface that handles database requests and provides access to results.
IDBObjectStore (en-US)
Represents an object store that allows access to a set of data in an IndexedDB database, looked up via primary key.
IDBIndex (en-US)
Also allows access to a subset of data in an IndexedDB database, but uses an index to retrieve the record(s) rather than the primary key. This is sometimes faster than using IDBObjectStore (en-US).
IDBCursor (en-US)
Iterates over object stores and indexes.
IDBCursorWithValue (en-US)
Iterates over object stores and indexes and returns the cursor's current value.
IDBKeyRange (en-US)
Defines a key range that can be used to retrieve data from a database in a certain range.
IDBLocaleAwareKeyRange (en-US)
Defines a key range that can be used to retrieve data from a database in a certain range, sorted according to the rules of the locale specified for a certain index (see createIndex()'s optionalParameters.). This interface isn't part of the 2.0 specification.

사용자 지정 이벤트 인터페이스

This specification fires events with the following custom interface:

IDBVersionChangeEvent (en-US)
The IDBVersionChangeEvent interface indicates that the version of the database has changed, as the result of an IDBOpenDBRequest.onupgradeneeded (en-US) event handler function.

폐기된 인터페이스

An early version of the specification also defined these now removed interfaces. They are still documented in case you need to update previously written code:

IDBVersionChangeRequest This is an obsolete API and is no longer guaranteed to work.
Represents a request to change the version of a database. The way to change the version of the database has since changed (by calling IDBFactory.open (en-US) without also calling IDBDatabase.setVersion), and the interface IDBOpenDBRequest (en-US) now has the functionality of the removed IDBVersionChangeRequest.
IDBDatabaseException (en-US) This is an obsolete API and is no longer guaranteed to work.
Represents exception conditions that can be encountered while performing database operations.
IDBTransactionSync (en-US) This is an obsolete API and is no longer guaranteed to work.
Sync version of IDBTransaction (en-US).
IDBObjectStoreSync (en-US) This is an obsolete API and is no longer guaranteed to work.
Sync version of IDBObjectStore (en-US).
IDBIndexSync (en-US) This is an obsolete API and is no longer guaranteed to work.
Sync version of IDBIndex (en-US).
IDBFactorySync (en-US) This is an obsolete API and is no longer guaranteed to work.
Sync version of IDBFactory (en-US).
IDBEnvironmentSync (en-US) This is an obsolete API and is no longer guaranteed to work.
Sync version of IDBEnvironment (en-US).
IDBDatabaseSync (en-US) This is an obsolete API and is no longer guaranteed to work.
Sync version of IDBDatabase (en-US).
IDBCursorSync (en-US) This is an obsolete API and is no longer guaranteed to work.
Sync version of IDBCursor (en-US).

예제

명세

Specification Status Comment
Indexed Database API 2.0 Recommendation
Indexed Database API 2.0 Recommendation Initial definition

같이 보기

  • localForage: A Polyfill providing a simple name:value syntax for client-side data storage, which uses IndexedDB in the background, but falls back to WebSQL and then localStorage in browsers that don't support IndexedDB.
  • Dexie.js: A wrapper for IndexedDB that allows much faster code development via nice, simple syntax.
  • ZangoDB: A MongoDB-like interface for IndexedDB that supports most of the familiar filtering, projection, sorting, updating and aggregation features of MongoDB.
  • JsStore: An IndexedDB wrapper with SQL like syntax.
  • MiniMongo: A client-side in-memory mongodb backed by localstorage with server sync over http. MiniMongo is used by MeteorJS.
  • PouchDB: A client-side implementation of CouchDB in the browser using IndexedDB