IndexedDB 예제

IndexedDB 종합 예제

• 코드펜 예제

See the Pen IndexedDB Sample by shinhs9423 (@shinhs9423) on CodePen.

 

 

---

IndexedDB 예제 분석

• IndexedDB 사용하기

let db;
// DB를 전역에서 사용하기 위한 변수

const DBRequest = indexedDB.open('DataBaseName',1);
// 식별자 = indexedDB.open('DB이름', 버전);
// 버전으로 addEventListener('upgradeneeded',function(event){ });를 실행시킬 수 있다.
// 브라우저가 리로드 되면서 버전을 확인하고, 버전이 같지 않을때 실행된다.

DBRequest.addEventListener('success', function(event){
// DB가 생성되면 동작하는 함수
    console.log('success');
    db = event.target.result;
    // 생성된 DB의 ref를 전역변수 db에 담는다
});

DBRequest.addEventListener('error', function(event){
// error 발생 시 실행되는 함수
// opne, upgradeneeded 등 모든 상황의 error에 실행 된다
    const error = event.target.error; 
    console.log('error', error.name);
});


DBRequest.addEventListener('upgradeneeded', function(event){
    // 버전이 업그레이드 될 때 실행 됨.
    console.log('upgradeneeded');

    db = event.target.result;  
    // 생성된 DB의 ref를 전역변수 db에 담는다

    let oldVersion = event.oldVersion;
    // 최초 실행을 판단할 수 있다.
    // .open('db식별자',1) 일 때 event.oldVersion = 0이 나타난다.

    if(oldVersion < 1){
    // 최초 실행 시 objectStore를 생성한다.
    // oldVersion == 0 < 1 [최초실행이면] 이라는 뜻이 된다.
        db.createObjectStore('objectStoreName', {keyPath:'id', autoIncrement:true});
        // object store 생성
        // db.createObjectStore('식별자', {keyPath:'id', autoIncrement:true});
        // keyPath, autoIncrement는 생략 가능하다. [프라이머리 키 생성]
    } 
    /*
        objectStore추가가 필요하다면 if 문과 버전을 이용한다.
        if(oldVersion < 2){
            db.createObjectStore('objectStoreName2', {keyPath:'id', autoIncrement:true});
        }

        if(oldVersion < 3){
            db.createObjectStore('objectStoreName2', {keyPath:'id', autoIncrement:true});
        } 
    */
});

• IndexedDB Transaction - add

<input type="button" value="add" onclick="
    let store = db.transaction('objectStoreName', 'readwrite').objectStore('objectStoreName');
    // objectStore 에 'readwrite' 레퍼런스 생성한다
    let addReq = store.add({
    // objectStore 의 'readwrite'에 .add 함수를 이용한 데이터 추가
        title:prompt('title?'),
        body:prompt('body?')
        // 객체 형태로 데이터 추가를 요청한다
    });
    addReq.addEventListener('success', function(event){
    // success 이벤트로 요청 사항 처리
        console.log(event.target.result); // 추가된 객체의 id 값이 result로 나타남
    });
">

• IndexedDB Transaction - read

    <input type="button" value="get" onclick="
        let id = Number(prompt('?id'));
        // id 값을 받는다.(문자열을 숫자로 바꿔준다.)
        let store = db.transaction('objectStoreName', 'readonly').objectStore('objectStoreName');
        // objectStore의 'readonly' 레퍼런스를 생성한다
        let getReq = store.get(id);
        // get을 이용해 데이터 읽기를 요청한다
        getReq.addEventListener('success', function(event){
        // success 이벤트로 요청 사항 처리
            console.log(event.target.result);
        });
    ">

• IndexedDB Transaction - getAll

<input type="button" value="list" onclick="
    let store = db.transaction('objectStoreName', 'readonly').objectStore('objectStoreName');
    // objectStore의 'readonly' 레퍼런스를 생성한다
    let getAllReq = store.getAll();
    // getAll() == select * from DB (getAll() api를 이용해 모든 데이터를 요청한다.)
    // 데이터가 많아지면 
    getAllReq.addEventListener('success', function(event){
    // success 이벤트로 요청 사항 처리
        console.log(event.target.result);
    });
">

• IndexedDB Transaction - put

<input type="button" value="update" onclick="
    let store = db.transaction('objectStoreName', 'readwrite').objectStore('objectStoreName');
    // objectStore 에 'readwrite' 레퍼런스 생성한다
    let putReq = store.put({
    // put을 이용해 수정을 요청한다
        id:Number(prompt('id?')),
        // 프라이머리 키를 이용해 데이터를 선택한다
        title:prompt('title?'),
        body:prompt('body?')
        // 수정내용을 받는다
    });
    putReq.addEventListener('success',function(event){
    // success 이벤트로 요청 사항 처리
        console.log(event);
    });
">

• IndexedDB Transaction - delete

<input type="button" value="delete" onclick="
    let store = db.transaction('objectStoreName', 'readwrite').objectStore('objectStoreName');
    // objectStore 에 'readwrite' 레퍼런스 생성한다
    let deleteReq = store.delete(Number(prompt('id?')));
    // delete를 이용해 삭제 요청한다. 파라미터로 삭제할 object를 선택한다.
    deleteReq.addEventListener('success', function(event){
        // success 이벤트로 요청 사항 처리
        console.log(event);
    });
">