How to use IndexedDB to store data for your web application in the browser

This video will give you an introduction to what IndexedDB is, why you might choose it for your project, and how to use it.
We'll cover some basic database concepts & terminology as well in case you haven't used other databases before.
This video is based on the content from my blog post here:
dev.to/alexeagleson/how-to-us...

[@ricksegalCanada]

Two years on and this is still an amazing video to jumpstart my indexeddb journey. Thanks for doing this. As others have said, your teaching style is outstanding.

[@lidestudios5094]

I found out about indexDB only an hour ago and I already feel like I understand everything I need to use it thanks to your video! 👍 I'm very grateful to have discovered this! It's way better than using local storage for saving long base64 file data, thanks!

[@jeff-creations]

Your teaching style is amazing Alex. I love the way that you explain terminology and don't assume we know things straight out of the gate. IndexedDB is much clearer to me now - and for that I thank you! I really wish you had a beginners video on React, would have taught me a ton I'm sure.

[@noymorgenshtein9191]

Perfect explanation of indexes. Perfect explanation of transactions. Thank you for that crystal-clear beginner's walkthrough, helped a ton with these intimidating terms for a newbie like me!

[@AlexEagleson]

Glad to hear it was helpful!

[@suhail_developer]

A patient, detailed and perfectly explained walkthrough. You deserve much more views mate. Thank you for teaching us once again. I hope you continue to do so.

[@edwinbalcarcel8022]

I'm speak Spanish but i can see that the English content, especially in the dev world is much better than Spanish content. I love this video, i was lost like 3 hours trying understand the concept of this and this guy make the explication super easy. Thank you so much bro!! (I'm not an English speaker hahaha)

[@AlexEagleson]

Glad it helped you!

[@kevincattin2469]

Thank you, I searched exactly for someone who has good knowledge for IndexedDB. I found it right here. :)

[@longtimedeveloper6498]

Outstanding coverage of IndexDB. Wow, you are a great instructor and teacher. Thank you!

[@abinjohn3642]

I was finally able to figure out IndexedDB after this video. Thanks a ton!

[@agun21st]

Thank you so much. till now I was unknown about Indexed DB. Your tutorial is awesome!

[@shabaniddrisu]

Very helpful video man. Thank you 😊.

[@GilgaFrank]

Just about the best intro to IndexedDB I've seen, thanks a lot for this

[@ManontheOutside]

Thanks Alex - brilliant and detailed tutorial. 👍

[@MagnoCRM]

Extremely good content and tutorial. Thank you so much! Great job!

[@ochadeemmanuel4907]

The best I have seen after countless number of search, Thanks man

[@NoName-1337]

Great Video for a short overview about this topic. Thank you.

[@fthatlogic5716]

Great video. Love your explanation, straight to the point no bullshit or stalling. Love it!

[@marymcguire9337]

I watch a lot of KZbin tutorials and this is really great, subscribed 😄thank you!

[@hosseinbehdarvandi1504]

You explained important issues quickly and easily. Very good. Do more.

[@saramatelot8322]

Thank you!! Very clear explanations. Finally a tutorial on indexedDB that I'm not too dumb to understand!!

[@mikanika21]

Great content !!! Thank You 🙂

[@rahulsaxena5015]

Timestamp for the code after the theory explanation: 10:10 Brilliant walk-through. Loved it.

[@AlexEagleson]

Thank you!

[@ohiwantyoutobelieve]

Thank you, very clear and nice blog

[@AlexEagleson]

You;'re very welcome

[@ovusa]

Great tutorial, thank you

[@ShubhBeard]

Dude is the teaching brilliantly and has a mere 4.73k subs and then there are stupid people lipsinging songs with a million subs. This is just unfair and sad.

[@solar_tea]

Hey Alex, first time watching one of your videos and let me tell you, I love the way you expain. I enjoyed every moment of the video. Sometimes I can't believe this kind of content is available for free. Thank you very very much

[@AlexEagleson]

Thanks for the kind words, you're super welcome

[@baremetals]

Thanks for the video really helpful.

[@aruntejadhondi2008]

great tutorial & like your hair 😊

[@Suuuuuuuuuuuuuubrat]

Awesome 🙌🙌

[@maimounatraore6982]

You are the best!

[@nurzhanamantay8729]

thanks a lot Alex

[@paulallies]

Great teacher

[@premkumar-ix3jq]

Hello Man, Thanks for the explanation. I was trying since yesterday to store and retrieve with update. End of the result I always got error. This solution is simply works like a charm with Angular.

