Javascript IndexedDB example encountering transaction and db variable not defined
Question
I'm learning javascript indexedDB and so, I followed an example from Javascript tutorial - https://www.javascripttutorial.net/web-apis/javascript-indexeddb/ .
I followed the example to understand how it works. Below are my codes.
<html>
<head>
<title>Indexed Database</title>
</head>
<body>
<script>
if (!window.indexedDB) {
console.log("Your browser doesn't support IndexedDB");
}
const request = indexedDB.open("indexedDatabase", 3);
request.onerror = (event) => {
console.error ("Database error: ${event.target.errorCode}");
};
request.onsuccess = (event) => {
console.log("success: " + request);
insertContact(db, {
email: 'john.doe@outlook.com',
firstName: 'John',
lastName: 'Doe'
});
insertContact(db, {
email: 'jane.doe@gmail.com',
firstName: 'Jane',
lastName: 'Doe'
});
};
// create the Contacts object store and indexes
request.onupgradeneeded = (event) => {
let db = event.target.result;
//create the Contacts object store
//with auto-increment id
let store = db.createObjectStore('Contacts', {
autoIncrement: true
});
//create an index on the email property
let index = store.createIndex('email', 'email', {
unique: true
});
};
function insertContact(db, contact) {
//create a new transaction
const txn = db.transaction('Contacts','readwrite');
}
//get the Contacts object store
const store = txn.objectStore('Contacts');
let query = store.put(contact);
//handle success case
query.onsuccess = function (event) {
console.log(event);
};
//handle the error case
query.onerror = function (event) {
console.log(event.target.errorCode);
}
//close the database once the transaction completes
txn.oncomplete = function () {
db.close();
};
</script>
</body>
</html>
However, I encountered the following 2 errors which I have spent a lot of time to understand why.
Uncaught ReferenceError: txn is not defined at indexedStorage.html:53:47
Uncaught ReferenceError: db is not defined at request.onsuccess (indexedStorage.html:18:47)
Any help would be much appreciated.
I am following the example from the Javascript tutorial and were expected to insert the two records into the indexedDB.
1 answers
solution1
0 2023-02-03 21:37:10
You have two problems:
You placed the
}ending the insertContact function too early. It needs to wrap the logic for inserting the contactYou close the database connection as soon as one transaction is done. This will make the second transaction fail - maybe not in this sample (because both transactions will be kicked off simultaneously) but it'll be a surprise if you ever do anything else with the code.
function insertContact(db, contact) { //create a new transaction const txn = db.transaction('Contacts','readwrite'); // Moved the } from here... //get the Contacts object store const store = txn.objectStore('Contacts'); let query = store.put(contact); //handle success case query.onsuccess = function (event) { console.log(event); }; //handle the error case query.onerror = function (event) { console.log(event.target.errorCode); } //close the database once the transaction completes txn.oncomplete = function () { // You probably don't want to do this: // db.close(); }; } //...to here
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.