DEV Community

Cover image for Make websites work offline - Offline Storage. Making IndexedDB the Hero!

Make websites work offline - Offline Storage. Making IndexedDB the Hero!

Saurabh Daware ๐ŸŒป on February 12, 2020

Note: This article does not expect you to know anything from Part 1. Traditionally cookies were used for storing local data. But with HTML5 APIs, ...
Collapse
ย 
raymondcamden profile image
Raymond Camden โ€ข

"When you create a new database, the onupgradeneeded event will be triggered."
It will be fired when you create a new database, and when you change the version number of the database. Your example doesn't show that in the open call, but you can specify a version number and increment it to make schema changes.

Collapse
ย 
saurabhdaware profile image
Saurabh Daware ๐ŸŒป โ€ข

Yes it does fire when version is changed, I am not really sure what is exactly the usecase of the versions in IndexedDB?

I never really had to work on the versions and I wanted to keep the article "Getting started" rather than "Know everything" so I skipped the versioning to keep it simple and so that people can compare it with other database they've worked on.

Collapse
ย 
raymondcamden profile image
Raymond Camden โ€ข

You use versions to handle the case where you need to change the objectstore. Like maybe your business needs changed, etc. When I teach IDB, I stress that you should try your best to "get it right the first time" so you don't have to handle versioning changes.

Collapse
ย 
skhmt profile image
Mike ๐Ÿˆโ€โฌ› โ€ข

Just note, IndexedDB is very low level and wasn't really meant to be used directly by most developers.

Most people would be better off using something like Dexie.js or LocalForage (not a typo) as a wrapper over IndexedDB.

Collapse
ย 
raymondcamden profile image
Raymond Camden โ€ข

I disagree. While IDB is not a very easy to use API, it was absolutely meant to be used by developers. Libraries do make it simpler, but there's nothing wrong with developers using IDB w/o a library.

Collapse
ย 
saurabhdaware profile image
Saurabh Daware ๐ŸŒป โ€ข

It totally depends on what your team prefers. I use vanilla IndexedDB in one of my application where I wrote my own wrapper around IndexedDB functions and it does work pretty well for me.

Collapse
ย 
mahendrachoudhary profile image
Mahendra Choudhary โ€ข

Thanks @saurabh . I think I found solution for one of my problem I always kept coming across at work . My project need to work with API which return a array of more than 4k objects, for now i am using localStorage but i think indexDB could be a better alternative .Definetly going to look it forward .

But can you give clearity on few points likes does index db support on all major browser.

Collapse
ย 
raymondcamden profile image
Raymond Camden โ€ข

IDB would absolutely be a better use for storing a large amount of data. As you are storing an array in Local Storage, you have to serialize and deserialize the entire string in order to work with it. IDB doesn't require that.

As for support, it is VERY good: caniuse.com/#feat=indexeddb

Collapse
ย 
trancephorm profile image
pyc โ€ข

As far as I understand, this code runs in Node.js, and every time npm start command is issued, parcel compiles it for web browser, so IndexedDB API is available (it's pure web browser Javascript code, not Node.js environment). Now what bugs me is that in files supplied at Codesandbox, I haven't found any of the code displayed here in this tutorial. Where that code should be placed? This seem to be the only way that you can compile code for browser on the fly, every time it runs?

I'm n00b, I know the question may seem stupid but please enlighten me :)

Collapse
ย 
mx profile image
Maxime Moreau โ€ข

Hi, thank you for sharing.

IndexBD is for sure a very good thing, from my side I regret the API based on events/callbacks instead of Promises (yeah, we can use libs to do so).

Collapse
ย 
saurabhdaware profile image
Saurabh Daware ๐ŸŒป โ€ข

Yes those callbacks makes things complicated and the libraries do work pretty well. Alternatively you can even write your own wrappers for IndexedDB functions.

Thank you for reading the article Maxime๐ŸŒป