Getting Started with indexedDB

IndexedDB is a specification that allows you to store data in a browser. It is more structured than localStorage and uses and asynchronous API. In this tutorial we will cover what is needed to get started with indexedDB.
Would you like to help keep this channel going?
/ allthingsjavascript
For a complete list of all our tutorials:
www.allthingsjavascript.com/yo...
Access to EVERY course (get 2 months free): www.skillshare.com/r/profile/...
Courses offered on Udemy at a discount (access from my site): allthingsjavascript.com/course...
View Three Techniques for Avoiding Global Variables in JavaScript: • Three Techniques for A...
#javascript #AllThingsJavaScriptLLC

[@medienkonsument4]

Thank you so much for this easy to understand introduction to indexedDB. Both Google blogs and Mozilla documentation failed deeply to explain this in an easily understandable way!

[@DavidJohnson-hb6gh]

Excellent video! Well described. Simple. Straight forward. Nice balance of complexity and simplicity. Thanks!

[@jdcarter157]

quick and concise, much appreciated in the middle of my work shift!! had a few hiccups but none that completely roadblocked me

[@ali_mammadov]

Very clear and simple intro to IndexedDB! Thx

[@BrothasAbroad]

@All Things JavaScript This was an excellent and simplistic tutorial. Thanks for getting straight to the point and simple explanations. I gave a like. 😊

[@mage9264]

Precise and concise , great resource!

[@user-gv9gt1nu1x]

Clear and to the point. great job

[@chamumutezva539]

Thank you for this clear presentation, i have now understood what indexeddb is.

[@allthepussy]

Thanks a lot, it's like my fith time trying to understand indexedDB and it's the first video in which I did! You're awesome!

[@AllThingsJavaScript]

Great to hear!

[@philipjacobsen8337]

Nicely done --- thank you!

[@georgetomeh8898]

Thanks very much. Great tutorial

[@itsdannyftw]

Thanks Stephen!

[@cvaravind1]

Thanks alot Stephen !

[@sandeepbrk]

Thank you. Nice video. thanks for the practical example.

[@anishadhikari3690]

Thank you.
Perfect Explanation! :)

[@krosenk729]

So helpful! Thank you

[@hugonavakopp]

Great intro. Thank you for posting

[@mohammedal-mudhafar4602]

Thank you, Good material ! :)

[@laxitkumar4515]

Nice for beginners.. Thanks!

[@user-yn1pk3bz2r]

It was very helpful!

[@wadebanks8945]

Great video brother thanks

[@Hochmoa]

Thank you very much, that helped a lot. I had to set playback speed to 1.5 however :D

[@ggamezscr]

Thanks a lot!

[@visitkoushik]

Thank you!!

[@hayounglee5929]

Thank you so much for your video! It helped me so much!

[@AllThingsJavaScript]

Glad it helped!

[@seenuvasanv]

Helpful

[@cristiana-dev]

nice!

[@viniciusr.m.6680]

Great Video. I am new at JavaScript and this was really helpfull. I Have one Question tho. There is no problem setting the callbacks to the open request after the actual request was made?

[@AllThingsJavaScript]

Hi Vinicius, not sure I understand. Which callback are you referring to? Do you have a timestamp from the tutorial?

[@viniciusr.m.6680]

@@AllThingsJavaScript i am refering to the onerror, onsucess and onupgradeneeded that you set in request. You opened the database before setting the event callback, so could not a situation occur where the event occurs after the callback for this event has been set? the timestamp you set the callbacks are 7:53

[@AllThingsJavaScript]

@@viniciusr.m.6680 You are correct. Following good coding practices I should declare the handlers before opening the database.

[@manishchandra8931]

Hi, as per latest MDN docs - 'If the database doesn't already exist, it is created by the open operation, then an onupgradeneeded event is triggered and you create the database schema in the handler for this event. If the database does exist but you are specifying an upgraded version number, an onupgradeneeded event is triggered straight away, allowing you to provide an updated schema in its handler'(developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB) . This contradicts your statement @15:14

[@AllThingsJavaScript]

Thanks for adding to this! It is important to keep the information accurate and I appreciate everyone's help doing this.

[@MrMarkgyuro]

All Things Javascript, LLC
What is the event which you have specified as e in onerror, onsuccsess etc. anonymous functions parameter? : )
Another question, if i get this ERROR what should i do?
Uncaught DOMException: Failed to execute 'transaction' on 'IDBDatabase': One of the specified object stores was not found.
at IDBOpenDBRequest.request.onsuccess

[@AllThingsJavaScript]

It is an error object that is automatically sent when the event occurs. Does that help?

[@shivamkhurana452]

@@AllThingsJavaScript
can you please tell this also ? how to resolve it
Uncaught DOMEXception: Failed to execute 'transaction' on IndexedDb.js:
'IDBDatabase': One of the specified object stores was not found. at IDBOpenDBRequest.request.onsuccess

[@AllThingsJavaScript]

@@shivamkhurana452 It looks like the stored data was removed or you are trying to access the wrong data.

[@Njay-music]

if user deletes browsing history, is it gonna remove all the index db storage right?

[@AllThingsJavaScript]

Yes, it could depending on certain factors.

[@sandhunba]

@@AllThingsJavaScript what is the best option for creating phone gap app. i am currently using websql but that can be banned anytime.I can't find any gud alternative method.

[@AllThingsJavaScript]

@@sandhunba Not a lot of experience with phone gap

[@mehdiniroumand1770]

I dont underestand why you define two times the varieables db,store , index : line 9 and line 16?

[@mehdiniroumand1770]

and when you use them i dont khow wich one of them you are using

[@AllThingsJavaScript]

On line 9 we need to open the database. That is the first step. The act of opening a database returns a response and if it is successful it will return a reference to the database. So we grab the data, or a reference to the database in line 16. And that is the database that we work with. As to which I am using, notice that the db variable is global with the exception of the one in onupgradeneeded handler. That is local to the function. So anything done in there is not referencing the global db. All others reference the global db, so the same database.

[@sabrinaartist7269]

I know its a little late but whenever i try to get the data from the database and return it, it‘s undefined or simply empty. Can someone help me?

[@AllThingsJavaScript]

Post your code.

[@mohdfaiz4072]

Hi, I want my values to access in another domain. How do achieve that?

[@AllThingsJavaScript]

As far as I know indexDB cannot be used across domains.

[@mohdfaiz4072]

@@AllThingsJavaScript Can you suggest me some alternative with some example?

[@AllThingsJavaScript]

An alternative for cross domain? I think at that point you would want to use server side database.

[@MyFavouriteDinosaur]

@@mohdfaiz4072 try firebase db.

[@JorgeMendez-ik6pv]

OMG indexedDB is awful....

[@Cognitoman]

why ?

[@JorgeMendez-ik6pv]

Not a technical criteria... I just hate them

[@Cognitoman]

@@JorgeMendez-ik6pv Whats the alternative besides local storage? Would you say indexdb is faster?

[@JorgeMendez-ik6pv]

Well, I prefer SQLite.

[@Cognitoman]

Jorge Mendez they have them in browser?!