자바스크립트 IndexedDB 코드

IndexedDB는 서버가 아닌 클라이언트 측(웹 브라우저)에 데이터를 저장할 수 있는 기술이다. 많은 양의 데이터를 영구적으로 저장 할 수 있으며, 비동기식으로 key - value 객체(Object) 형태로 데이터를 저장하게 된다.

(※ 참고: IndexedDB의 용량 제한은 하드디스크(HDD)의 50% 이다.)

---

# 데이터베이스(DB) 생성

# 객체 저장소(Object Store) 생성 (여러개의 객체 저장소 생성 가능)

let DB;
let DB_VERSION = 1; // 데이터베이스 버전.
let DB_NAME = 'INDEXED_DB';  // 데이터베이스 이름.
let OBJECT_STORE_NAME = 'OBJECT_STORE';  // 객체 저장소 이름.

// 데이터베이스 생성.
let CREATE_DB = window.indexedDB.open(DB_NAME, DB_VERSION);

// 데이터베이스 버전이 업그레이드 될 때 마다 실행되는 함수. 
// (최초 한번은 데이터베이스가 생성된 후.. 객체 저장소를 생성하는 역할을 함.)
CREATE_DB.onupgradeneeded = function(e){
    let db = e.target.result;
    let store;

    // 객체 저장소가 있는지 체크 -> 없다면 객체 저장소 생성.
    if(!db.objectStoreNames.contains(OBJECT_STORE_NAME)){ 
        // 객체 저장소 생성 코드 - {keyPath: "id", autoIncrement: true} 설정은.. 유일무이한 id값을 자동으로 생성하는 설정이다. 
        //                        (keyPath id값은 특정 데이터를 조회 하고자 할 때 사용된다.)
        store = db.createObjectStore(OBJECT_STORE_NAME, {keyPath: "id", autoIncrement: true}); 

        // 객체 저장소의 Index 생성 코드 - 특정 데이터를 keyPath id값이 아닌.. Index값으로 데이터를 조회 하고자 할 때.. 작성하는 코드.
        //                                 { unique: false } 설정은.. value값의 중복 허용 여부이다. (true이면 중복 불가 / false이면 중복 허용)
        store.createIndex('name', 'name', { unique: false });
        store.createIndex('age', 'age', { unique: false });
        store.createIndex('addr', 'addr', { unique: false });
    }else{
        store = e.target.transaction.objectStore(OBJECT_STORE_NAME);
    }

    // 초기 데이터 넣기.
    let initialData = [
        {name:'철수', age:10, addr:'서울'},
        {name:'영희', age:7, addr:'부산'},
        {name:'민수', age:7, addr:'서울'}
    ];
    for(let i=0; i<initialData.length; i++){
        store.add(initialData[i]); 
    }
    // 초기 데이터 추가 완료.
    // store.transaction.oncomplete = function(){
    //     const objectStore = db.transaction(OBJECT_STORE_NAME, "readwrite").objectStore(OBJECT_STORE_NAME);
    //     objectStore.getAll().onsuccess = function(e){
    //         console.log(e.target.result);
    //     }
    // }
};

// 데이터 [추가, 조회, 수정, 삭제] 할 때 사용되는 함수.
function getObjectStore(){ return DB.transaction([OBJECT_STORE_NAME], "readwrite").objectStore(OBJECT_STORE_NAME); }

// DB 생성 완료후 실행되는 콜백 함수. (비동기로 실행함!!)
CREATE_DB.onsuccess = function(e){ 
    DB = e.target.result; 

    // 데이터 전체 조회 및 출력.
    getObjectStore().getAll().onsuccess = function(e){
        let data = e.target.result;
        for(let i=0; i<data.length; i++){
            console.log(data[i]);
        }
    }
}

 

※ 생성된 IndexedDB는 크롬 개발자 도구의 Application 탭에서 확인 가능하다.

---

# 데이터 추가

let addRequest = getObjectStore().add({
    name:'바둑이',
    age:3,
    addr:'서울'
});

// 데이터 추가 완료후.. 실행되는 콜백함수
addRequest.onsuccess = function(){
  console.log("데이터 추가 성공");
};
// 데이터 추가 실패 했을때.. 실행되는 콜백함수
addRequest.onerror = function(){
  console.log("데이터 추가 실패");
};

 

※ 크롬 개발자 도구의 IndexedDB 에서 추가된 데이터를 확인 하려면 Refresh 버튼을 눌러야 한다.

---

# 데이터 조회

// 1. keyPath id값으로 특정 데이터 조회 - get()메서드 인자에 keyPath id값 입력. (keyPath id값은 크롬 개발자 도구에서 확인 가능하다.)                                  
getObjectStore().get(1).onsuccess = function(e){
    let data = e.target.result;
    console.log(data);
}

// 2. 데이터 전체 조회 // getAll(value, count)
getObjectStore().getAll().onsuccess = function(e){
    let data = e.target.result;
    console.log(data);
}

// 3. Index값으로 특정 데이터 조회 - {"addr":"서울"} 값을 갖고있는 데이터를 한 개만 조회.
getObjectStore().index('addr').get('서울').onsuccess = function(e){
    let data = e.target.result;
    console.log(data);
}

// 4. Index값으로 특정 데이터 전체 조회 - {"addr":"서울"} 값을 갖고있는 모든 데이터를 조회.
getObjectStore().index('addr').getAll('서울').onsuccess = function(e){
    let data = e.target.result;
    console.log(data);
}

