HTML5 IndexedDB 데이터 추가 예제 완벽 가이드

IndexedDB란 무엇인가?

IndexedDB는 브라우저 내에 대용량의 구조화된 데이터를 저장할 수 있는 HTML5의 클라이언트 사이드 데이터베이스 API입니다. 오프라인 상태에서도 데이터를 유지할 수 있어 웹 애플리케이션에서 널리 활용됩니다.

IndexedDB에 데이터 추가하는 함수 예제

다음은 IndexedDB의 employee 객체 스토어에 새로운 레코드를 추가하는 add() 함수의 예제입니다.

function add() {
    var request = db.transaction(["employee"], "readwrite")
    .objectStore("employee")
    .add({ id: "001", name: "Amit", age: 28, email: "demo1@example.com" });
    request.onsuccess = function(event) {
        alert("Amit has been added to your database.");
    };
    request.onerror = function(event) {
        alert("Unable to add data\r\nAmit is already exist in your database! ");
    }
}

코드 동작 방식 살펴보기

위 코드의 핵심 동작 과정은 다음과 같습니다.

• 트랜잭션 생성: db.transaction(["employee"], "readwrite")를 통해 쓰기 권한이 있는 트랜잭션을 시작합니다.
• 객체 스토어 접근: objectStore("employee")로 데이터를 저장할 객체 스토어를 가져옵니다.
• 데이터 추가: add() 메서드로 새 레코드를 삽입합니다.
• 결과 처리: 성공 시 onsuccess, 실패 시(예: 중복된 키) onerror 이벤트 핸들러가 실행됩니다.

추가되는 데이터 구조

위 함수가 실행되면 데이터베이스에는 아래와 같은 직원 정보가 저장됩니다.

const employeeData = [
    { id: "001", name: "Amit", age: 28, email: "demo1@example.com" },
];

각 레코드는 고유한 id를 키로 사용하며, 이름·나이·이메일 등의 속성을 함께 저장합니다. 만약 동일한 id를 가진 데이터가 이미 존재하면 onerror 핸들러가 호출되어 중복 추가가 방지됩니다.