IndexedDB: 단계별

시작하기 전에 이 게시물은 IndexedBD가 무엇이며 어떻게 작동하는지 가장 간단한 방법으로 설명하려고 합니다. 따라서 순서를 유지하기 위해 IndexedDB에서 데이터베이스를 만드는 단계를 자세히 설명하는 다른 게시물에 대한 링크가 있습니다.
더 이상 고민하지 않고 매우 도움이 되기를 바랍니다.

IndexedDB란 무엇입니까?

간단히 말해서 IndexedDB는 클라이언트 측 저장을 위한 API입니다. Web Storage API(sessionStorage 및 localStorage)가 있지만 특정 구조를 유지하면서 많은 양의 데이터를 저장해야 하는 경우에는 그다지 유용하지 않습니다.

이 데이터베이스 시스템은 트랜잭션에서 작동하며(나중에 이에 대해 이야기할 것임) 객체 지향적입니다.

중요한 측면은 트랜잭션이 비동기식이며 실행할 작업에 연결된 요청의 개념으로 작동하고 해결되면 이벤트를 반환한다는 것입니다.

간단히 말해서 IndexedDB는 브라우저 내에 구조화된 정보를 저장하는 트랜잭션 데이터베이스 시스템입니다.

데이터베이스 생성

이 데이터베이스 시스템으로 시작할 때 연결을 연 다음 가질 데이터베이스 스키마를 지정해야 합니다. 이것은 저장될 개체의 구조를 참조하고 마지막으로 원하는 트랜잭션을 수행합니다. IndexedDB의 가장 주목할만한 장점 중 하나는 인터넷 연결 여부에 관계없이 응용 프로그램이 온라인과 오프라인 모두에서 작동할 수 있다는 것입니다.

다음 게시물은 사용자의 브라우저에서 데이터를 유지하기 위해 IndexedDB를 사용하여 데이터베이스를 만드는 방법을 설명합니다.

업무

데이터베이스( add , delete , get , put ) 데이터베이스에 대한 작업을 수행하기 전에 트랜잭션을 생성해야 합니다. 트랜잭션을 생성하는 것은 어떤 "테이블"(객체 저장소)이 의 일부가 될 것인지 지정하기 때문입니다. 트랜잭션을 수행하는 데 사용할 액세스 유형뿐만 아니라 IDBDatabase 개체의 transaction(storeNames, mode) 메서드가 사용되므로 사용됩니다.

요약:

// Database connection (IDBDatabase)
let db;

function createDatabase() {
    //...

    const request = window.indexedDB.open('MyDatabase', 1);

    request.onsuccess = (e) => {
        // Create the DB connection
        db = request.result;
    };

    //...
}

// Create a transaction
const transaction = db.transaction('students', 'readonly');

//...

transaccion(storeNames, mode) 메서드에는 다음 매개변수가 있습니다.

storeNames : 이 매개변수는 트랜잭션의 일부인 오브젝트 저장소(테이블)를 참조하며 값은 이름이 있는 배열입니다. 그러나 하나의 오브젝트 저장소만 사용되는 경우 값은 문자열이 될 수 있습니다.

mode : 이 매개변수는 트랜잭션을 수행하는 데 사용할 액세스 유형을 나타내며 읽기 전용(기본값) 또는 읽기 쓰기가 될 수 있습니다.

마지막으로 트랜잭션은 각 개체 저장소(테이블)에 액세스하고 해당 작업을 수행하는 데 사용되는 objectStore(storeName) 메서드가 포함된 개체를 반환합니다.

// Database connection (IDBDatabase)
let db;

function createDatabase() {
    //...

    const request = window.indexedDB.open('MyDatabase', 1);

    request.onsuccess = (e) => {
        // Create the DB connection
        db = request.result;
    };

    //...
}

// Create a transaction
const transaction = db.transaction('students', 'readonly');

transaction.oncomplete = function(event) {
  // This event will be executed when
  // the transaction has finished
};

transaction.onerror = function(event) {
  // Handling Errors
};

// Access to the "students table"
const objectStore = transaction.objectStore('students');
//...