DEV Community

Cover image for Project - 11: IndexedDB. Storing data in browsers
Kayode
Kayode

Posted on • Originally published at blog.zt4ff.dev

2 1

Project - 11: IndexedDB. Storing data in browsers

This is the eleventh project in the Beginner to Advanced Challenge (#beginner2advanced) where it’s expected to build a simple database app.

The database management system used for the mock project is IndexedDB, which is a database management system built into modern browsers.

This is the end product of the project built:

first-db-app.gif

What is IndexedDB

IndexedDB is a database built into modern browsers and it’s more powerful than LocalStorage.

The IndexedDB API is event-based and may be complex for simple use cases. There are many use wrappers you can use to simplify your experiences.

  • idb: A tiny library that mostly mirrors the IndexedDB API, but with small improvements that make a big difference to usability.
  • localForage: A Polyfill providing a simple name-value syntax for client-side data storage, which uses IndexedDB in the background, but falls back to WebSQL and then localStorage in browsers that don't support IndexedDB.
  • Dexie.js: A wrapper for IndexedDB that allows much faster code development via nice, simple syntax.

I made use of the event-based IndexedDB API without a wrapper and was finally able to understand the concept of version change and upgrading. This article proved helpful in understanding IndexedDB.

You can find the code I wrote here: https://github.com/zt4ff/app-ideas/tree/main/beginners/first-db-app which is a bit crude but I am open to your feedback and reviews. (Learn and help me learn).

You can support me by buying me a coffee.

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay