Skip to content

Instantly share code, notes, and snippets.

@JamesMessinger
Last active August 20, 2024 11:27
Show Gist options
  • Save JamesMessinger/a0d6389a5d0e3a24814b to your computer and use it in GitHub Desktop.
Save JamesMessinger/a0d6389a5d0e3a24814b to your computer and use it in GitHub Desktop.
Very Simple IndexedDB Example
// This works on all devices/browsers, and uses IndexedDBShim as a final fallback
var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB || window.shimIndexedDB;
// Open (or create) the database
var open = indexedDB.open("MyDatabase", 1);
// Create the schema
open.onupgradeneeded = function() {
var db = open.result;
var store = db.createObjectStore("MyObjectStore", {keyPath: "id"});
var index = store.createIndex("NameIndex", ["name.last", "name.first"]);
};
open.onsuccess = function() {
// Start a new transaction
var db = open.result;
var tx = db.transaction("MyObjectStore", "readwrite");
var store = tx.objectStore("MyObjectStore");
var index = store.index("NameIndex");
// Add some data
store.put({id: 12345, name: {first: "John", last: "Doe"}, age: 42});
store.put({id: 67890, name: {first: "Bob", last: "Smith"}, age: 35});
// Query the data
var getJohn = store.get(12345);
var getBob = index.get(["Smith", "Bob"]);
getJohn.onsuccess = function() {
console.log(getJohn.result.name.first); // => "John"
};
getBob.onsuccess = function() {
console.log(getBob.result.name.first); // => "Bob"
};
// Close the db when the transaction is done
tx.oncomplete = function() {
db.close();
};
}
@dfahlander
Copy link

dfahlander commented Aug 22, 2016

Nice and concise example, but for others reading this, I would not recommend coding against the raw indexedDB API unless you really have to. Search for a decent wrapper library instead. Just too many pitfalls to end up in. For example, the above snippet is missing error handlers, which is okay for a demo snippet like this, but not for production code.

Performance is also a reason to use a wrapper library like dexie that can do multiple operations in a single transaction without sacrificing code readability and error handling.

Google for indexedDB wrapper libraries or similar and try finding one that is simple or advanced enough for your particular use case.

You'll probably find that these three libs stand out:

  • Dexie - promise based fluent-style indexedDB wrapper with transaction support.
  • localforage - simplest one - a key/value api similary to localStorage
  • pouchdb - offline storage that syncs with a couchDB compatible backend.

David Fahlander, author of Dexie.

Copy link

ghost commented May 9, 2017

Thankyou,
A beautiful implementation of indexedDB.
This is very helpful in making offline first web application.
May you please suggest some techniques to store static files like style/css file to indexed db?

@EdgardoCS
Copy link

thxs a lot, easy and simple
Nice work

@diyfr
Copy link

diyfr commented May 18, 2017

Nice !

@Clay-Ferguson
Copy link

Excellent example of exactly what people need to get started! thanks!

@emelent
Copy link

emelent commented Jul 14, 2017

Simple and straight to the point. Thanks.

Copy link

ghost commented Jul 30, 2017

thank you very much

@FabianLauer
Copy link

Thanks 👍

@ParkMinKyu
Copy link

Thanks 👍

@duperweb
Copy link

duperweb commented Nov 1, 2017

GREAT JOB BUDDY, WHAT dfahlander SAID, ITS TRUE, BUT IT' S A GREAT DEMO

@shahzaibkhalid
Copy link

It's a great demo.

@anuragl94
Copy link

@Sparksss
Copy link

thanks for Simply example, this will help me in understanding the interaction with the database!

@dustincjensen
Copy link

I am currently writing some IndexedDB code and it occurred to me I have no idea how registering the onsuccess AFTER calling the store.get() works. Is there a delay before firing the on success event? Isn't this a race condition?

@nookeen
Copy link

nookeen commented Mar 29, 2018

Finally, 1 small page with explanation how to work it properly.

@soljohnston777
Copy link

soljohnston777 commented Apr 15, 2018

This was the best and most easy to read code and tutorial I could find. The only thing I am trying to figure out is now is trying to update a row?

@reikVdM
Copy link

reikVdM commented May 8, 2018

thanks for these awesome snippets .. :)

@confiscate
Copy link

awesome snippet!

@mo-fouad
Copy link

great one thanks :)

@moiseh
Copy link

moiseh commented Jun 13, 2018

thanks very readable snippet

@Zakaria1986
Copy link

Oh! this was supper easy to understand. Thank you!

@cooljl31
Copy link

Thanks 👍

@tundeiness
Copy link

hi I have a small challenge. can you please explain how to apply this to a situation where you are fetching data from an API? I mean the "add some data" part.

@thesparrow
Copy link

Thank you!! :D

@speir-wang
Copy link

Thanks✌️

@luxwarp
Copy link

luxwarp commented Jul 10, 2019

Amazing! Thnx! :D

@jvdi
Copy link

jvdi commented Aug 27, 2021

Thank you very much

@alanmtk
Copy link

alanmtk commented Oct 7, 2021

Awesome :)

@vladimir-kovalenko
Copy link

vladimir-kovalenko commented Jul 11, 2022

I have a comment, which is more of a question. You execute four operations against the store (two writes and two reads). The database is closed when the transaction is completed. From what I there is a high risk that the database will be closed before one of the operations is actually completed. Am I right or am I missing something?

@vslipchenko
Copy link

I have a comment, which is more of a question. You execute four operations against the store (two writes and two reads). The database is closed when the transaction is completed. From what I there is a high risk that the database will be closed before one of the operations is actually completed. Am I right or am I missing something?

This one could answer your question:
https://stackoverflow.com/questions/34915581/indexeddb-when-to-close-a-connection

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment