IndexedDB 상세 정보

간단한 소개

IndexedDB는 브라우저에서 데이터를 저장하는 방식입니다.DB라고 부르는 것은 클라이언트의 조회 방식을 풍부하게 하고 로컬 저장소이기 때문에 네트워크가 페이지 데이터에 미치는 영향을 효과적으로 줄일 수 있기 때문이다.
IndexedDB가 있으면 브라우저는 더 많은 데이터를 저장할 수 있고 브라우저 측의 응용 유형을 풍부하게 할 수 있다.

IndexedDB 소개

IndexedDB는 전통적인 관계형 데이터와 달리 키-value형 데이터베이스입니다.
value는 복잡한 구조체의 대상이 될 수 있고 키는 대상의 일부 속성 값일 수도 있고 다른 대상일 수도 있다(이진법 대상 포함).검색을 가속화하기 위해 대상의 모든 속성을 index로 사용할 수 있습니다.
인덱스 DB는 자체로transaction을 가지고 있으며 모든 데이터베이스 작업은 특정한 업무에 연결되며, 이 업무는 자동으로 제출되며, 인덱스 DB는 수동으로 제출을 지원하지 않습니다.
IndexedDB API는 대부분 비동기적이며, 비동기적인 방법을 사용할 때, API는 검색할 데이터를 즉시 되돌려주지 않고 콜백을 되돌려줍니다.
비동기 API의 본질은 데이터베이스에 조작 요청을 보내는 것이다. 조작이 완료될 때 DOM 이벤트를 받는다. 이 이벤트를 통해 우리는 조작이 성공했는지 알고 조작의 결과를 얻을 수 있다.
IndexedDB는 NosQL 데이터베이스로서 관계형 데이터베이스와 달리 IndexedDB는 대상을 대상으로 하고 자바스크립트 대상을 저장한다.
IndexedDB의 또 다른 중요한 특징은 동원 정책이다. 모든 원본은 서로 다른 데이터베이스 집합에 연결되고 다른 원본의 데이터베이스에 접근할 수 없기 때문에 IndexedDB의 안전성을 확보한다.

IndexedDB 사용

이 절에서는 IndexedDB를 어떻게 사용하는지 구체적인 예로 설명할 것이다.

IndexedDB 브라우저 지원

서로 다른 브라우저는IndexedDB에 대해 서로 다른 실현을 가지고 있으며, 정상적으로 우리는 window를 사용할 수 있다.indexedDB는 브라우저의 indexedDB 대상을 가져옵니다.그러나 일부 브라우저에 대해서는 아직 표준적인 윈도우를 사용하지 않았다.indexedDB는 접두사가 있는 것으로 이루어집니다.
그래서 우리는 사용 과정에서 통상적으로 판단과 전환을 해야 한다.

// In the following line, you should include the prefixes of implementations you want to test.
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
// DON'T use "var indexedDB = ..." if you're not in a function.
// Moreover, you may need references to some window.IDB* objects:
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction || {READ_WRITE: "readwrite"}; // This line should only be needed if it is needed to support the object's constants for older browsers
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
// (Mozilla has never prefixed these objects, so we don't need window.mozIDB*)

위에서 우리는 window에서 indexedDB, IDBTransaction, IDBKeyRange 세 개의 대상을 얻었다.
여기서 indexedDB는 데이터베이스 연결을 나타냅니다.IDBTransaction은transaction을 나타내고 IDBKeyRange는 데이터베이스의 특정한 키 range에서 데이터를 꺼낸다.
그러나 일반적으로 접두사를 가진 실현은 불안정하기 때문에 우리는 공식적인 환경에서 사용하는 것을 권장하지 않기 때문에 표준 표현식이 지원되지 않으면 직접 오류를 보고해야 한다.

if (!window.indexedDB) {
    console.log("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.");
}

IndexedDB 만들기

IndexedDB를 사용하려면 먼저 open it가 필요합니다.

// Let us open our database
var request = window.indexedDB.open("MyTestDatabase", 3);

오픈 방법은 IDBopenDBRequest 대상을 되돌려줍니다. 이 동작은 비동기적인 동작입니다. 오픈 작업은 데이터베이스를 바로 열거나 업무를 시작하지 않습니다. 우리는 Request의 이벤트를 감청하여 해당하는 처리를 할 수 있습니다.
open 방법은 두 개의 매개 변수를 전송하는데 첫 번째 매개 변수는 데이터베이스 이름이고 두 번째 매개 변수는 데이터베이스 버전 번호이다.
새로운 데이터베이스를 만들거나 기존 데이터베이스 버전을 업그레이드할 때 온upgradeneeded 이벤트를 터치하고 이벤트에 IDBVersionChange Event를 전송합니다. 이벤트를 통해 할 수 있습니다.target.IDBDatabase 대상을 가져오고 이 대상을 통해 데이터베이스 버전 업그레이드 작업을 진행합니다.다음과 같습니다.

