[Javascript] IndexedDB를 알아보자

 

IndexedDB란?

IndexedDB는 웹 브라우저에서 대용량의 구조화된 데이터를 클라이언트 측에 저장할 수 있는 로우 레벨 API입니다. IndexedDB를 사용하면 네트워크 상태에 상관없이 데이터를 저장하고 검색할 수 있는 웹 애플리케이션을 만들 수 있습니다. 이는 웹 애플리케이션이 온라인과 오프라인 환경에서 모두 동작할 수 있게 해줍니다2.

IndexedDB의 주요 특징은 다음과 같습니다.

• 비동기 API: IndexedDB는 비동기 방식으로 동작하여 애플리케이션이 블록되지 않도록 합니다.
• 객체 저장소: IndexedDB는 객체 저장소(Object Store)를 사용하여 데이터를 저장합니다. 이는 JavaScript 객체를 저장하고 검색할 수 있음을 의미합니다.
• 트랜잭션: IndexedDB는 트랜잭션을 사용하여 데이터의 일관성을 유지합니다.
• 인덱스: IndexedDB는 인덱스를 사용하여 데이터를 고성능으로 탐색할 수 있습니다.
• 동일 출처 정책: IndexedDB는 동일 출처 정책을 따르므로, 저장된 데이터는 같은 도메인에서만 접근할 수 있습니다3.

IndexedDB를 사용하여 데이터베이스를 열고, 객체 저장소를 생성하고, 트랜잭션을 시작하여 데이터를 추가하거나 읽어들이는 등의 작업을 수행할 수 있습니다. IndexedDB는 많은 양의 데이터를 저장하고 검색하는 데 적합한 웹 저장소 솔루션입니다.

 

 

 

아래의 예제에서는 사용자 정보를 저장하고 검색하는 방법을 설명합니다.

먼저, IndexedDB 데이터베이스를 열고 객체 저장소(Object Store)를 생성합니다.

데이터베이스 열기 및 객체 저장소 생성

javascript

var db;

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

request.onupgradeneeded = function(event) {
    db = event.target.result;
    var objectStore = db.createObjectStore('users', { keyPath: 'id', autoIncrement: true });
    objectStore.createIndex('name', 'name', { unique: false });
    objectStore.createIndex('email', 'email', { unique: true });
};

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

request.onerror = function(event) {
    console.error('Database error: ' + event.target.errorCode);
};

 

데이터 저장하기

javascript

function addUser(name, email) {
    var transaction = db.transaction(['users'], 'readwrite');
    var objectStore = transaction.objectStore('users');

    var request = objectStore.add({ name: name, email: email });

    request.onsuccess = function(event) {
        console.log('User has been added to your database.');
    };

    request.onerror = function(event) {
        console.error('Unable to add user. ' + event.target.errorCode);
    };
}

// 예제 사용자 추가
addUser('John Doe', 'john@example.com');
addUser('Jane Doe', 'jane@example.com');

 

데이터 불러오기

javascript

function getUserByName(name) {
    var transaction = db.transaction(['users'], 'readonly');
    var objectStore = transaction.objectStore('users');
    var index = objectStore.index('name');

    var request = index.get(name);

    request.onsuccess = function(event) {
        if (request.result) {
            console.log('User found: ', request.result);
        } else {
            console.log('No user found with that name.');
        }
    };

    request.onerror = function(event) {
        console.error('Unable to retrieve data. ' + event.target.errorCode);
    };
}

// 예제 사용자 검색
getUserByName('John Doe');

이 예제에서는 IndexedDB를 열고 객체 저장소를 생성한 후, 사용자 데이터를 저장하고 이름을 기준으로 검색하는 방법을 보여줍니다. 이 코드를 통해 IndexedDB에서 데이터를 저장하고 검색하는 기본적인 방법을 이해할 수 있습니다.