[Javascript] Indexed DB

Indexed DB란?

브라우저에서 기본으로 제공하는 데이터베이스 기능이다.
JSON 형태로 데이터를 저장하며, 트랜잭션을 지원하고, Key-Value 단위의 데이터 관리 시스템을 가진다.

그리고 도메인마다 독립적으로 구성되기 때문에, A 도메인에서 만든 IndexedDB는 B 도메인에서는 절대 접근할 수 없고, 서로 영향을 줄 수 없다.

아마 웬만하면 쓸일이 없을 것 같긴 한데, 프론트에서 데이터를 복잡하게 다룰 일이 있다면 한번쯤 고려해볼만 한 것 같다.

브라우저 지원 상태도 나쁘지 않다.
IE도 불완전하게나마 지원되고 있는 상태다.

https://caniuse.com/indexeddb

데이터베이스 열기

데이터베이스를 여는 것은 다음과 같이 할 수 있다.
전역 객체에 존재하는 indexedDB 객체에서 open 함수를 호출하는 것이다.
인자로는 데이터베이스의 이름을 지정한다.

<script>
        const request = window.indexedDB.open('test');
        const db = null;

        request.onerror = (event) => {
            console.log('DB 열기 실패');
        };
        request.onsuccess = (event) => {
            console.log('DB 열기 성공');
            db = event.target.result;
        };
</script>

그리고 콜백으로 상황을 처리하기 때문에, onsuccess에서 db 값을 반환받아 할당해주면 된다.

스토어 생성

RDB에서의 테이블과 매칭되는 것이 바로 Object Store라는 것이다.
스토어는 키값을 포함하는 JSON 객체의 목록을 가진다.

그리고 스토어는 기본적으로 onupgradeneeded에서 정의해야 한다. 안그러면 오류를 내더라.
createObjectStore 메서드에 첫번쨰 인자로 스토어의 이름을, 그리고 두번째 인자로 이런저런 옵션을 넣어줄 수 있다. keyPath는 기본키로 사용할 값의 이름이다.

그리고 onupgradeneeded는 데이터베이스 버전이 올라갈때만 호출되는 녀석이라,

스토어 정의를 변경할때마다 버전을 올려줘야 제대로 반영이 될 것이다.

만약 키가 자동으로 생성되게 하고 싶다면 autoIncrement 옵션값을 true로 주면 된다.

스토어의 삭제

스토어를 만든다면 지울 줄도 알아야 하지 않겠는가?

특히 버전을 올리면서 데이터베이스의 정의를 바꾸려 한다면, 기존의 정의를 삭제할 필요도 있다.

그럴 때는 deleteObjectStore로 지워주면 된다.

데이터의 삽입

그럼 밑준비는 됐으니 데이터를 한번 집어넣어보자.
IndexedDB는 기존의 DB들과 다르게, 읽기나 쓰기를 할때 항상 명시적으로 트랜잭션을 꺼낸 다음 처리를 해줘야 한다.

먼저 가져올 스토어와 읽기&쓰기모드를 지정해서 트랜잭션을 열어둔 후에, 거기서 objectStore로 당장 작업할 스토어를 가져온다.

여기까지는 스토어로 어떤 작업을 하든간에 공통적인 부분이다.

그러면 이제 add 함수로 스토어에 삽입을 할 수 있는 것이다.
여기서 삽입할 값을 오브젝트로 넘겨주기만 하면 된다.

여러번을 넣는 것도 가능하다.

데이터의 조회

조회는 스토어 객체의 get 메서드 등으로 수행할 수 있다.
get은 키값을 받아서 그 값을 하나 가져오고, getAll은 전부 가져온다.

질의를 통해서 복잡한 조건을 지정할 수도 있는데 그건 나중에 다뤄보겠다.

아래는 스토어에서 모든 데이터를 읽어와 리스트로 뿌려주는 간단한 코드다.

데이터의 삭제

데이터의 삭제는 delete와 clear 등으로 수행할 수 있다.
delete는 키값을 받아서 그걸 지우고, clear는 전부 지운다.
여기서는 간단하게 clear만 썼다.

응용: 간단한 기록형 프로그램

위의 코드들을 이용해서 데이터를 기록만 하는 간단한 페이지를 구현해보았다.

소스는 여기서
https://github.com/myyrakle/indexedDB-Example/tree/main/start
참조하면 된다.

입력창과 버튼 2개가 있는데

여기서 데이터를 입력해서 삽입 버튼을 누르면

데이터를 삽입한 다음 새로고침해서 전체 목록을 조회한다.

그리고 전부 지우기 버튼을 누르면 전부 날린 다음에 새로고침을 해준다.

참조
https://developer.mozilla.org/ko/docs/Web/API/IndexedDB_API/Using_IndexedDB
https://pks2974.medium.com/indexeddb-%EA%B0%84%EB%8B%A8-%EC%A0%95%EB%A6%AC%ED%95%98%EA%B8%B0-ca9be4add614
https://developer.mozilla.org/en-US/docs/Web/API/IDBObjectStore