[HTML5] IndexedDB란?

IndexedDB란?

웹 스토리지에 포함된 로컬 스토리지 / 세션 스토리지의 단점을 보완한 API라고 생각하면 된다.

만약, 로컬 스토리지 / 세션 스토리지에 대해 잘 모르겠다면 블로그 글을 한번 보고 오면 된다.

IndexedDB는 브라우저에 내장된 비관계현(NoSQL) DB로, 클라이언트 측에서 대용량의 구조화된 데이터를 저장하고 검색할 수 있는 웹 API다.

왜 사용할까?

기능	설명
대용량 저장 가능	수십 MB에서 수백 MB까지 저장 가능
객체 저장 가능	JSON 객체 전체를 key-value 형태로 저장
비동기 처리	저장/조회/삭제 등 모든 작업이 비동기 처리
인덱스 검색 지원	특정 필드 기준으로 빠르게 검색 가능
오프라인 지원	서버 연결 없이도 작동 가능 (PWA 활용)

IndexedDB 구조

IndexedDB는 DB → 객체 저장소 → 데이터 항목 과 같은 구조로 이뤄져 있다.

• Database: 하나의 IndexedDB 인스턴스
• Object Store: 테이블과 유사한 데이터 저장소
• Object: 데이터가 담긴 객체

IndexedDB 사용해보기

대충 어떻게 생긴 구조인지도 알았고, 왜 사용하는지도 알겠으니 어떻게 쓰는지 알아보겠다.

IndexedDB는 브러우저 전용 기능이기 때문에, 다른 개발환경에서는 확인이 불가능하기 때문에 크롬에서 사용해보도록 하겠다.

물론, IDE를 통해 HTML/JS 코드를 작성한 뒤 IndexedDB에 CRUD 되는지 확인은 가능하다.

1. DB 열기

F12를 눌러 개발자 도구를 연 다음 어플리케이션에 들어가면 IndexedDB가 존재한다.

2. JavaScript로 IndexedDB 생성하기

users란 Object Store(테이블)를 가진 myDB를 만들어보겠다.

// 1. DB 열기
const request = indexedDB.open("myDB", 1);

// 2. 업그레이드될 때(최초 생성 포함) object store 생성
request.onupgradeneeded = function (event) {
  const db = event.target.result;
  // 'users'라는 Object Store 생성 (id를 key로 사용)
  const store = db.createObjectStore("users", { keyPath: "id" });
  console.log("Object Store 'users' 생성됨");
};

// 3. 성공적으로 DB 연결되면 데이터 추가
request.onsuccess = function (event) {
  const db = event.target.result;
  const tx = db.transaction("users", "readwrite");
  const store = tx.objectStore("users");

  store.add({ id: 1, name: "홍길동", age: 100 });
  store.add({ id: 2, name: "admin", age: 35 });

  console.log("데이터 추가 완료");
};

위 코드를 콘솔에 입력해주고 실행하면 아래와 같은 화면이 나온다.

3. IndexedDB 데이터 확인

이제 데이터가 잘 들어갔는지 확인해보자.

아까 봤던 개발자 도구에서 IndexedDB를 보면 데이터가 잘 들어가 있는게 확인된다.

4. IndexedDB 데이터 조회

특정 ID로 데이터를 조회해보자.

const request = indexedDB.open("myDB", 1);

request.onsuccess = function (event) {
  const db = event.target.result;
  const tx = db.transaction("users", "readonly");
  const store = tx.objectStore("users");

  const getRequest = store.get(1);  // ID가 1인 사용자 조회

  getRequest.onsuccess = function () {
    console.log("조회 결과:", getRequest.result);
  };
};

위 코드를 콘솔에 입력하고 실행하면 아래처럼 결과가 나온다.

5. IndexedDB 데이터 수정

데이터 수정 중에서 기존 ID 값을 덮어쓰는 put()을 사용해보자

put()의 경우 ID가 존재할 경우 데이터를 수정(Update)하고 없다면 추가(Create)한다.

const request = indexedDB.open("myDB", 1);

request.onsuccess = function (event) {
  const db = event.target.result;
  const tx = db.transaction("users", "readwrite");
  const store = tx.objectStore("users");

  const updatedUser = { id: 1, name: "이순신", age: 200 };  // id=1 사용자 수정
  const putRequest = store.put(updatedUser);

  putRequest.onsuccess = function () {
    console.log("수정 완료");
  };
};

위 코드를 콘솔에 입력하고 실행하면 아래처럼 결과가 나온다.

이후 IndexdDB에서 새로고침을 클릭하면 수정된것을 확인할 수 있다.

6.IndexedDB 데이터 삭제

이번에는 특정 ID의 데이터를 삭제해보겠다.

const request = indexedDB.open("myDB", 1);

request.onsuccess = function (event) {
  const db = event.target.result;
  const tx = db.transaction("users", "readwrite");
  const store = tx.objectStore("users");

  const deleteRequest = store.delete(2);  // ID가 2인 사용자 삭제

  deleteRequest.onsuccess = function () {
    console.log("삭제 완료");
  };
};

위 코드를 콘솔에 입력하고 실행하면 아래처럼 결과가 나온다.

또한 IndexedDB에서도 데이터가 삭제된것을 확인할 수 있다.

7. IndexedDB 삭제

이제 테스트 했던 myDB를 IndexedDB에서 삭제해서 초기 상태로 돌아가보자

이렇게 삭제하지 않을 경우 로컬 스토리지에 계속해서 데이터를 차지하고 있기 때문에 사용하지 않는 데이터는 삭제해주는것이 좋다.

const deleteRequest = indexedDB.deleteDatabase("myDB");

deleteRequest.onsuccess = function () {
  console.log("✅ 데이터베이스 삭제 완료 (초기화됨)");
};

deleteRequest.onerror = function () {
  console.error("❌ 삭제 중 오류 발생");
};

deleteRequest.onblocked = function () {
  console.warn("⚠️ 다른 탭에서 DB를 사용 중이라 삭제가 지연됨");
};

위 코드를 콘솔에 입력하고 실행하면 아래처럼 결과가 나온다.

참고로 IndexdDB를 사용할때는 회원기능과 같이 사용하여 사용자가 로그아웃 할 경우 로그인 정보를 제거하거나, 초기화 버튼을 따로 만들어 둬서 버튼을 클릭하면 모든 데이터를 제거하는 등 다양한 방식으로 데이터를 초기화해줘야 한다.