브라우저에 이런 친구가 내장되어 있다는 걸 이제야 알았다

1. indexedDB란?

• indexedDB는 브라우저에 내장된 데이터 베이스입니다. 따라서, 일반적으로 사용되는 데이터베이스의 사용법과 거의 똑같은 접근이 가능합니다.

※ localStorage와의 비교

• indexedDB는 localStorage와 마찬가지로 데이터를 로컬에 저장할 수 있습니다.
• localStorage는 string만을 저장할 수 있는 데 반해 indexedDB는 키/값 쌍으로 원하는 데이터를 얼마든지 저장할 수 있습니다.
• localStorage는 10mb의 용량 제한이 있지만, indexedDB는 비교적 더 큰 데이터를 저장 할 수 있습니다.(아래 표 참고)

※ 브라우저별 indexedDB 사용 가능한 용량

• 크롬 : 사용자 디스크 용량의 60%
• 엣지 : 사용자 디스크 용량의 60%
• 파이어폭스 : 빈 디스크 용량의 50%
• 사파리 : 기본 1GB, 용량을 다 사용했을 시 200mb를 더 늘릴 것인지 팝업이 뜸

※ 영속성

• localStorage와 마찬가지로 브라우저를 닫거나 컴퓨터를 재부팅 해도 데이터가 사라지지 않습니다.
• 쿠키를 삭제하거나, 의도적으로 저장소를 삭제할 때만 데이터가 사라지게 됩니다.

2. 간단 구현 가이드

아래는 indexedDB의 단계 별 구현 가이드입니다.

1) 데이터베이스 열기

//indexedDB를 Open
let request = window.indexedDB.open("MyTestDatabase");

//db를 할당할 변수 선언
let db;

open 메소드로 indexedDB를 실행합니다.

2) 에러 처리

//에러 발생시 작동
request.onerror = function(event) {
  alert("Why didn't you allow my web app to use IndexedDB?!");
};

3) 스토어 및 인덱스 생성

//테스트 데이터
const customerData = [
  { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
  { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
];

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

  // DB에 저장소를 생성합니다.(테이블의 개념)
  let objectStore = db.createObjectStore("customers", { keyPath: "ssn" });
  
  // DB에 Index를 생성합니다.(조회 가능한 키, 컬럼의 개념)
  // unique여부를 지정할 수 있습니다
  objectStore.createIndex("name", "name", { unique: false });
  objectStore.createIndex("email", "email", { unique: true })
  ...
}

• onupgradeneeded는 새로운 데이터베이스가 생성되거나, DB의 버전이 변경되었을 때 작동합니다.
• indexedDB의 스토어는 db의 테이블의 역할을 합니다.
• indexedDB의 인덱스는 db의 컬럼의 역할을 합니다.
• keyPath는 일종의 Primary Key의 역할을 합니다.

4) 데이터 입력

//indexedDB의 버전이 변경되었을 때 실행됩니다.
request.onupgradeneeded = function(event) {
  ...
  // 위의 Transaction이 정상적으로 수행되었을 때 data를 seeding합니다
   objectStore.transaction.oncomplete = (event) => {
    let customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers");
    customerData.forEach((customer) => customerObjectStore.add(customer));
  };
};

• 위의 store와 index를 생성하는 transaction이 정상적으로 실행되었을 때(on complete) 데이터를 입력합니다.
• add 메소드로 데이터를 입력할 수 있습니다.

5) 데이터 조회/수정/삭제

① 조회하기

 request.onsuccess = (event) => {
    db = event.target.result;
    let objRequest = db.transaction(["customers"]).objectStore("customers").get("444-44-4444");
    
    //get이 성공해야 데이터를 조회할 수 있음
    objRequest.onsuccess = () => {
      console.log(objRequest.result)
    }
}

• request.onsuccess는 indexedDB.open이 성공했을 시 작동합니다.
• store를 store이름으로 불러온 후 get(keyPath)로 데이터를 불러옵니다
• get이 성공하면(onsuccess) 데이터를 조회할 수 있습니다

② 수정하기

 request.onsuccess = (event) => {
    db = event.target.result;
    let objStore = db.transaction(["customers"]).objectStore("customers");
    let objRequest = objStore.get("444-44-4444");
    db.age = 100;
    
    objRequest.onsuccess = (event) => {
      db = event.target.result;
      let requestUpdate = objectStore.put(data);
    }
}

• put 메소드로 업데이트 합니다.

③ 삭제하기

 request.onsuccess = (event) => {
    db = event.target.result
    let objRequest = db.transaction(["customers"]).objectStore("customers").delete("444-44-4444");
    
    ...
}

• delete 메소드로 삭제합니다

6) 저장소 전체 삭제

• clear() 메소드로 삭제 가능

const objectStore = transaction.objectStore("toDoList");
const objectStoreRequest = objectStore.clear();

objectStoreRequest.onsuccess = (event) => {
  note.innerHTML += '<li>Request successful.</li>';
};

테스트 결과

※ 참고링크
MDN