Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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();
};
}
@sreid70

This comment has been minimized.

Copy link

@sreid70 sreid70 commented Mar 5, 2016

Thanks, this was very helpful.

@jerrylau91

This comment has been minimized.

Copy link

@jerrylau91 jerrylau91 commented Aug 19, 2016

Thank you, time to get started with IndexedDB.

@erhanyasar

This comment has been minimized.

Copy link

@erhanyasar erhanyasar commented Aug 19, 2016

I don't have a thought implementing this to my db. I have uploaded the plugin and the rest codes to my .js hence no success yet.

@dfahlander

This comment has been minimized.

Copy link

@dfahlander 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.

@ghost

This comment has been minimized.

Copy link

@ghost 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

This comment has been minimized.

Copy link

@EdgardoCS EdgardoCS commented May 16, 2017

thxs a lot, easy and simple
Nice work

@diyfr

This comment has been minimized.

Copy link

@diyfr diyfr commented May 18, 2017

Nice !

@Clay-Ferguson

This comment has been minimized.

Copy link

@Clay-Ferguson Clay-Ferguson commented Jul 8, 2017

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

@emelent

This comment has been minimized.

Copy link

@emelent emelent commented Jul 14, 2017

Simple and straight to the point. Thanks.

@ghost

This comment has been minimized.

Copy link

@ghost ghost commented Jul 30, 2017

thank you very much

@FabianLauer

This comment has been minimized.

Copy link

@FabianLauer FabianLauer commented Aug 10, 2017

Thanks 👍

@ParkMinKyu

This comment has been minimized.

Copy link

@ParkMinKyu ParkMinKyu commented Oct 25, 2017

Thanks 👍

@duperweb

This comment has been minimized.

Copy link

@duperweb duperweb commented Nov 1, 2017

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

@shahzaibkhalid

This comment has been minimized.

Copy link

@shahzaibkhalid shahzaibkhalid commented Jan 30, 2018

It's a great demo.

@anuragl94

This comment has been minimized.

Copy link

@anuragl94 anuragl94 commented Feb 27, 2018

@Sparksss

This comment has been minimized.

Copy link

@Sparksss Sparksss commented Feb 28, 2018

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

@dustincjensen

This comment has been minimized.

Copy link

@dustincjensen dustincjensen commented Mar 10, 2018

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

This comment has been minimized.

Copy link

@nookeen nookeen commented Mar 29, 2018

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

@soljohnston777

This comment has been minimized.

Copy link

@soljohnston777 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

This comment has been minimized.

Copy link

@reikVdM reikVdM commented May 8, 2018

thanks for these awesome snippets .. :)

@confiscate

This comment has been minimized.

Copy link

@confiscate confiscate commented May 15, 2018

awesome snippet!

@mo-fouad

This comment has been minimized.

Copy link

@mo-fouad mo-fouad commented Jun 11, 2018

great one thanks :)

@moiseh

This comment has been minimized.

Copy link

@moiseh moiseh commented Jun 13, 2018

thanks very readable snippet

@Zakaria1986

This comment has been minimized.

Copy link

@Zakaria1986 Zakaria1986 commented Jun 26, 2018

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

@cooljl31

This comment has been minimized.

Copy link

@cooljl31 cooljl31 commented Jun 26, 2018

Thanks 👍

@tundeiness

This comment has been minimized.

Copy link

@tundeiness tundeiness commented Jul 11, 2018

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

This comment has been minimized.

Copy link

@thesparrow thesparrow commented Jul 11, 2018

Thank you!! :D

@speir-wang

This comment has been minimized.

Copy link

@speir-wang speir-wang commented Sep 5, 2018

Thanks✌️

@luxwarp

This comment has been minimized.

Copy link

@luxwarp luxwarp commented Jul 10, 2019

Amazing! Thnx! :D

@jvdi

This comment has been minimized.

Copy link

@jvdi jvdi commented Aug 27, 2021

Thank you very much

@alanmtk

This comment has been minimized.

Copy link

@alanmtk alanmtk commented Oct 7, 2021

Awesome :)

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