IndexedDB Code Cheat Sheet

Image for post
Image for post

TLDR; link below has code needed for the common IndexedDB functions.

My next web app doesn’t need an external database- I only need a local solution. I need something more powerful than Local Storage and brief research showed that Web SQL will no longer be supported.

I decided to use IndexedDB. While there’s plenty of tutorials and articles out there, I couldn’t find a single solution that demonstrated all of the functionality I would need:

I still wanted to have a single consolidated template for all IndexedDB functionality. I created that, and am sharing it now.

Similar to a relational database, I created two tables (known as “objects”). I modified my code sample to be more generic, so I renamed these objects as “Shows” (as in television shows) and “People” (as in the characters).

For this code sample, the data is hard-coded within each function: as if it were extracted from an HTML form element (for example, by the “id”). For my actual application, I’ll be passing data into the functions — but the principle is the same.

To see it in action: upon clicking a button, the results of each database operation (“transaction”) appears in the browser’s Developer Console.

I’m using Google Chrome. Open the Developer Console (keyboard shortcut on Windows is F12). In the Application tab, you’ll see a spot for “IndexedDB”. If needed, delete/refresh the specific database. Note, changes made in this view are not visible real-time and you’ll need to refresh to see said changes. Viewing the results in the Console is therefore much more convenient.

View the demo here: . Be sure to have your browser Developer Console open.

View the code by looking at the Page Source in the link above, or you can see it here:

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store