[@pepinogdev]

muy buen video :D

[@codingtranquility]

God I love this channel

[@davonalbandyan8279]

The best

[@baremetals]

Is it a good idea to use indexDb for a Next.JS application, user session info? I am currently using cookies but i want to store more information like reading list and saved events etc. would that be suitable or should I stick to cookies and backend database?

[@yuanlezou305]

May I ask you a question? how to update a data item in a list in a document, like {user:[{class:"1", time: "2"}]},I don't want to take the data out and put it back after the update is complete, but update it directly after the query meets the criteria

[@darrenwilliams582]

Hello, what would be an example of why you would want to change the database version?

[@joejones7821]

Thank you for this, is it recommended to encrypt data before storing it here? I'm not storing particularly sensitive data but just wouldn't want it potentially exposed to malware, how secure is this?

[@afelar3818]

If I need to store huge amounts of data what would you recommend? Any SQL suggestion?

[@alindebian8295]

Hi, where is the blog link you promised in the video?

[@AlexEagleson]

Oops, good catch, added to description!

[@darz_k.]

Great video - thanks Didn't you also produce Nirvana's Nevermind?

[@novanoskillz4151]

corny

[@darz_k.]

@@novanoskillz4151 No thanks, I'm driving.

[@nikhilgupta9876]

Sir the data you entered was dummy data...please help me getting the data from the user and then putting it into database

[@nikhilgupta9876]

for example when we use forms to get the data to make a todo list

[@gernotpokorny3956]

When I want to select something I always have to create an index?

[@ygormartinsr]

Kinda late, but nope. Unless, of course, you want to query using that index

[@yaeluriel]

Is IndexedDB very common or what depends that on usage?

[@AlexEagleson]

IndexedDB is a bit of a niche tool, most applications that need to store small amounts of user data in the browser will use localStorage When you get into larger data-heavy applications that run exclusively in the browser is when IndexedDB starts to be very useful. Look into tools like JIRA, Linear, Notion, and data-heavy browser based apps and check your Storage tab in your browser, you'll probabaly find those and similar apps use IndexedDB to store large amounts of client data to avoid unnecessary server requests

[@gernotpokorny3956]

@@AlexEagleson A POS app for example needs indexedDB I guess.

[@AlexEagleson]

@@gernotpokorny3956 I don't think any specific kind of app "needs" IndexedDB. You could theoretically create a perfectly serviceable POS app using local storage, or even just in memory data depending on how its implemented. It totally depends on the way you choose to design it.

[@vishaljose133]

What use is this if not explained how to take input values from an offline file and to store it to indexedDb !!

[@1imoooooooo]

Hi, This is the second IndexedDb tutorial I've looked at, however, I keep getting errors which I cannot find a solution to. I've rechecked my code for both instances to no avail - each time I get "Uncaught DOMException: Data provided to an operation does not meet requirements." Please could you check if I've done this correctly? Thanks, const indexedDB = window.indexedDB; const request = indexedDB.open("CarsDatabase", 1); request.onerror = function (event) { console.log("ERROR"); console.log(event); } request.onupgradeneeded = function () { const db = request.result; const store = db.createObjectStore("cars", { keypath: "id" }); store.createIndex("cars_colour", ["colour"], { unique: false }); store.createIndex("colour_and_make", ["colour", "make"], { unique: false }); } request.onsuccess = function () { const db = request.result; const transaction = db.transaction("cars", "readwrite"); const store = transaction.objectStore("cars"); const colourIndex = store.index("cars_colour"); const makeModelIndex = store.index("colour_and_make"); store.put({ id: 1, colour: "Red", make: "Toyota" }); store.put({ id: 2, colour: "Red", make: "Kia" }); store.put({ id: 3, colour: "Blue", make: "Honda" }); store.put({ id: 4, colour: "Silver", make: "Subaru" }); const idQuery = store.get(4); const colourQuery = colourIndex.getAll(["Red"]);; const colourMakeQuery = makeModelIndex.get(["Blue", "Honda"]); idQuery.onsuccess = function () { console.log("idQuery", idQuery.result); } colourQuery.onsuccess = function () { console.log("colourQuery", colourQuery.result); } colourMakeQuery.onsuccess = function () { console.log("colourMakeQuery", colourMakeQuery.result); } transaction.oncomplete = function () { db.close } }

[@1imoooooooo]

Got it working on Google Chrome, idk why Firefox didn't want to conform even though it supports IndexedDB. Thanks for the video :)