IndexedDB를 어떻게 사용하나요? 완전한 CRUD 작업에 대한 가이드-JS 튜토리얼-php.cn

How to use IndexedDB? Guide on complete CRUD Operations

IndexedDB에 대한 종합 가이드: 클라이언트측 스토리지를 위한 브라우저의 최강자

웹 애플리케이션이 더욱 정교해짐에 따라 효율적인 클라이언트측 스토리지 솔루션에 대한 필요성도 커졌습니다. 대량의 구조화된 데이터를 저장하기 위한 하위 수준 API인 IndexedDB는 강력한 오프라인 지원 애플리케이션을 만들려는 웹 개발자, 소프트웨어 엔지니어 및 웹 애호가를 위한 강력한 도구입니다.

이번 블로그에서는 IndexedDB가 무엇인지, 어떻게 작동하는지, 어떻게 효과적으로 사용하는지 실제 사례를 통해 살펴보겠습니다. PWA(Progressive Web App), 복잡한 대시보드, 게임 등 무엇을 구축하든 IndexedDB는 데이터를 원활하게 관리하는 데 도움이 될 수 있습니다.

IndexedDB란 무엇인가요?

IndexedDB는 파일 및 Blob을 포함하여 대량의 구조화된 데이터를 저장하도록 설계된 브라우저 기반 NoSQL 데이터베이스입니다. 쿠키나 localStorage와 달리 IndexedDB를 사용하면 구조화된 형식으로 데이터를 저장하고 인덱스를 사용하여 쿼리할 수 있으므로 복잡한 사용 사례에 이상적입니다.

IndexedDB의 주요 기능:

비동기 작업: IndexedDB와의 상호 작용은 차단되지 않으며 원활한 성능을 보장합니다.
구조화된 데이터 저장소: 데이터를 키-값 쌍으로 저장하여 인덱스를 사용한 효율적인 쿼리가 가능합니다.
오프라인 기능: 데이터가 로컬에 저장되므로 인터넷 연결 없이도 액세스할 수 있습니다.
큰 저장 용량: 쿠키나 localStorage에 비해 더 많은 저장 용량을 제공합니다.

IndexedDB 사용 사례:

프로그레시브 웹 앱: 원활한 경험을 위해 오프라인 데이터를 저장합니다.
대용량 데이터 저장: 사용자 기본 설정이나 애플리케이션 상태 등 대용량 데이터 세트를 저장합니다.
캐싱: 성능 향상을 위해 API 응답을 캐시합니다.

IndexedDB 시작하기

IndexedDB는 어떻게 작동하나요?

IndexedDB는 다음으로 구성된 데이터베이스 구조에서 작동합니다.

데이터베이스: 데이터를 위한 최상위 컨테이너입니다.
객체 저장소: 데이터가 저장되는 테이블이며 각각 고유한 이름으로 식별됩니다.
인덱스: 객체 저장소 내에서 쿼리를 최적화하는 구조.

IndexedDB API: 기본 작업

IndexedDB의 주요 작업은 다음과 같습니다.

데이터베이스 열기: 데이터베이스를 생성하거나 액세스합니다.
객체 저장소 생성: 데이터 저장소를 정의합니다.
CRUD 작업 수행: 데이터 추가, 읽기, 업데이트 및 삭제
트랜잭션 사용: 데이터 작업을 원자적으로 관리합니다.

예 1: 데이터베이스 생성 및 열기

객체 저장소 사용자를 사용하여 MyDatabase라는 IndexedDB 데이터베이스를 생성하는 방법은 다음과 같습니다.

const dbName = "MyDatabase";
const dbVersion = 1; // Versioning is required for schema updates.

const request = indexedDB.open(dbName, dbVersion);

request.onupgradeneeded = function (event) {
  const db = event.target.result;

  // Create an object store named 'users' with 'id' as the keyPath
  if (!db.objectStoreNames.contains("users")) {
    db.createObjectStore("users", { keyPath: "id" });
  }
  console.log("Database setup complete");
};

request.onsuccess = function (event) {
  const db = event.target.result;
  console.log("Database opened successfully");
};

request.onerror = function (event) {
  console.error("Error opening database:", event.target.errorCode);
};

로그인 후 복사

설명:

