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

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

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

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

[@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!

[@homeboy6668]

Fantastic explanation! Your smooth iterative approach to each terminology makes the concept easier to grasp! Thanks!

[@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!

[@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!

[@rahulsaxena5015]

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

[@AlexEagleson]

Thank you!

[@Raduriel94]

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

[@somevideos99999]

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!

[@ochadeemmanuel4907]

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

[@GilgaFrank]

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

[@hosseinbehdarvandi1504]

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

[@agun21st]

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

[@NoName-1337]

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

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

[@saramatelot8322]

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

[@marymcguire9337]

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

[@fthatlogic5716]

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

[@ManontheOutside]

Thanks Alex - brilliant and detailed tutorial. 👍

[@MagnoCRM]

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

[@shabaniddrisu]

Very helpful video man. 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.

[@aruntejadhondi2008]

great tutorial & like your hair 😊

[@ohiwantyoutobelieve]

Thank you, very clear and nice blog

[@AlexEagleson]

You;'re very welcome

[@mikanika21]

Great content !!! Thank You 🙂

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

[@iJustMakeThings]

bruh, its so cool

[@AlexEagleson]

Thank ya

[@darrenwilliams582]

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

[@codingtranquility]

God I love this channel

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

[@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?

[@Suuuuuuuuuuuuuubrat]

Awesome 🙌🙌

[@baremetals]

Thanks for the video really helpful.

[@afelar3818]

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

[@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?

[@alindebian8295]

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

[@AlexEagleson]

Oops, good catch, added to description!

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

[@maimounatraore6982]

You are the best!

[@davonalbandyan8279]

The best

[@ovusa]

Great tutorial, thank you

[@paulallies]

Great teacher

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

[@nurzhanamantay8729]

thanks a lot Alex

[@pepinogdev]

muy buen video :D

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

[@darz_k.]

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

[@novanoskillz4151]

corny

[@darz_k.]

@@novanoskillz4151 No thanks, I'm driving.

[@vishaljose133]

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

[@hmm7172]

Thanks much

[@daniellchukwu]

God bless

[@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 :)