indexed db

indexed db의 장점

1. 많은 양의 구조화된 데이터를 클라이언트에 저장할 수 있다.
   • 브라우저마다 편차는 있지만, 보통 HDD 용량의 50% 이다.
     (Local Storage의 용량은 겨우 10MB이다.)
2. Javascript 기반의 객체지향 데이터베이스이다.
   • 즉, Javascript가 인식할 수 있는 자료형과 객체를 저장할 수 있다!
     (Local Storage는 String 형태만 저장할 수 있다.)
3. 트랜잭션을 사용하며 Key-Value 데이터베이스이다.
4. IndexedDB는 비동기 API이다.

비동기의 특징

• I/O 작업, 네트워크 통신, 데이터베이스 조회와 같은 시간이 소요되는 작업을 효율적으로 처리할 수 있습니다. 
   
• 다른 작업을 실행하면서 작업의 완료를 기다리지 않습니다. 
   
• 응답까지 걸리는 시간 동안 다른 작업이 가능합니다

 

먼저 IndexedDB를 사용하는 기본패턴

1. 데이터베이스를 실행
2. 객체 저장소(Object store)를 생성
3. 트랜잭션(Transaction)을 시작하고 데이터베이스 작업(데이터 읽기/추가 등)을 요청
4. DOM EventListner를 사용하여 요청이 완료대기 후 결과를 확인

 

1. IndexedDB 연결 및 데이터베이스 생성

const request = indexedDB.open('GuestBookDB', 1);

request.onupgradeneeded = (event) => {
    let db = event.target.result;
    if (!db.objectStoreNames.contains('messages')) {
        db.createObjectStore('messages', { keyPath: 'id' });
    }
};

 

 

• indexedDB.open('GuestBookDB', 1) 을 호출하여 데이터베이스를 엽니다.
• 데이터베이스가 처음 생성될 때, onupgradeneeded 이벤트를 통해 Object Store (테이블 역할) 를 만듭니다.

 

2. 방명록 데이터 저장 

const addMessage = (name, message) => {
    const transaction = db.transaction('messages', 'readwrite');
    const store = transaction.objectStore('messages');

    const newEntry = { id: Date.now(), name, message };
    store.add(newEntry);
};

 

• transaction을 생성하여 데이터를 읽기/쓰기 모드로 열고, store.add()를 사용해 데이터를 저장합니다.
• Date.now()를 이용해 고유한 ID를 생성합니다.

 

3. 방명록 데이터 불러오기

const loadMessages = () => {
    const transaction = db.transaction('messages', 'readonly');
    const store = transaction.objectStore('messages');
    const cursorRequest = store.openCursor();

    cursorRequest.onsuccess = (event) => {
        const cursor = event.target.result;
        if (cursor) {
            console.log(cursor.value.name, cursor.value.message);
            cursor.continue();
        }
    };
};

 

• openCursor()를 사용하여 저장된 데이터를 하나씩 가져옵니다.
• HTML 요소를 생성하여 화면에 동적으로 추가합니다.

 

4.방명록 데이터 수정

const editMessage = (id, newName, newMessage) => {
    const transaction = db.transaction('messages', 'readwrite');
    const store = transaction.objectStore('messages');

    store.get(id).onsuccess = (event) => {
        const data = event.target.result;
        if (data) {
            data.name = newName;
            data.message = newMessage;
            store.put(data);
        }
    };
};

• store.get(id)를 통해 기존 데이터를 가져온 후, 수정된 데이터를 다시 store.put()으로 저장합니다.
• 기존 데이터를 유지하면서 특정 필드만 변경할 수 있습니다.

5.방명록 데이터 삭제

const deleteMessage = (id) => {
    const transaction = db.transaction('messages', 'readwrite');
    const store = transaction.objectStore('messages');
    store.delete(id);
};

• 특정 id를 기준으로 데이터를 삭제합니다.
• store.delete(id)를 사용하여 해당 ID에 해당하는 데이터를 제거할 수 있습니다.