// This event is only implemented in recent browsers   
request.onupgradeneeded = function(event) { 
  // Save the IDBDatabase interface 
  var db = event.target.result;

  // Create an objectStore for this database
  var objectStore = db.createObjectStore("name", { keyPath: "myKey" });
};

주의, 이곳의 버전 번호는 정수입니다.플로트를 보내면 플로트를 정돈합니다.
리퀘스트가 있으면, 우리는 원러나 원서스 이벤트를 감청하여 상응하는 처리를 할 수 있다.

var db;
var request = indexedDB.open("MyTestDatabase");
request.onerror = function(event) {
  console.log("Why didn't you allow my web app to use IndexedDB?!");
};
request.onsuccess = function(event) {
  db = event.target.result;
};

db 대상을 받은 후 전역적으로 비정상 처리를 설정할 수 있습니다:

db.onerror = function(event) {
  // Generic error handler for all errors targeted at this database's
  // requests!
  console.error("Database error: " + event.target.errorCode);
};

IndexedDB의 테이블은 Object stores라고 하는데 관계형 데이터베이스에 있는 테이블과 마찬가지로 Object stores의 모든 대상은 하나의 키와 연결되며 키와 관련된 두 가지 개념인 키 path와 키 generator가 있다.
만약 자바스크립트 Object 대상이 저장된다면, 이 대상의 어떤 속성을 키 path로 지정할 수 있으며, 이 속성은 키로 지정됩니다.
키 path가 지정되어 있지 않으면 저장된 Object는 숫자나 String 같은 모든 대상일 수 있습니다.
키 generator는 키의 생성기다.
만약 우리가 이런 데이터를 저장하고 싶다면:

// This is what our customer data looks like.
const customerData = [
  { ssn: "444-44-4444", name: "Bill", age: 35, email: "[email protected]" },
  { ssn: "555-55-5555", name: "Donna", age: 32, email: "[email protected]" }
];

대응하는 데이터베이스 조작이 어떤 것인지 살펴보자.

const dbName = "the_name";

var request = indexedDB.open(dbName, 2);

request.onerror = function(event) {
  // Handle errors.
};
request.onupgradeneeded = function(event) {
  var db = event.target.result;

  // Create an objectStore to hold information about our customers. We're
  // going to use "ssn" as our key path because it's guaranteed to be
  // unique - or at least that's what I was told during the kickoff meeting.
  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });

  // Create an index to search customers by name. We may have duplicates
  // so we can't use a unique index.
  objectStore.createIndex("name", "name", { unique: false });

  // Create an index to search customers by email. We want to ensure that
  // no two customers have the same email, so use a unique index.
  objectStore.createIndex("email", "email", { unique: true });

  // Use transaction oncomplete to make sure the objectStore creation is 
  // finished before adding data into it.
  objectStore.transaction.oncomplete = function(event) {
    // Store values in the newly created objectStore.
    var customerObjectStore = db.transaction("customers", "readwrite").objectStore("customers");
    customerData.forEach(function(customer) {
      customerObjectStore.add(customer);
    });
  };
};

온upgradeneeded 이벤트에서 모든 schema와 관련된 작업을 처리해야 합니다.
우선db를 사용합니다.createObjectStore는customers의ObjectStore를 만들고 대상의 키 path를 키로 사용합니다.
키를 제외하고 검색 속도를 높이기 위해 두 개의 index를 만들었습니다.
마지막으로 우리는transaction을 감청한다.oncomplete 이벤트를 저장하고 object를 추가합니다.
위 코드에서 우리는 키Path를 키로 사용했다.
다음은 키 Generator를 사용한 예입니다.

 var objStore = db.createObjectStore("names", { autoIncrement : true });

indexdb의 CURD

indexedDB의 모든 동작은 업무에 필요합니다. 업무를 시작하는 동작을 보겠습니다.

var transaction = db.transaction(["customers"], "readwrite");

위의 예에서readwrite를 사용하여customers ObjectStore를 조작합니다.
transaction은 두 개의 매개 변수를 수신합니다. 첫 번째 매개 변수는 하나의 수조입니다. 수조는 이trans에서 처리할 ObjectStores이고 두 번째 매개 변수는 처리 모드입니다.
transaction이 생기면 우리는 업무의complete와error 조작을 감청할 수 있고dd 조작을 할 수 있다.

// Do something when all the data is added to the database.
transaction.oncomplete = function(event) {
  console.log("All done!");
};

transaction.onerror = function(event) {
  // Don't forget to handle errors!
};

var objectStore = transaction.objectStore("customers");
customerData.forEach(function(customer) {
  var request = objectStore.add(customer);
  request.onsuccess = function(event) {
    // event.target.result === customer.ssn;
  };
});

