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()` 메서드는 개체 저장소의 데이터를 업데이트하는 데 사용됩니다.
'IT' 카테고리의 다른 글
자바스크립트 "Idle Detection API (en-US)" (0) | 2023.03.21 |
---|---|
자바스크립트 "Image Capture API" (0) | 2023.03.21 |
자바스크립트 "Ink API" (0) | 2023.03.16 |
자바스크립트 "Intersection Observer API" (0) | 2023.03.16 |
자바스크립트 "Keyboard API" (0) | 2023.03.16 |