728x90

IndexedDB는 클라이언트 측 데이터베이스에 대량의 구조화된 데이터를 저장하기 위한 웹 API입니다. 이것은 웹 애플리케이션이 사용자의 브라우저에 로컬로 데이터를 저장하고 해당 데이터에 오프라인으로 또는 사용자가 인터넷에 연결되어 있지 않을 때 액세스할 수 있는 방법을 제공합니다.

IndexedDB API는 다음을 포함하여 클라이언트 측 데이터베이스를 만들고 관리하기 위한 일련의 비동기 메서드를 제공합니다.

1. 데이터베이스 열기: `indexedDB.open()` 메서드는 데이터베이스를 여는 데 사용됩니다. 지정된 데이터베이스가 없으면 생성됩니다.

예:

let request = indexedDB.open("myDatabase", 1);

request.onerror = function(event) {

// Handle errors opening the database

};

request.onsuccess = function(event) {

let db = event.target.result;

// Do something with the database

};

2. 객체 저장소 만들기: 객체 저장소는 데이터를 저장하기 위한 컨테이너입니다. 관계형 데이터베이스의 테이블과 유사합니다. `createObjectStore()` 메서드는 개체 저장소를 만드는 데 사용됩니다.

예:

let objectStore = db.createObjectStore("customers", { keyPath: "id" });

이 예제에서는 "id" 속성에 대한 인덱스를 사용하여 "customers"라는 개체 저장소를 만듭니다.

3. 데이터 추가: `add()` 메서드는 개체 저장소에 데이터를 추가하는 데 사용됩니다.

예:

let transaction = db.transaction(["customers"], "readwrite");

let objectStore = transaction.objectStore("customers");

let customer = { id: 1, name: "John Doe", email: "johndoe@example.com" };

let request = objectStore.add(customer);

request.onerror = function(event) {

// Handle errors adding data to the object store

};

request.onsuccess = function(event) {

// Data added successfully to the object store

};

이 예제에서는 "customers" 개체 저장소를 읽고 쓰기 위해 트랜잭션이 생성됩니다. ID, 이름 및 이메일로 고객 개체가 생성되고 `add()` 메서드를 사용하여 개체 저장소에 추가됩니다.

4. 데이터 검색: `get()` 메서드는 개체 저장소에서 데이터를 검색하는 데 사용됩니다.

예:

let transaction = db.transaction(["customers"], "readonly");

let objectStore = transaction.objectStore("customers");

let request = objectStore.get(1);

request.onerror = function(event) {

// Handle errors retrieving data from the object store

};

request.onsuccess = function(event) {

let customer = event.target.result;

// Do something with the customer data

};

이 예제에서는 "customers" 개체 저장소에서 데이터를 읽기 위해 트랜잭션이 생성됩니다. `get()` 메서드는 ID가 1인 고객을 검색하는 데 사용됩니다.

5. 데이터 업데이트: `put()` 메서드는 객체 저장소의 데이터를 업데이트하는 데 사용됩니다.

예:

let transaction = db.transaction(["customers"], "readwrite");

let objectStore = transaction.objectStore("customers");

let customer = { id: 1, name: "John Doe", email: "johndoe@example.com", phone: "555-1234" };

let request = objectStore.put(customer);

request.onerror = function(event) {

// Handle errors updating data in the object store

};

request.onsuccess = function(event) {

// Data updated successfully in the object store

};

이 예제에서는 "customers" 개체 저장소를 읽고 쓰기 위해 트랜잭션이 생성됩니다. 고객 개체는 전화 번호로 업데이트되고 `put()` 메서드는 개체 저장소의 데이터를 업데이트하는 데 사용됩니다.

728x90

+ Recent posts