위의 예에서 우리는dd방법을 사용했다.dd의 전제는 데이터베이스에 같은 키의 대상이 존재하지 않는다는 것이다.dd 방법 이외에 우리는put 방법을 사용할 수 있다.put 방법은 주로 업데이트 작업에 사용된다.
삭제된 작업을 다시 보려면 다음과 같이 하십시오.

var request = db.transaction(["customers"], "readwrite")
                .objectStore("customers")
                .delete("444-44-4444");
request.onsuccess = function(event) {
  // It's gone!
};

현재 우리 데이터베이스에는 이미 데이터가 있으니 어떻게 조회하는지 봅시다.

var transaction = db.transaction(["customers"]);
var objectStore = transaction.objectStore("customers");
var request = objectStore.get("444-44-4444");
request.onerror = function(event) {
  // Handle errors!
};
request.onsuccess = function(event) {
  // Do something with the request.result!
  console.log("Name for SSN 444-44-4444 is " + request.result.name);

여기, 우리는db를 직접 사용했다.transaction, 기본적으로readonly 모드입니다.
다음은 업데이트의 예입니다.

var objectStore = db.transaction(["customers"], "readwrite").objectStore("customers");
var request = objectStore.get("444-44-4444");
request.onerror = function(event) {
  // Handle errors!
};
request.onsuccess = function(event) {
  // Get the old value that we want to update
  var data = event.target.result;
  
  // update the value(s) in the object that you want to change
  data.age = 42;

  // Put this updated object back into the database.
  var requestUpdate = objectStore.put(data);
   requestUpdate.onerror = function(event) {
     // Do something with the error
   };
   requestUpdate.onsuccess = function(event) {
     // Success - the data is updated!
   };
};

업데이트는 put 방법을 사용합니다.

커서cursor 사용하기

indexedDB는 커서 동작을 지원합니다. 우리는cursor를 사용하여 ObjectStore의 데이터를 훑어볼 수 있습니다.

var objectStore = db.transaction("customers").objectStore("customers");

objectStore.openCursor().onsuccess = function(event) {
  var cursor = event.target.result;
  if (cursor) {
    console.log("Name for SSN " + cursor.key + " is " + cursor.value.name);
    cursor.continue();
  }
  else {
    console.log("No more entries!");
  }
};

openCursor는 여러 개의 매개 변수를 받아들일 수 있습니다. 첫 번째 매개 변수는 키의 검색 범위를 받아들일 수 있고, 두 번째 매개 변수는 옮겨다니는 방향을 지정할 수 있습니다.만약 두 파라미터가 모두 비어 있다면, 기본값은 모든 데이터가 승차순으로 옮겨다니는 것입니다.
다음 커서를 훑어보려면cursor를 호출할 수 있습니다.continue.
두 매개변수의 커서 사용을 살펴보겠습니다.

// Only match "Donna"
var singleKeyRange = IDBKeyRange.only("Donna");

// Match anything past "Bill", including "Bill"
var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");

// Match anything past "Bill", but don't include "Bill"
var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);

// Match anything up to, but not including, "Donna"
var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);

// Match anything between "Bill" and "Donna", but not including "Donna"
var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);

// To use one of the key ranges, pass it in as the first argument of openCursor()/openKeyCursor()
index.openCursor(boundKeyRange, "prev").onsuccess = function(event) {
  var cursor = event.target.result;
  if (cursor) {
    // Do something with the matches.
    cursor.continue();
  }
};

OpenCursor 외에도 OpenKeyCursor를 사용하여 KeyCursor를 반복할 수 있습니다.

// Using a normal cursor to grab whole customer record objects
index.openCursor().onsuccess = function(event) {
  var cursor = event.target.result;
  if (cursor) {
    // cursor.key is a name, like "Bill", and cursor.value is the whole object.
    console.log("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
    cursor.continue();
  }
};

// Using a key cursor to grab customer record object keys
index.openKeyCursor().onsuccess = function(event) {
  var cursor = event.target.result;
  if (cursor) {
    // cursor.key is a name, like "Bill", and cursor.value is the SSN.
    // No way to directly get the rest of the stored object.
    console.log("Name: " + cursor.key + ", SSN: " + cursor.primaryKey);
    cursor.continue();
  }
};

이 밖에도 index를 통해 직접 검색할 수 있습니다.

var index = objectStore.index("name");

index.get("Donna").onsuccess = function(event) {
  console.log("Donna's SSN is " + event.target.result.ssn);
};

index를 사용하려면 리퀘스트가 필요합니다.onupgradeneeded에서 index를 만듭니다.
본문 저자:flydean 프로그램 그런 것들
본문 링크:http://www.flydean.com/indexeddb-kickoff/
본문 출처:flydean의 블로그
저의 공식 계정인'프로그램 그 일들'의 가장 통속적인 해석, 가장 깊은 제품, 가장 간결한 강좌, 당신이 모르는 많은 기교를 발견하세요!