IndexedDB

IndexedDB는 웹 브라우저에서 사용할 수 있는 자바스크립트 기반의 데이터베이스 시스템이다. 이를 사용하면 클라이언트 측에서도 데이터 처리를 수행하는 것이 가능해진다. 서버로 전송하지 않아도 되기 때문에, 성능을 높이고, 비용도 줄이는 등의 이점을 가질 수 있다.

비동기

IndexedDB에서는 대부분의 작업이 비동기적으로 수행된다. 이는 IndexedDB가 대량의 데이터를 처리할 수 있도록 하기 위한 방식이다. 비동기 방식으로 작업을 처리할 때는, 작업 결과를 핸들링하는 콜백 함수를 등록해야 한다. 이 콜백 함수는 작업이 완료된 후에 호출되며, 작업 결과를 인자로 전달받는다.

IndexedDB - 시작하기

IndexedDB에서는 여러 개의 database를 만들 수 있으며, 각 database 내부에는 여러 개의 object store를 가질 수 있다. 이를 통해 비슷한 형태의 데이터끼리 모아서 저장할 수 있다. database를 생성하는 방법은 indexedDB.open() 메소드를 사용하는 것이다. 이 메소드는 database 이름과 버전을 인자로 받으며, database가 최초로 생성되는 경우, 그리고 database 버전이 변경되는 경우에 호출된다.

window.indexedDB.open(db_name, version)

IndexedDB - object store 생성하기

각 database 내부에는 object store가 존재하며, object store는 key-value 형태로 데이터를 저장할 수 있는 개체이다. object store를 생성하는 방법은 db.createObjectStore() 메소드를 사용하는 것이다. 이 메소드는 object store 이름과 옵션을 인자로 받으며, 이를 통해 object store의 설정을 조정할 수 있다.

IDBRequest.createObjectStore('store_name', {keyPath: 'id'})

IndexedDB - transaction

IndexedDB에서 데이터를 조회, 추가, 업데이트, 삭제하는 작업은 모두 transaction 내에서 수행된다. transaction은 db.transaction() 메소드를 이용해 생성할 수 있다. 이 메소드는 처리할 object store와 transaction의 유형(readOnly 또는 readWrite)을 인자로 받으며, transaction을 반환한다.

let transaction = db.transaction(['store_name'], 'readwrite')

transaction 객체를 생성하면, 해당 transaction에서 수행할 작업을 명시할 수 있다. 이 작업들은 transaction의 메소드로 수행되며, 작업 수행 결과는 request 객체로 반환된다. request 객체의 onsuccess와 onerror 핸들러를 이용해, 작업 결과에 따른 후속 처리를 할 수 있다.

const objStore = transaction.objectStore('name');

for (const name of names) {
	const request = objStore.add(name);   // 저장
	request.onsuccess =(e)=> console.log(e.target.result);
}

IndexedDB - 데이터 조회하기

각 object store에서 데이터를 조회하는 방법은 objectStore.get() 메소드를 사용하는 것이다. 이 메소드는 key값을 인자로 받으며, 해당 key값에 해당하는 데이터를 반환한다.

let transaction = db.transaction(['store_name'], 'readonly')
let objectStore = transaction.objectStore('store_name')
let request = objectStore.get(key)

request.onerror = function(event) {
  console.log('Error: ', event.target.errorCode)
}
request.onsuccess = function(event) {
  console.log(request.result)
}

IndexedDB - 데이터 추가하기

각 object store에 데이터를 추가하는 방법은 objectStore.put() 메소드를 사용하는 것이다. 이 메소드는 데이터와 함께 key값을 인자로 받으며, 해당 key값이 존재하지 않으면 새로운 데이터를 추가한다.

let transaction = db.transaction(['store_name'], 'readwrite')
let objectStore = transaction.objectStore('store_name')
let request = objectStore.put(data, key)

IndexedDB - 데이터 수정하기

각 object store에서 데이터를 수정하는 방법은 objectStore.put() 메소드를 사용하는 것이다. 이 메소드는 데이터와 함께 key값을 인자로 받으며, 해당 key값이 이미 존재하면 데이터를 업데이트 한다.

IndexedDB - 데이터 삭제하기

각 object store에서 데이터를 삭제하는 방법은 objectStore.delete() 메소드를 사용하는 것이다. 이 메소드는 key값을 인자로 받으며, 해당 key값에 해당하는 데이터를 삭제한다.

let transaction = db.transaction(['store_name'], 'readwrite')
let objectStore = transaction.objectStore('store_name')
let request = objectStore.delete(key)

Cookie vs LocalStorage vs Indexed DB

참고
웹브라우저에 데이터를 저장하기 - IndexedDB
How to use IndexedDB to store data for your web application in the browser
IndexedDB에 대해 알아보자
IndexedDB 간단 정리하기