JSFiddle - React, Tailwind, and code Playground
HTML
<button id=string disabled>Store String</button>
<button id=uint8array disabled>Store Uint8Array</button>
<button id=arraybuffer disabled>Store ArrayBuffer</button>
JavaScript
var indexedDB = window.indexedDB;
var schema = {"stuff-with-keypath": {keyPath: "path"}}
var version = 2;
var openDbReq = indexedDB.open("store-stuff-in-indexeddb", version);
openDbReq.onupgradeneeded = function(e) {
var openDbRequest = e.target;
// VERSION_CHANGE transaction
var transaction = openDbRequest.transaction;
var database = transaction.db;
for (var objectStoreName in schema) {
if (-1 === Array.prototype.indexOf.call(database.objectStoreNames, objectStoreName)) {
var objectStoreParameters = schema[objectStoreName];
database.createObjectStore(objectStoreName, objectStoreParameters);
} else {
// TODO: update an existing object store
}
}
transaction.onsuccess = onUpgradeSuccess;
};
openDbReq.onsuccess = function(e) {
//IDBDatabasa, a.k.a. connection
var database = e.target.result;
console.log("open onsuccess");
if (database.version != version) {
// 20110419 draft
// Note that version was a string in 20110419 draft but is a long now.
// Thus, we used != instead of !==.
console.log("Setting version using 20110419 IndexedDB draft");
var versionChangeReq = database.setVersion(version);
versionChangeReq.onsuccess = function(e) {
openDbReq.onupgradeneeded(e);
onUpgradeSuccess(e);
}
} else {
onDbReady(database);
}
};
function onUpgradeSuccess(e) {
var request = e.target;
var finishedTransaction = request.transaction;
var database = finishedTransaction.db;
onDbReady(database);
}
window.database = null;
function onDbReady(database) {
window.database = database;
console.log("Database ready.");
["string", "uint8array", "arraybuffer"].forEach(function(x) {
document.getElementById(x).disabled = false;
});
}
document.getElementById("string").onclick = function() {
console.log("Storing string.");
var obj = {path: "record...