session, localStorage, cookie만 쓰다가 indexedDB를 써야할 때가 있어서 공부해 봤다.
chrome application에서 보던것만 보니 무심코 지나갔던것 같다.
WebSQL은 지원이 종료되었다고 하니 다른부분을 먼저 보는게 좋을것 같다.

개념

• 사용자의 브라우저 내부에 데이터를 지속적으로 저장하는 방법.
• 온라인과 오프라인에서 모두 작동이 가능
• file, blob등 대용량의 데이터를 저장할수 있음
• 해쉬테이블과 비슷하게 작동( SQL을 사용하지 않음 )
• SOP를 따름
• 시크릿모드에선 브라우저 종료후 데이터가 삭제된다.
• 비동기로 작동한다.
• addEventListener, removeEventListener, onsuccess, onerror, result, readyState, errorCode같은 properties이 존재

구현

• 비동기로 작동하기 때문에 async await를 사용하여 실제 사용하는 곳에서 동기적으로 작동시키기 위해 Promise를 생성함.

DB, store 생성

const DBname = 'TestDB';
const store = 'TestStore';

export const openIDB = async () => {
  return new Promise((resolve, reject) => {
    if (!window.indexedDB) {
      window.alert(
        "Your browser doesn't support a stable version of IndexedDB."
      );
      reject();
    }
	// 1로 설정을하여 onupgradeneeded 이벤트가 작동하게함.
    let request = window.indexedDB.open(DBname, 1);

    request.onupgradeneeded = function (event) {
      let idb = event.target.result;
      if (!idb.objectStoreNames.contains(store)) {
        //key를 주지 않으면 값을 추가할때 해당 key를 넘겨주지 않아도됨.
        //key가 필수이라면 autoingredient를 사용해도됨
        idb.createObjectStore(store);
      }
    };
    request.onsuccess = (e) => {
      resolve();
    };
    request.onerror = (e) => {
      reject("err open the DB", e);
    };
  });
};

수정, 추가

export const writeIDB = async (key, value) => {
  return new Promise(async (resolve, reject) => {
    const request = await window.indexedDB.open(DBname, 1);
    request.onsuccess = (e) => {
      const idb = e.target.result;
      const transaction = idb.transaction([store], "readwrite");
      const objectStore = transaction.objectStore(store);
      const addRequest = objectStore.add(value, key);
      addRequest.onsuccess = (e) => {
        resolve();
      };
      addRequest.onerror = (err) => {
        reject("add Data err", err);
      };
    };
    request.onerror = (err) => {
      reject("open DB err", err);
    };
  });
};

export const updateIDB = async (key, value) => {
  return new Promise(async (resolve, reject) => {
    const request = await window.indexedDB.open(DBname, 1);
    request.onsuccess = (e) => {
      const idb = e.target.result;
      const transaction = idb.transaction([store], "readwrite");
      const objectStore = transaction.objectStore(store);
      const addRequest = objectStore.put(value, key);
      addRequest.onsuccess = (e) => {
        resolve();
      };
      addRequest.onerror = (err) => {
        reject("update Data err", err);
      };
    };
    request.onerror = (err) => {
      reject("open DB err", err);
    };
  });
};

• write는 같은 key를 사용하는 값이 있으면 오류가 나므로 실제 사용시는 put을 써서 사용했음.(추가와 수정 둘다가능)

read

export const readIDB = async (key) => {
  return new Promise(async (resolve, reject) => {
    const request = await window.indexedDB.open(DBname, 1);
    request.onsuccess = (e) => {
      const idb = e.target.result;
      const transaction = idb.transaction([store], "readonly");
      const objectStore = transaction.objectStore(store);
      const data = objectStore.get(key); //getAll();
      data.onsuccess = (e) => {
        resolve(e.target.result);
      };
      data.onerror = (err) => {
        reject("read Err", err);
      };
    };
    request.onerror = (err) => {
      reject("open DB err", err);
    };
  });
};