Created
February 22, 2021 23:52
-
-
Save prof3ssorSt3v3/b71b340e74a40971af7a774515002dea to your computer and use it in GitHub Desktop.
IndexedDB part 2 - transactions and requests
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} | |
})(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* { | |
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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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