Indexed DB 란??? [Chrome Extension을 개발하며]

크롬 익스텐션을 개발하며, 사용자의 데이터를 어떻게 관리하면 좋을지 고민하다가 Indexed DB에 대하여 공부하게 되었다.

 

Indexed DB는 LocalStorage보다 많은 용량의 데이터를 브라우저에 영구적으로 저장하는 방법이다.

또한

1. 컴퓨터 재부팅
2. 브라우저 종료 후 재실행
3. 인터넷 끊김

이런 경우에도 사용자가 브라우저 데이터/캐시를 직접 삭제하지 않는 이상 사용자 데이터를 장기 보관하기 매우 적합하며, JS에서 사용하는 객체 형식 그대로 저장할 수 있다.

 

사용방법

 

1. DB open 요청 및 Object Storage사용

const request = indexedDB.open("DatabaseName", version);

request.onerror = (event) => {
  console.error("Database error: ", event.target.error);
};

request.onsuccess = (event) => {
  const db = event.target.result;
  // DB 사용 가능
};

// DB 구조 정의 (최초 생성 또는 버전 업그레이드 시)
request.onupgradeneeded = (event) => {
  const db = event.target.result;
  const store = db.createObjectStore("StoreName", { keyPath: "id" });
  // 필요한 경우 인덱스 생성
  store.createIndex("nameIndex", "name");
};

 

2. 데이터 저장 -Transaction 메소드 사용

const transaction = db.transaction(["StoreName"], "readwrite");
const store = transaction.objectStore("StoreName");

const request = store.add({
  id: 1,
  name: "John",
  age: 30
});

request.onsuccess = () => {
  console.log("Data added successfully");
};

 

3. 데이터 조회

const transaction = db.transaction(["StoreName"], "readonly");
const store = transaction.objectStore("StoreName");

const request = store.get(1);  // ID로 조회

request.onsuccess = () => {
  console.log("Found:", request.result);
};

 

저장 용량도 디스크 여유공간의 50%까지 사용가능하여, 대용량 데이터를 저장 가능하다.

 

단점으로는

API구조가 복잡하고( 여러 단계의 중첩 콜백 필요 + 에러 처리 필요) 모바일 브라우저에서의 제한사항이 있을 수 있다.

 

Background scripts, Content scripts 등 다양한 컨텍스트에서 접근 가능하고,same-origin policy를 따르므로 (다른 확장 프로그램이 데이터를 읽거나 웹사이트가 확장 프로그램의 데이터를 탈취할 수 없음) 데이터를 안전하게 보호할 수 있으므로

크롬 익스텐션에서 사용할때 최적의 효율을 낸다고 생각한다.

 

해당 기능을 사용하여 제가 개발한 크롬 익스텐션 입니다. 자소서 작성할때 유용하게 사용해주세요 ☺️

https://chromewebstore.google.com/detail/resumate/pbecgppkgcfkmglgfoneimkfaaldhjgk?hl=ko