Some Experiences of IndexedBD

Tutorial recommendation

• HTML5 Local Storage - IndexedDB (1: Basic Use)
• html5 web IndexedDB usage details
• Front-end database: Introduction to IndexedDB
• MDN uses IndexedDB

Experience

Asynchronism of IDB

When you try to retrieve data from result and assign additional values, remember that IDB is an asynchronous asynchronous way of data interaction, and every time you process it, you have to do it in a receipt.
Error demonstration:

var transaction = db.transaction('myQuestionaire','readwrite');
var store = transaction.objectStore('myQuestionaire');
var IDB = store.get(that.requestInfo);

Demonstrate correctly:

var transaction = db.transaction('myQuestionaire','readwrite');
var store = transaction.objectStore('myQuestionaire');
var request = store.get(that.requestInfo);
request.onsuccess = function(){
    console.log(request.result)//Fully accessible and operational
}

Error reporting when trying to read data

Uncaught InvalidStateError: Failed to read the 'result' property from 'IDBRequest': The request has not finished

Reference text

At this time, you may not understand the various var statements in the various tutorials, so be sure to pay attention to the scope of the problem.

You need to learn about how to write asynchronous Javascript. Your db variable isn't defined at the time you access it.

Error demonstration:

var r = indexedDB.open();
var db = null;
r.onsuccess = function(event) { db = event.target.result); }

Demonstrate correctly:

var r = indexedDB.open();
r.onsuccess = function(event) {
  var db = event.target.result;
};

that means db isn't available outside the scope of the onsuccess function. Stop trying to use it outside its scope or you will just run into the problem you are experiencing.

Put Error Reporting

failed to execute 'put' on 'idbobjectstore' evaluating the object store's key path did not yield a value

Reference text

When storing data, you must store it with the key of the object store, or use a key generator({autoIncrement: true})
For example:

var store = db.createObjectStore('my_store', {keyPath: 'key'});
store.put({key: 11, value: 33}); // OK
store.put({value: 66}); // throws, since 'key' is not present

var store = db.createObjectStore('my_store', {keyPath: 'key', autoIncrement: true});
store.put({key: 11, value: 33}); // OK, key generator set to 11
store.put({value: 66}); // OK, will have auto-generated key 12

Error executing transaction

Uncaught InvalidStateError: Failed to execute 'transaction' on 'IDBDatabase': A version change transaction is running

Reference text

The versionchange transaction also allows you to readwrite. You just need to access the transaction created for you within the onupgradeneeded function.

function go() {
  var req = indexeddb.open(...);
  req.onupgradeneeded = function(event) {
    var db = event.target.result;
    var os = ...
    var transaction = event.target.transaction;// the important part
    var addRequest = transaction.objectStore('').index('').add('value');
    addRequest.onsuccess = function() {console.log('Success!');};
  };
}

You are encountering the error because you are trying to start a second transaction while the version change transaction is still running.

At this time, the knowledge point contacted is version change, which is placed in the IDB in the onupgradeneeded function of the receipt that opens the database. In view of the introduction of onunpgradeneeded, Baidu knows one answer, read it and understand it.

A pit I used to encounter when I was making a webapp

Refer to a previous article—— [Hours] Problems encountered in using indexed DB.