Skip to content

Instantly share code, notes, and snippets.

@prof3ssorSt3v3

prof3ssorSt3v3/app.js

Created February 22, 2021 23:52
Show Gist options
  • Save prof3ssorSt3v3/b71b340e74a40971af7a774515002dea to your computer and use it in GitHub Desktop.
Save prof3ssorSt3v3/b71b340e74a40971af7a774515002dea to your computer and use it in GitHub Desktop.
Download ZIP
IndexedDB part 2 - transactions and requests
Raw
app.js
import { uid } from './uid.js';
console.log(uid());
//nothing else to import because we are using the built in methods
//https://developer.mozilla.org/en-US/docs/Web/API/IDBDatabase
const IDB = (function init() {
let db = null;
let objectStore = null;
let DBOpenReq = indexedDB.open('WhiskeyDB', 6);
DBOpenReq.addEventListener('error', (err) => {
//Error occurred while trying to open DB
console.warn(err);
});
DBOpenReq.addEventListener('success', (ev) => {
//DB has been opened... after upgradeneeded
db = ev.target.result;
console.log('success', db);
});
DBOpenReq.addEventListener('upgradeneeded', (ev) => {
//first time opening this DB
//OR a new version was passed into open()
db = ev.target.result;
let oldVersion = ev.oldVersion;
let newVersion = ev.newVersion || db.version;
console.log('DB updated from version', oldVersion, 'to', newVersion);
console.log('upgrade', db);
if (!db.objectStoreNames.contains('whiskeyStore')) {
objectStore = db.createObjectStore('whiskeyStore', {
keyPath: 'id',
});
}
});
document.whiskeyForm.addEventListener('submit', (ev) => {
ev.preventDefault();
//one of the form buttons was clicked
let name = document.getElementById('name').value.trim();
let country = document.getElementById('country').value.trim();
let age = parseInt(document.getElementById('age').value);
let owned = document.getElementById('isOwned').checked;
let whiskey = {
id: uid(),
name,
country,
age,
owned,
};
let tx = makeTX('whiskeyStore', 'readwrite');
tx.oncomplete = (ev) => {
console.log(ev);
//buildList()
};
let store = tx.objectStore('whiskeyStore');
let request = store.add(whiskey);
request.onsuccess = (ev) => {
console.log('successfully added an object');
};
request.onerror = (err) => {
console.log('error in request to add');
};
});
function makeTX(storeName, mode) {
let tx = db.transaction(storeName, mode);
tx.onerror = (err) => {
console.warn(err);
};
return tx;
}
})();
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Simple IndexedDB</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<header>
<h1>IndexedDB</h1>
<h2>Using Vanilla JS</h2>
</header>
<main>
<p>This example is using plain vanilla JS and core indexedDB methods.</p>
<p>
If you are familiar with document databases like MongoDB, you can think
of an ObjectStore as a collection.
</p>
<p>The Core Object and Interfaces are:</p>
<ul>
<li>
<code>window.indexedDB</code> The database object holds Object Stores.
</li>
<li>
<code>IDBObjectStore</code> An Object Store inside a database. (A
Collection of objects)
</li>
<li>
<code>IDBRequest</code> A request object for add, put, delete, etc.
</li>
<li><code>IDBTransaction</code> A wrapper around requests.</li>
<li><code>IDBIndex</code> An index added to an Object Store</li>
<li>
<code>IDBCursor</code> To track current position inside the results of
a request.
</li>
<li><code>IDBKeyRange</code> A range of values for matching a key.</li>
</ul>
<form name="whiskeyForm">
<fieldset>
<p>
<label for="name">Whiskey: </label>
<input type="text" id="name" placeholder="Whiskey Name" required />
</p>
<p>
<label for="country">Country of Origin: </label>
<input type="text" id="country" value="" required />
</p>
<p>
<label for="age">Years Old: </label>
<input
type="text"
inputmode="numeric"
pattern="[\d]+"
id="age"
required
/>
</p>
<p>
<label for="isOwned">Owned: </label>
<input type="checkbox" id="isOwned" value="yes" />
</p>
<p>
<button id="btnAdd">Add Whiskey</button>
<button id="btnUpdate">Update Whiskey</button>
<button id="btnDelete">Delete Whiskey</button>
<button id="btnClear">Reset Form</button>
</p>
</fieldset>
</form>
<section>
<h3>List of Whiskeys</h3>
<ul class="wList">
<!-- build list here -->
</ul>
</section>
</main>
<script type="module" src="app.js"></script>
</body>
</html>
Raw
main.css
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
font-weight: 300;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
line-height: 1.5;
color: #eee;
background-color: #333;
}
body {
background-color: #333;
min-height: 100vh;
}
header,
main {
padding: 1rem 2rem;
}
h1 {
color: orange;
font-size: 3.6rem;
font-weight: 700;
}
h2 {
color: orangered;
font-size: 2.4rem;
font-weight: 700;
}
p {
font-size: 1.2rem;
font-weight: 300;
margin: 1rem 0;
}
li {
list-style-position: inside;
margin-left: 2rem;
font-size: 1.2rem;
font-weight: 500;
}
form {
padding: 1rem 1rem;
}
fieldset {
padding: 1rem;
}
form p {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
margin: 1rem 0;
}
label {
font-size: 1rem;
}
input[type='text'] {
padding: 0.2rem 1rem;
font-size: 1rem;
line-height: 1.5;
width: 30ch;
}
input[type='checkbox'] {
font-size: 1rem;
line-height: 1.5;
height: 1.5rem;
width: 1.5rem;
}
button {
padding: 0.2rem 2rem;
margin: 1rem 0;
font-size: 1.2rem;
border: none;
color: white;
background-color: cornflowerblue;
}
.highlighted {
color: #333;
background-color: gold;
}
Raw
uid.js
export const uid = () => {
let timmy = Date.now().toString(36).toLocaleUpperCase();
let randy = parseInt(Math.random() * Number.MAX_SAFE_INTEGER);
randy = randy.toString(36).slice(0, 12).padStart(12, '0').toLocaleUpperCase();
return ''.concat(timmy, '-', randy);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment