JavaScript
IndexedDB

비고

IndexedDB 가용성 테스트

window.indexedDB 속성의 존재 여부를 검사하여 현재 환경에서 IndexedDB 지원을 테스트 할 수 있습니다.

if (window.indexedDB) {
    // IndexedDB is available
}

데이터베이스 열기

데이터베이스 열기는 비동기 작업입니다. 데이터베이스를 열어 이벤트 수신을 기다려야 준비가 완료됩니다.

우리는 DemoDB 데이터베이스를 열 것입니다. 아직 존재하지 않으면 요청을 보낼 때 생성됩니다.

2 아래는 우리가 우리의 데이터베이스의 버전 2를 요청하고 있다고 말한다. 언제든지 하나의 버전 만 존재하지만 버전 번호를 사용하여 이전 데이터를 업그레이드 할 수 있습니다.

var db = null, // We'll use this once we have our database
    request = window.indexedDB.open("DemoDB", 2);

// Listen for success. This will be called after onupgradeneeded runs, if it does at all
request.onsuccess = function() {
    db = request.result; // We have a database!

    doThingsWithDB(db);
};

// If our database didn't exist before, or it was an older version than what we requested,
// the `onupgradeneeded` event will be fired.
// 
// We can use this to setup a new database and upgrade an old one with new data stores
request.onupgradeneeded = function(event) {
    db = request.result;

    // If the oldVersion is less than 1, then the database didn't exist. Let's set it up
    if (event.oldVersion < 1) {
        // We'll create a new "things" store with `autoIncrement`ing keys
        var store = db.createObjectStore("things", { autoIncrement: true });
    }

    // In version 2 of our database, we added a new index by the name of each thing
    if (event.oldVersion < 2) {
        // Let's load the things store and create an index
        var store = request.transaction.objectStore("things");

        store.createIndex("by_name", "name");
    }
};

// Handle any errors
request.onerror = function() {
    console.error("Something went wrong when we tried to request the database!");
};

객체 추가하기

IndexedDB 데이터베이스의 데이터와 관련하여 발생해야하는 모든 작업은 트랜잭션에서 발생합니다. 이 페이지 하단의주의 사항 섹션에 언급 된 트랜잭션에 대해 알아야 할 몇 가지 사항이 있습니다.

데이터베이스 열기 에서 설정 한 데이터베이스를 사용 합니다.

// Create a new readwrite (since we want to change things) transaction for the things store
var transaction = db.transaction(["things"], "readwrite");

// Transactions use events, just like database open requests. Let's listen for success
transaction.oncomplete = function() {
    console.log("All done!");
};

// And make sure we handle errors
transaction.onerror = function() {
    console.log("Something went wrong with our transaction: ", transaction.error);
};

// Now that our event handlers are set up, let's get our things store and add some objects!
var store = transaction.objectStore("things");


// Transactions can do a few things at a time. Let's start with a simple insertion
var request = store.add({
    // "things" uses auto-incrementing keys, so we don't need one, but we can set it anyway
    key: "coffee_cup",
    name: "Coffee Cup",
    contents: ["coffee", "cream"]
});

// Let's listen so we can see if everything went well
request.onsuccess = function(event) {
    // Done! Here, `request.result` will be the object's key, "coffee_cup"
};


// We can also add a bunch of things from an array. We'll use auto-generated keys
var thingsToAdd = [{ name: "Example object" }, { value: "I don't have a name" }];

// Let's use more compact code this time and ignore the results of our insertions
thingsToAdd.forEach(e => store.add(e));

데이터 검색 중

IndexedDB 데이터베이스의 데이터와 관련하여 발생해야하는 모든 작업은 트랜잭션에서 발생합니다. 이 페이지 하단의주의 사항 섹션에 언급 된 트랜잭션에 대해 알아야 할 몇 가지 사항이 있습니다.

데이터베이스 열기에서 설정 한 데이터베이스를 사용합니다.

// Create a new transaction, we'll use the default "readonly" mode and the things store
var transaction = db.transaction(["things"]);

// Transactions use events, just like database open requests. Let's listen for success
transaction.oncomplete = function() {
    console.log("All done!");
};

// And make sure we handle errors
transaction.onerror = function() {
    console.log("Something went wrong with our transaction: ", transaction.error);
};

// Now that everything is set up, let's get our things store and load some objects!
var store = transaction.objectStore("things");


// We'll load the coffee_cup object we added in Adding objects
var request = store.get("coffee_cup");

// Let's listen so we can see if everything went well
request.onsuccess = function(event) {
    // All done, let's log our object to the console
    console.log(request.result);
};


// That was pretty long for a basic retrieval. If we just want to get just
// the one object and don't care about errors, we can shorten things a lot
db.transaction("things").objectStore("things")
    .get("coffee_cup").onsuccess = e => console.log(e.target.result);