Indexed DB와 dexie.js (feat. 브라우저에 데이터를 저장하는 방법 비교)

브라우저에 데이터 저장하는 방법과 비교

브라우저에 데이터를 저장하는 방법으로는 아래와 같이 크게 4가지가 있다.

방법	만료기간 설정 가능 여부	브라우저가 닫혀도 데이터 유지	오프라인 환경에서도 데이터 유지	저장공간	특징
쿠키	O	O	X	4KB
local storage	X (사용자가 수동으로 삭제하지 않는 이상 데이터가 계속 남아있음)	O	X	session stotage와 함께 전체 10MB	같은 origin에서는 어떤 창이든, 탭이든 데이터를 공유함
session storage	X (탭이 종료되면 데이터 삭제)	X	X	session stotage와 함께 전체 10MB
indexed db	X (사용자가 수동으로 삭제하지 않는 이상 데이터가 계속 남아있음)	O	O	브라우저의 전체 Disk용량의 80%까지 사용 가능	같은 origin에서는 어떤 창이든, 탭이든 데이터를 공유함 비동기 API 방식 일반적으로 localstorage에 비해 속도 느림

 

Indexed DB

🔎 Indexed DB란?

IndexedDB는 브라우저에 내장된 데이터베이스로 localStorage보다 훨씬 강력합니다. 데이터를 지속적으로 저장할 뿐만 아니라, 네트워크 가용성에 관계없이 풍부한 쿼리 기능을 갖춘 웹 애플리케이션을 만들 수 있으므로 이러한 애플리케이션은 온라인과 오프라인 모두에서 작동할 수 있습니다. IndexedDB는 대량의 데이터를 저장하는 애플리케이션(예: 대출 도서관의 DVD 카탈로그)과 지속적인 인터넷 연결이 필요하지 않은 애플리케이션(예: 메일 클라이언트, 할 일 목록 및 작업 목록)에 유용합니다.

 

📢 Indexed DB의 주요 기능

• 비동기 API:  메인 스레드를 차단하지 않고 효율적인 데이터 처리를 지원
• 키-값 저장소: 데이터를 키-값 쌍으로 저장하여 빠른 검색 및 인덱싱 기능을 제공
• 색인된 쿼리:  색인을 사용하여 복잡한 쿼리를 가능하게 하여 검색 성능을 향상
• 트랜잭션 및 개체 저장소:  개체 저장소를 사용하여 원자성 작업 및 데이터 분리를 용이
• 지속성:  장기 데이터 저장, 브라우저 재시작 및 시스템 충돌 방지 기능을 제공

 

dexie.js 을 사용하여 Indexed DB 편하게 사용하기

Indexed DB를 사용하면 저장, 읽기 등과 같은 간단한 기능만 사용하려 해도 코드가 복잡하고 지저분해진다는 단점이 있어, 이런 점을 고안하고자 dexie.js라는 indexed DB의 wrapper 라이브러리가 등장한다.

🔎dexie.js를 왜 사용하는가? 코드 비교

id: ‘patric’ 이라는 데이터를 저장하는 기능을 dexie.js 와 indexed DB로 구현한 예제를 비교해보자.

dexie.js을 사용한 예제

// Dexie.js를 사용하여 데이터베이스를 생성합니다.
var db = new Dexie('myDatabase');

// 데이터베이스 스키마를 정의합니다.
db.version(1).stores({
    friends: '++id, name' // '++id'는 자동으로 증가하는 기본 키를 의미합니다.
});

// 'patric'이라는 데이터를 저장하는 함수를 정의합니다.
function addFriend() {
    db.friends.add({
        name: 'patric'
    }).then(function() {
        console.log('Successfully added patric to friends!');
    }).catch(function(error) {
        console.error('Error adding patric:', error);
    });
}

// 함수 호출
addFriend();

indexed DB을 사용한 예제

// IndexedDB 데이터베이스를 열기
var request = indexedDB.open('myDatabase', 1);

// 데이터베이스 버전 업그레이드 이벤트 처리
request.onupgradeneeded = function(event) {
    var db = event.target.result;

    // 객체 저장소 생성
    var objectStore = db.createObjectStore('friends', { keyPath: 'id', autoIncrement: true });

    // 인덱스 생성
    objectStore.createIndex('name', 'name', { unique: false });
};

// 데이터 추가 함수
function addFriend() {
    // 데이터베이스에 연결
    request.onsuccess = function(event) {
        var db = event.target.result;

        // 트랜잭션 시작
        var transaction = db.transaction(['friends'], 'readwrite');

        // 객체 저장소 열기
        var objectStore = transaction.objectStore('friends');

        // 'patric' 데이터 추가
        var request = objectStore.add({ name: 'patric' });

        // 요청 성공 및 실패 시 이벤트 처리
        request.onsuccess = function(event) {
            console.log('Successfully added patric to friends!');
        };

        request.onerror = function(event) {
            console.error('Error adding patric:', event.target.error);
        };
    };
}

// 함수 호출
addFriend();