indexedDB

• indexedDB: WebStorage 로 커버가 불가능한 복잡한 데이터 구조 또는 많은 데이터를 저장하고 관리해야 하는 경우에 사용하며 메일 클라이언트, 할 일 목록 등 작업에 유용
  • 특징
    • javascript 기반의 객체지향 데이터 베이스 즉, javascript 가 인식할 수 있는 자료형과 객체를 저장할 수 있다. (localStorage 는 String 형태만 저장 가능)
    • 트랜잭션을 사용하며 Key-Value 데이터 베이스이다.
    • 비동기 API 이다.
    • 색인을 사용하여 복잡한 쿼리를 가능하게 하여 검색 성능을 향상
    • 장기 데이터 저장, 브라우저 재 시작 및 시스템 충돌 방지 기능을 제공
  • 그 외
    • localStorage 에 비해 속도가 느림(Trade-Off)
    • 사용자가 수동으로 삭제하지 않는 이상 데이터가 계속 남아있음
  • 사용법
    • indexed DB 를 사용한 예제

      // IndexedDB 데이터베이스를 열기
      var request = indexedDB.open('myDatabase', 1);
      
      // 데이터베이스 버전 업그레이드 이벤트 처리
      request.onupgradeneeded = function(event) {
          var db = event.target.result;
      
          // 객체 저장소 생성
          var objectStore = db.createObjectStore('friends', { keyPath: 'id', autoIncrement: true });
      
          // 인덱스 생성
          objectStore.createIndex('name', 'name', { unique: false });
      };
      
      // 데이터 추가 함수
      function addFriend() {
          // 데이터베이스에 연결
          request.onsuccess = function(event) {
              var db = event.target.result;
      
              // 트랜잭션 시작
              var transaction = db.transaction(['friends'], 'readwrite');
      
              // 객체 저장소 열기
              var objectStore = transaction.objectStore('friends');
      
              // 'patric' 데이터 추가
              var request = objectStore.add({ name: 'patric' });
      
              // 요청 성공 및 실패 시 이벤트 처리
              request.onsuccess = function(event) {
                  console.log('Successfully added patric to friends!');
              };
      
              request.onerror = function(event) {
                  console.error('Error adding patric:', event.target.error);
              };
          };
      }
      
      // 함수 호출
      addFriend();      
      

    • dexie.js 를 사용한 예제 (indexed DB 의 Wrapper 라이브러리 -> 기존 indexed DB 의 코드 복잡성을 간소화 하기 위해 사용)

      // Dexie.js를 사용하여 데이터베이스를 생성합니다.
      var db = new Dexie('myDatabase');
      
      // 데이터베이스 스키마를 정의합니다.
      db.version(1).stores({
          friends: '++id, name' // '++id'는 자동으로 증가하는 기본 키를 의미합니다.
      });
      
      // 'patric'이라는 데이터를 저장하는 함수를 정의합니다.
      function addFriend() {
          db.friends.add({
              name: 'patric'
          }).then(function() {
              console.log('Successfully added patric to friends!');
          }).catch(function(error) {
              console.error('Error adding patric:', error);
          });
      }
      
      // 함수 호출
      addFriend();      
      

 

참고: https://jinnnkcoding.tistory.com/