IndexedDB

indexedDB의 정의

지난번에 이어 또 다른 클라이언트 스토리지인 indexedDB에 대해 알아보도록 하겠다.

https://duyaan.tistory.com/99

LocalStorage

 

 

indexedDB는 다른 클라이언트 스토리지에 비해 사용가능한 저장공간이 매우 크다.

또한 데이터타입이 제한적이지 않다.

물론 비동기식으로 작동을 하고, 난이도가 어렵다는 단점이 있다.

하지만 서버로 전달하지 않고도 대량의 데이터를 저장할 수 있는 장점이 있기 때문에 쓰이지 않을까 싶다.

 

 

indexedDB의 주요 요소

• Database

브라우저는 하나 또는 그 이상의 Database를 가질 수 있으며 하나 이상의 Object Store로 구성된다. 또한 버전 정보를 가져서 버전에 따라 업그레이드를 할 수 있다.

• Object Store

실제 데이터를 담을 수 있으며, 각 Database 내에 하나 이상의 Object Store를 가진다. 또한 keyPath를 통해 식별자를 생성할 수 있다.

 

 

indexedDB 사용법

1. 데이터 베이스 열기
2. ObjectStore 생성
3. Transaction 시작하고, 데이터를 추가하거나 읽어 들이는 등의 데이터베이스 작업 요청
4. DOM 이벤트 리스너를 사용하여 요청이 완료될 때까지 기다림
5. 결과 수행

 

 

데이터베이스 열기

const request = indexedDB.open(name, version);

 

open()의 첫 번째 인자로는 database의 이름을, 두 번째 인자로는 버전을 설정해 준다.

이를 통해 데이터 베이스를 열도록 요청을 한다.

중요한 점은 ‘요청’이라는 것이다. 이 구문으로 바로 실행이 되는 것이 아니다.

 

 

아래의 코드로 결정이 된다.

let db;
request.onsuccess = function(event){
    db = event.target.result;
};
request.onerror = function(event){
    const error = event.target.error; 
    console.log('error', error.name);
};

 

요청이 성공하면 onsuccess를 실행하고, 그게 아니라면 onerror를 실행한다.

여기서 선언된 db는 IDBDatabase의 인스턴스로 이후에 데이터 베이스를 접근하기 위해 사용된다.

 

 

하지만 데이터베이스를 새로 만들거나, 버전이 업데이트된 경우에는

onsuccess와 onerror가 아닌 onupgradeneeded가 실행된다.

request.onupgradeneeded = function(event){
    db = event.target.result;

    let objectStore = 
        db.createObjectStore("name", { keyPath: "myKey", autoIncrement:true});
};

 

만약 데이터베이스가 없는데 새로 만드는 경우에는 open()을 통해 생성이 된 후, onupgradeneeded가 실행이 된다.

 

추가적으로 여기서 ObjectStore를 만들어준다. (createObjectStore를 통해 생성)

만들 때는 첫 번째 인자에 이름, 두 번째 인자에는 keyPath를 지정해 준다.

이는 데이터베이스 테이블의 식별자랑 같은 역할을 한다.)

 

 

하지만 주의할 점이 있다.

onupgradedneeded는 버전이 업데이트된 경우에 실행이 된다. (데이터베이스가 처음 생성되는 경우 외)

이전 버전에도 ObjectStore가 있을 텐데, 그렇게 되면 오류를 발생시킨다.

따라서 버전을 업데이트시킬 때 ObjectStore를 다른 곳으로 옮겨야 하는데, 조금 더 쉬운 방법으로

request.onupgradeneeded = function(event){
    db = event.target.result;  
    let oldVersion = event.oldVersion;
    if(oldVersion < 1){
        let objectStore = 
            db.createObjectStore("name", { keyPath: "keyName", autoIncrement:true});
    } 
};

 

이런 식으로 만들어주면, 이전 버전이 없을 경우(새로운 데이터베이스를 만드는 경우)에만 ObjectStore를 생성하게 된다.

 

 

 

이렇게 해서 Database를 실행(생성)하고, ObjectStore까지 생성할 수 있게 됐다.

 

 

(확인 방법)

html + js 를 실행 후, 해당 웹에서 ‘검사’를 통해 DevTools로 들어가게 되면 ‘Application’ 탭이 있다.

‘Application’ 탭을 들어가게 되면 Storage 카테고리에 IndexedDB가 있을 것인데, 거기에 생성한 데이터베이스가 있을 것이다.

 

 

(Database의 이름을 database, ObjectStore의 이름을 objectstore라고 설정하고, Key Path를 id로 설정한 모습)

 

 

생성한 데이터베이스에 접근해서 데이터를 관리(삽입, 수정, 삭제, 읽기)하는 방법은 다음 글에서 다루겠다.

 

 

 

 

 

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

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