IndexedDB(2)

지난 시간에 이어 indexedDB 데이터 관리에 대해 알아보겠습니다.

데이터는 단순히 “이름, 전화번호”로 취급됩니다.

데이터 추가

var store = db.transaction(('objectstore'), 'readwrite').objectStore('objectstore');
let addReq = store.add({
		name : '가나다',
		phone : '010-1234-1234'
});
addReq.onsuccess = function(event){
		console.log(event);
};

먼저 transaction()을 통해 데이터베이스에 액세스할 수 있습니다.

(첨가물)

트랜잭션은 데이터베이스의 상태를 변경하기 위해 수행되는 작업 단위입니다.

바로가기 : https://en.wikipedia.org/wiki/database_transactions

transaction()은 ObjectStore를 첫 번째 인수로 사용하고 작업 권한을 두 번째 인수로 사용합니다.

우선 “추가”에 필요한 조작 방법은 “읽기/쓰기”입니다.

(추가) 모든 오브젝트 저장소에 액세스하려면 첫 번째 인수로 빈 배열을 입력하십시오.

이렇게 하면 add()를 통해 데이터베이스에 데이터를 추가할 수 있습니다.

데이터 읽기

let id = Number(prompt('찾고싶은 id 입력'));
var store = db.transaction('objectstore', 'readonly').objectStore('objectstore');            
let getReq = store.get(id);
getReq.onsuccess = function(event){
    console.log(event.target.result);
};

transaction() 도 사용됩니다.

추가와 달리 작업 권한은 읽기 전용입니다. 이것은 읽기 전용이므로 쓸 필요가 없습니다.

입력 ID를 통해 get()을 사용하여 데이터를 읽을 수 있습니다.

모든 데이터 읽기

모든 데이터를 검색하려면 getAll()을 사용하십시오.

var store = db.transaction('objectstore', 'readonly').objectStore('objectstore');            
let getAllReq = store.getAll();
getAllReq.onsuccess = function(event){
    console.log(event.target.result);
};

데이터 변경

var store = db.transaction('objectstore', 'readwrite').objectStore('objectstore');
let putReq = store.put({
    id: 1,
    name : '라마바',
    phone : '010-5678-5678'
});
putReq.onsuccess = function(event){
    console.log(event.target.result);
}

변경에는 쓰기 작업도 필요하므로 추가와 마찬가지로 읽기 및 쓰기 권한이 부여되어야 합니다.

그리고 put()을 사용하여 변경된 데이터를 삽입할 수 있습니다.

이 시점에서 keyPath는 변경할 값을 관리합니다. (여기서는 ID가 1인 데이터가 변경됨)

(첨가물)

get()으로 데이터를 찾은 다음 put()으로 데이터를 찾을 수 있습니다.

let id = Number(prompt('찾고싶은 id 입력'));
var store = db.transaction('objectstore', 'readwrite').objectStore('objectstore');            
let getReq = store.get(id);
getReq.onsuccess = function(event){
    let data = event.target.result;
    data.name="라마바";
    data.phone="010-5678-5678";
    let putReq = store.put(data);
    putReq.onsuccess = function(event){
        console.log(event.target.result);
    };
};

대신 get()을 사용하더라도 ‘readwrite’로 설정해야 합니다.

데이터 삭제

var store = db.transaction('objectstore', 'readwrite').objectStore('objectstore');
let deleteReq = store.delete(Number(prompt('삭제할 id 입력')));
deleteReq.onsuccess = function(event){
    console.log(event);
};

삭제는 읽기 쓰기이기도 합니다.

여기서도 KeyPath를 사용했는데 delete() 에 넣으면 삭제할 수 있습니다.

다음은 삭제할 ID가 1인 데이터입니다.

이것이 우리가 indexedDB 데이터 관리에 대해 배운 방법입니다.

잘못된 부분이 있거나 추가 정보가 있는 경우 댓글을 남겨주세요. 매우 감사합니다!

좋은 하루 되세요 🙂