Quick Start Labels
https://vanillawebdev.blogspot.com/search/label/coding-tips
Coding Tips
4
https://vanillawebdev.blogspot.com/search/label/project-setup
Project Setup
6
https://vanillawebdev.blogspot.com/search/label/starter-code
Starter Code
6
Reading List
https://jackwhiting.co.uk/posts/lazy-loading-vanilla-js-with-webpack-laravel-mix
https://medium.com/free-code-camp/reducing-css-bundle-size-70-by-cutting-the-class-names-and-using-scope-isolation-625440de600b
Libraries
https://github.com/verlok/vanilla-lazyload
Developer Resources
https://webpack.js.org/configuration/output/
https://web.dev/articles/preload-critical-assets
Reading List
https://www.codemzy.com/blog/how-to-name-webpack-chunk
How to name a webpack chunk (including split and common chunks)
Reading List
Featured Post
https://vanillawebdev.blogspot.com/2024/02/installable-web-app.html
Make Your Web App Installable
February 16, 2025How to make your web app installable.
true
https://vanillawebdev.blogspot.com/search/label/homepage
homepage
https://vanillawebdev.blogspot.com/search/label/project-setup
project-setup
Featured Post
Sidebar Labels
https://vanillawebdev.blogspot.com/search/label/app-component
App Component
1
https://vanillawebdev.blogspot.com/search/label/coding-tips
Coding Tips
4
https://vanillawebdev.blogspot.com/search/label/css-tips
CSS Tips
4
https://vanillawebdev.blogspot.com/search/label/data-server
Data Server
2
https://vanillawebdev.blogspot.com/search/label/layout
Layout
1
https://vanillawebdev.blogspot.com/search/label/project-setup
Project Setup
6
https://vanillawebdev.blogspot.com/2025/03/localstorage-data-server.html
https://vanillawebdev.blogspot.com/2025/03/mapping-event-listeners.html
https://vanillawebdev.blogspot.com/
https://vanillawebdev.blogspot.com/2025/03/indexeddb-data-server.html
IndexedDB Data Server
March 04, 2025
2025
March
04
08:14 AM
Plain JavaScript starter code to build indexedDB data server.
Takeaway Code
Infrastructure Code
js/infrastructure/models/
Script tags:
<script src="https://cdn.jsdelivr.net/gh/tmpmachine/vanilla-framework@f52bc8d/js/infrastructure/models/idb-connection.js"></script>
<script src="https://cdn.jsdelivr.net/gh/tmpmachine/vanilla-framework@f52bc8d/js/infrastructure/models/idb-wrapper.js"></script>Application Code
Handle the database upgrade call.
js/application/indexed-db/onupgrade.js
function onUpgradeIDBEvt(event) {
let db = event.target.result;
let dbOldVersion = db.oldVersion ?? 0;
let storeNames = {
notes: 'notes',
};
if (dbOldVersion < 1) {
let storeName = storeNames.notes;
if (!db.objectStoreNames.contains(storeName)) {
db.createObjectStore(storeName, { keyPath: 'id' });
}
}
}Set up indexedDB connection and create a data server object with custom types.
js/application/servers.js
const dbName = 'app-v1-db';
const dbVersion = 1;
const dbConnection = new IdbConnection(dbName, dbVersion, onUpgradeIDBEvt);
// define store item types
/**
* @typedef {Object} Post
* @property {number} id
* @property {string} title
* @property {string} content
*/
// extend the IdbWrapper class with custom type
/** @extends IdbWrapper<Post> */
class PostsIdbStorage extends IdbWrapper {
constructor(dbConnection, storeName) {
super(dbConnection, storeName);
}
}
// pass in the idb connection and store name
let servPosts = new PostsIdbStorage(dbConnection, 'notes');Usage
Add or update an item:
await servPosts.Put_({
id: Date.now().toString(),
content: 'First note',
});Delete an item:
await servPosts.Delete_(id);Clear store data:
await servPosts.Clear_();
https://vanillawebdev.blogspot.com/search/label/%40lvc
@lvc
https://vanillawebdev.blogspot.com/search/label/data-server
Data Server
https://vanillawebdev.blogspot.com/search/label/homepage
homepage
https://vanillawebdev.blogspot.com/search/label/starter-code
Starter Code
https://vanillawebdev.blogspot.com/2025/03/localstorage-data-server.html
https://vanillawebdev.blogspot.com/2025/03/mapping-event-listeners.html
https://vanillawebdev.blogspot.com/