ストレージを学ぶ IndexedDBの作成、オブジェクトストア、オブジェクト

ハンズオンJavaScript
楽天ブックス
Yahoo!
au PAY マーケット

開発環境

ハンズオンJavaScript (あんどうやすし(著)、オライリー・ジャパン)の14章(ストレージを学ぶ)、14.5(練習問題)の14-4の解答を求めてみる。

入出力結果(Google Chrome、DevTools、Console)

let db;
undefined
let req = indexedDB.open('todoapp', 1);
undefined
req.onerror = e => console.log($`error: {e}`);
e => console.log($`error: {e}`)
req.onsuccess = e => db = e.target.result;
e => db = e.target.result
req.onupgradeneeded = e => {
    db = e.target.result;
    let objectStore = db.createObjectStore('todos', {keyPath: 'id', autoIncrement: true});
}
e => {
    db = e.target.result;
    let objectStore = db.createObjectStore('todos', {keyPath: 'id', autoIncrement: true});
}
req = indexedDB.open('todoapp', 2);
IDBOpenDBRequest {onblocked: null, onupgradeneeded: null, source: null, transaction: null, readyState: "pending", …}
req.onerror = e => console.log($`error: {e}`);
e => console.log($`error: {e}`)
req.onupgradeneeded = e => {
    db = e.target.result;
    let objectStore = db.createObjectStore('todos', {keyPath: 'id', autoIncrement: true});
    objectStore.transaction.oncomplete = e => {
        let transaction = db.transaction('todos', 'readwrite');
        let todos = transaction.objectStore('todos');
        todos.add({text: '前書きを書く', done: true});
        todos.add({text: '練習問題を作成する', done: false});
    }
}
e => {
    db = e.target.result;
    let objectStore = db.createObjectStore('todos', {keyPath: 'id', autoIncrement: true});
    objectStore.transaction.oncomplete = e => {
        let transaction = d…