JSFiddle - React, Tailwind, and code Playground
HTML
<div id="page-wrapper">
<ul id="resultMessage"></ul>
<hr>
<ul id="log-items"></ul>
</div>
CSS
body {
font-family: verdena, sans-serif;
background-color: whitesmoke;
}
ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
#resultMessage, #log-items {
white-space:pre-wrap;
}
JavaScript
var logUL = document.getElementById("log-items");
var resultMessage = document.getElementById("resultMessage");
function Log(txt) {
var li = document.createElement('li');
li.appendChild(document.createTextNode(txt));
logUL.appendChild(li);
}
function LogResult(txt) {
var li = document.createElement('li');
li.appendChild(document.createTextNode(txt));
resultMessage.appendChild(li);
}
var request = window.indexedDB.open("C01TestDatabase", 2);
Log('open"C01TestDatabase" done');
request.onerror = function (event) {
console.log("onerror");
Log("request.onerror");
};
request.onsuccess = function (event) {
Log('Enter "request.onsuccess"');
var db = event.target.result;
var transaction = db.transaction(['customers'], 'readonly');
var store = transaction.objectStore('customers');
var index = store.index("name_age");
LogResult('Start search for persons named Bill of age 32:');
// var cursorRequest = index.openCursor(['Bill', 32]);
var range = IDBKeyRange.only(['Bill',32]);
var cursorRequest = index.openCursor(range);
cursorRequest.onsuccess = function (event) {
var cursor = event.target.result;
if (cursor) {
LogResult(" Name for SSN " + cursor.value.ssn + " is " + cursor.value.name + " Age: " + cursor.value.age);
cursor.continue();
} else {
LogResult(" -- No more entries --");
}
};
};
request.onupgradeneeded = function (event) {
Log('Enter "request.onupgradeneeded"');
var db = event.target.result;
if (db.objectStoreNames.contains('customers')) {
db.deleteObjectStore('customers');
}
var objectStore = db.createObjectStore("customers", {
keyPath: "ssn"
});
objectStore.createIndex("name", "name", {
unique: false
});
objectStore.createIndex("email", "email", {
unique: true
});
objectStore.createIndex("name_email", ["name", "email"], {
unique:...