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://ko.wikipedia.org/wiki/데이터베이스_트랜잭션

 

 

transaction()은 첫 번째 인자로 ObjectStore가, 두 번째 인자로 작업 권한이 들어간다.

우선 ‘추가’에 필요한 작업 방식은 ‘readwrite’이다.

 

(추가) 모든 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()을 이용한다.

추가와는 다르게 작업 권한은 ‘readonly’이다. 읽기만 할 작업이라, 쓰기는 필요가 없다.

get()을 이용해서 입력받은 id를 통해 데이터를 읽을 수 있다.

 

 

 

모든 데이터 읽기

모든 데이터를 가져오고 싶을 때는 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);
}

변경 역시 쓰기 작업이 필요하기 때문에 ‘추가’와 마찬가지로 권한을 readwrite로 주어야 한다.

그리고 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);
};

삭제도 마찬가지로 readwrite임을 알아두자.

역시 keyPath를 이용했고, delete()에 넣어서 삭제가 가능하다.

 

다음은 id가 1인 데이터가 삭제된 모습이다.

 

 

이렇게 indexedDB의 데이터 관리에 대해서 알아봤다.

 

 

 

 

글 내용 중, 잘못됐거나 더 알아야 하는 지식이 있다면 댓글로 남겨주시면 감사하겠습니다!

모두 좋은 하루 보내세요:)