// 5. 모든 데이터를 순차적으로 조회 
getObjectStore().openCursor(null, 'next').onsuccess = function(e){  // [next 오름차순, prev 내림차순] 설정 가능.
    let cursor = e.target.result;
    if(cursor){  // 데이터 순차적 조회 (cursor값이 유효할 경우.. 자동으로 반복 되어지는 구간)
        let data = cursor.value;
		console.log(data)
        cursor.continue();
    }else{        
        console.log("데이터 조회 완료");
    }
}

// 6. 특정 데이터를 순차적으로 조회 - {"addr":"서울"} 값을 갖고있는 모든 데이터를 순차적으로 조회.
let range = IDBKeyRange.only('서울');
getObjectStore().index('addr').openCursor(range, 'prev').onsuccess = function(e){  // [next 오름차순, prev 내림차순] 설정 가능.
    let cursor = e.target.result;
    if(cursor){ // 데이터 순차적 조회 (cursor값이 유효할 경우.. 자동으로 반복 되어지는 구간)
        let data = cursor.value;
		console.log(data)
        cursor.continue();
    }else{
        console.log("데이터 조회 완료");
    }
}

 

※ 크롬 개발자 도구의 IndexedDB 에서.. keyPath id 값을 확인 할 수 있다.

---

# 데이터 수정

// 1. keyPath id값으로 특정 데이터 수정 - get()메서드 인자에 keyPath id값 입력.
getObjectStore().get(1).onsuccess = function(e){
    let data = e.target.result;
    data.age = 7;    // age 변경.
    let updateRequest = getObjectStore().put(data);
    updateRequest.onsuccess = function(e){ console.log('수정 완료'); }
    updateRequest.onerror = function(e){ console.log('수정 실패'); }
}

// 2. Index값으로 특정 데이터 수정 - {"name":"민수"} 값을 갖고있는 데이터를 수정.
getObjectStore().index('name').get('민수').onsuccess = function(e){
    let data = e.target.result;
    data.name = '흰둥이';    // name 변경.
    data.age = 3;    // age 변경.
    let updateRequest = getObjectStore().put(data);
    updateRequest.onsuccess = function(e){ console.log('수정 완료'); }
    updateRequest.onerror = function(e){ console.log('수정 실패'); }
}

// 3. 모든 데이터 일괄 수정
getObjectStore().openCursor().onsuccess = function(e){
    let cursor = e.target.result;
    if (cursor){
        let data = cursor.value;
        data.age = 3;    // age 변경.
        let updateRequest = cursor.update(data);
        updateRequest.onsuccess = function(){ console.log('수정 완료');  };
        updateRequest.onerror = function(){ console.log('수정 실패'); }
        cursor.continue();
    }else{
        console.log('일괄 수정 완료');
    }
}

// 4. 특정 데이터 일괄 수정 - {"addr":"서울"} 값을 갖고있는 모든 데이터를 일괄 수정.
let range = IDBKeyRange.only('서울');
getObjectStore().index('addr').openCursor(range).onsuccess = function(e){
    let cursor = e.target.result;
    if (cursor){
        let data = cursor.value;
        data.age = 7;    // age 변경.
        let updateRequest = cursor.update(data);
        updateRequest.onsuccess = function(){ console.log('수정 완료'); };
        updateRequest.onerror = function(){ console.log('수정 실패'); }
        cursor.continue();
    }else{
        console.log('일괄 수정 완료');
    }
}

 

※ 크롬 개발자 도구의 IndexedDB 에서.. 수정된 사항을 확인 하려면.. Refresh 버튼을 눌러야 한다.

---

# 데이터 삭제

// 1. 특정 데이터 삭제 - delete()메서드 인자에 keyPath id값 입력.
let delRequest = getObjectStore().delete(1);
// 데이터 삭제 완료 후 실행되는 콜백함수
delRequest.onsuccess = function(){
  console.log("데이터 삭제 성공");
}
// 데이터 삭제 실패 했을 때 실행되는 콜백함수
delRequest.onerror = function(){
  console.log("데이터 삭제 실패");
}

// 2. 특정 데이터 일괄 삭제 - {"addr":"서울"} 값을 갖고있는 모든 데이터 삭제.
let range = IDBKeyRange.only('서울');
getObjectStore().index('addr').openCursor(range).onsuccess = function(e){
    let cursor = e.target.result;
    if(cursor){
        let delRequest = cursor.delete();
        delRequest.onsuccess = function(){ console.log("데이터 삭제 성공"); };
        delRequest.onerror = function(){ console.log("데이터 삭제 실패"); };
	    cursor.continue();
    }else{
        console.log('일괄 삭제 완료');
    }
}

// 3. 모든 데이터 삭제
getObjectStore().clear();

 

※ 크롬 개발자 도구의 IndexedDB 에서.. 삭제된 사항을 확인 하려면.. Refresh 버튼을 눌러야 한다.

---

# 데이터 갯수 가져오기

// 1. 데이터 전체 갯수
getObjectStore().count().onsuccess = function(e){
    console.log(e.target.result)
};

// 2. 특정 데이터 갯수 - {"addr":"서울"} 값을 갖고있는 데이터 갯수.
let range = IDBKeyRange.only('서울');
getObjectStore().index('addr').count(range).onsuccess = function(e){
    console.log(e.target.result)
};