indexedDB

• 클라이언트 측 데이터베이스이다
• 구조화된 데이터를 저장할 수 있게 해준다.
• 키-값 저장소로, 객체를 저장하고 검색하는 데 사용되는 키를 기반으로 데이터를 정렬한다.
• 비동기 API를 사용하여 메인 쓰레드를 차단하지 않는다.
• 각 도메인마다 별도의 indexedDB 인스턴스가 생성된다.

1.1 indexedDB 생성하기

	// indexedDB.open("Storage 이름", 버전)
  const dbRequest = indexedDB.open("Storage", 1);

// onupgradeneeded 는 indexedDB가 처음 생성되거나 버전이 바뀌면 실행됨
  dbRequest.onupgradeneeded = function (event) {
    const db = event.target.result;
    
    // createObjectStore는 products라는 이름의 스토어를 생성하고 Key로는 id가 사용됨
    const objStore = db.createObjectStore("products", { keyPath: "id" });
  };

• 위 코드만 입력하고 개발자도구의 어플리케이션 탭에 들어가면 아래처럼 indexedDB가 생성되어있음
  

1.2 데이터 넣기

  const dbRequest = indexedDB.open("Storage", 1);

// DB를 처음생성하거나 버전이 바뀔때 실행됨
  dbRequest.onupgradeneeded = function (event) {
    const db = event.target.result;
    const objStore = db.createObjectStore("products", { keyPath: "id" });

// DB 생성이 완료되면 데이터를 추가함
    objStore.transaction.oncomplete = function (event) {
      const productsStore = db
        .transaction("products", "readwrite")
        .objectStore("products");
      productsStore.add({
        id: "p1",
        title: "홍길동",
        age: "20",
        job: ["가수", "학생", "개발자"],
      });
    };
  };

1.3 에러 처리는?

  const dbRequest = indexedDB.open("Storage", 1);

  dbRequest.onupgradeneeded = function (event) {
    const db = event.target.result;
    const objStore = db.createObjectStore("products", { keyPath: "id" });

    objStore.transaction.oncomplete = function (event) {
      const productsStore = db
        .transaction("products", "readwrite")
        .objectStore("products");
      productsStore.add({
        id: "p1",
        title: "홍길동",
        age: "20",
        job: ["가수", "학생", "개발자"],
      });
    };
  };

'onerror로 에러를 처리 할 수있음'
  dbRequest.onerror = function(event){
    console.log("에러 발생!")
  }

1.4 클릭으로 데이터 넣고 가져오기

  const addBtn = document.querySelector('.addBtn');
  const getBtn = document.querySelector('.getBtn');

  const dbRequest = indexedDB.open("Storage", 1);

  let db;

  dbRequest.onupgradeneeded = function (event) {
    db = event.target.result;
    const objStore = db.createObjectStore("products", { keyPath: "id" });

    // DB가 처음으로 생성되는게 완료되면 데이터가 들어감
    objStore.transaction.oncomplete = function (event) {
      const productsStore = db
        .transaction("products", "readwrite")
        .objectStore("products");
      productsStore.add({
        id: "p1",
        title: "홍길동",
        age: "20",
        job: ["가수", "학생", "개발자"],
      });
    };
  };

  dbRequest.onsuccess = function (event) {
    db = event.target.result;
  };

  dbRequest.onerror = function (event) {
    console.log("에러 발생!");
  };

// 해당 이벤트가 발생하면 데이터가 들어감
  const addData = () => {
    if (!db) return;
    const productsStore = db
      .transaction("products", "readwrite") // readwrite외에 readonly도 있음
      .objectStore("products");
    productsStore.add({
      id: "p2",
      title: "김길동",
      age: "25",
      job: ["가수", "개발자"],
    });
  };

  const getData = () => {
    if (!db) return;
    const productsStore = db
      .transaction("products", "readwrite")
      .objectStore("products");

    const request = productsStore.get("p2"); // 찾고자 하는 데이터의 키값

    request.onsuccess = function () {
      console.log(request.result);
    };
  };

  addBtn.addEventListener('click', addData) // 클릭시 데이터 추가
  getBtn.addEventListener('click', getData) // 클릭시 데이터 출력

addBtn 클릭시 데이터가 추가됨

getBtn 클릭시 콘솔에 데이터를 가져옴