ezDB a simple way to use IndexedDB on pages for settings without loosing the head.

ezDB.js

function ezDB(name) {
	let request = indexedDB.open(name, 1);
	let db;
	let qu = [];
	const table = "MyObjectStore";

	request.onupgradeneeded = function (event) {
		let db = event.target.result;
		let objectStore = db.createObjectStore(table, { keyPath: "id" });
	};

	request.onsuccess = function (event) {
		db = event.target.result;
		qu.forEach(q => {
			switch (q.t) {
				case "s":
					set(q.k, q.d, q.cb);
					break;
				case "g":
					get(q.k, q.cb);
					break;
				case "d":
					del(q.k, q.cb);
					break;
			}
		});
		qu = [];
	};

	request.onerror = function (event) {
		console.error("Database error: " + event.target.errorCode);
	};

	function set(key, data, cb) {
		if (db) {
			let transaction = db.transaction([table], "readwrite");
			let objectStore = transaction.objectStore(table);
			objectStore.put({ id: key, data: data }).onsuccess = () => cb?.();
		} else {
			qu.push({ t: "s", k: key, d: data, cb: cb });
		}
	}

	function get(key, cb) {
		if (db) {
			let transaction = db.transaction([table], "readwrite");
			let objectStore = transaction.objectStore(table);
			var rq = objectStore.get(key);
			rq.onsuccess = (e) => { cb?.(rq.result?.data); }
		} else {
			qu.push({ t: "g", k: key, cb: cb });
		}
	}

	function del(key, cb) {
		if (db) {
			let transaction = db.transaction([table], "readwrite");
			let objectStore = transaction.objectStore(table);
			objectStore.delete(key).onsuccess = () => cb?.();
		} else {
			qu.push({ t: "d", k: key, cb: cb });
		}
	}

	return {
		set: set,
		get: get,
		del: del,
	};
};

var db = ezDB("sw");