indexedDB.open 메소드는 데이터베이스를 열거나 생성합니다.
새 데이터베이스를 생성하거나 버전을 업그레이드할 때 onupgradeneeded 이벤트가 트리거됩니다.
id를 기본 키로 사용하여 users라는 객체 저장소가 생성됩니다.

예제 2: 객체 저장소에 데이터 추가

트랜잭션을 사용하여 객체 저장소에 데이터를 추가할 수 있습니다.

function addUser(id, name, email) {
  const request = indexedDB.open("MyDatabase", 1);

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

    const user = { id, name, email };
    const addRequest = objectStore.add(user);

    addRequest.onsuccess = function () {
      console.log("User added:", user);
    };

    addRequest.onerror = function (event) {
      console.error("Error adding user:", event.target.errorCode);
    };
  };
}

// Add a new user
addUser(1, "John Doe", "john.doe@example.com");

로그인 후 복사

설명:

데이터를 수정하기 위해 읽기/쓰기 모드로 트랜잭션을 생성합니다.
add 메소드는 사용자 객체 저장소에 데이터를 삽입합니다.

예제 3: 객체 저장소에서 데이터 읽기

get 메소드를 사용하여 데이터를 검색하거나 모든 항목을 반복합니다.

function getUser(id) {
  const request = indexedDB.open("MyDatabase", 1);

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

    const getRequest = objectStore.get(id);

    getRequest.onsuccess = function () {
      if (getRequest.result) {
        console.log("User found:", getRequest.result);
      } else {
        console.log("User not found");
      }
    };

    getRequest.onerror = function (event) {
      console.error("Error retrieving user:", event.target.errorCode);
    };
  };
}

// Get user with ID 1
getUser(1);

로그인 후 복사

설명:

get 메소드는 키로 특정 레코드를 가져옵니다.
데이터 검색은 비동기식이므로 성공 및 오류 핸들러가 사용됩니다.

예 4: IndexedDB에서 데이터 업데이트

put 메소드를 사용하여 기존 레코드를 업데이트합니다.

function updateUser(id, updatedData) {
  const request = indexedDB.open("MyDatabase", 1);

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

    const putRequest = objectStore.put({ ...updatedData, id });

    putRequest.onsuccess = function () {
      console.log("User updated:", { ...updatedData, id });
    };

    putRequest.onerror = function (event) {
      console.error("Error updating user:", event.target.errorCode);
    };
  };
}

// Update user with ID 1
updateUser(1, { name: "Johnathan Doe", email: "johnathan.doe@example.com" });

로그인 후 복사

예 5: IndexedDB에서 데이터 삭제

삭제 메소드를 사용하여 레코드를 제거합니다.

function deleteUser(id) {
  const request = indexedDB.open("MyDatabase", 1);

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

    const deleteRequest = objectStore.delete(id);

    deleteRequest.onsuccess = function () {
      console.log("User deleted with ID:", id);
    };

    deleteRequest.onerror = function (event) {
      console.error("Error deleting user:", event.target.errorCode);
    };
  };
}

// Delete user with ID 1
deleteUser(1);

로그인 후 복사

IndexedDB와 기타 스토리지 솔루션 비교

Feature	IndexedDB	localStorage	sessionStorage
Storage Limit	Several MB to GB	5 MB (approx)	5 MB (approx)
Data Format	Key-value pairs	Key-value pairs	Key-value pairs
Asynchronous	Yes	No	No
Structured Data	Yes	No	No

IndexedDB 사용 모범 사례

트랜잭션을 올바르게 사용: 원자성을 보장하기 위해 항상 트랜잭션 내의 데이터 작업을 관리하세요.
정상적으로 오류 처리: 더 나은 디버깅과 사용자 피드백을 위해 오류 처리기를 구현합니다.
버전 제어: 스키마 변경 사항을 관리하려면 데이터베이스 버전을 신중하게 올리세요.
오프라인 시나리오 테스트: IndexedDB는 오프라인 기능에 자주 사용됩니다. 인터넷 연결 없이 예상대로 작동하는지 확인하세요.

결론

IndexedDB는 클라이언트 측 데이터 저장을 위한 강력한 도구로, localStorage와 같은 기존 저장 방법을 훨씬 능가하는 기능을 제공합니다. 구조화된 데이터, 대용량 저장 용량 및 오프라인 기능을 지원하는 IndexedDB는 최신 웹 애플리케이션을 구축하는 데 필수적인 기술입니다.

주요 시사점: