How to use IndexedDB to store data for your web application in the browser
Vložit
- čas přidán 12. 09. 2024
- 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/alexeag...
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.
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!
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!
Glad to hear it was helpful!
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.
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.
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)
Glad it helped you!
Timestamp for the code after the theory explanation:
10:10
Brilliant walk-through. Loved it.
Thank you!
Outstanding coverage of IndexDB. Wow, you are a great instructor and teacher. Thank you!
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.
Thank you, I searched exactly for someone who has good knowledge for IndexedDB. I found it right here. :)
I was finally able to figure out IndexedDB after this video. Thanks a ton!
The best I have seen after countless number of search, Thanks man
Thank you so much. till now I was unknown about Indexed DB. Your tutorial is awesome!
Great Video for a short overview about this topic. Thank you.
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
Thanks for the kind words, you're super welcome
You explained important issues quickly and easily. Very good. Do more.
Just about the best intro to IndexedDB I've seen, thanks a lot for this
Very helpful video man. Thank you 😊.
Thanks Alex - brilliant and detailed tutorial. 👍
great tutorial & like your hair 😊
I watch a lot of CZcams tutorials and this is really great, subscribed 😄thank you!
Thank you!! Very clear explanations.
Finally a tutorial on indexedDB that I'm not too dumb to understand!!
Great video. Love your explanation, straight to the point no bullshit or stalling. Love it!
Extremely good content and tutorial. Thank you so much! Great job!
Great content !!! Thank You 🙂
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.
Awesome 🙌🙌
God I love this channel
Thank you, very clear and nice blog
You;'re very welcome
You are the best!
The best
Great teacher
Thanks for the video really helpful.
Great tutorial, thank you
muy buen video :D
thanks a lot Alex
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?
Hello, what would be an example of why you would want to change the database version?
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
If I need to store huge amounts of data what would you recommend?
Any SQL suggestion?
Hi, where is the blog link you promised in the video?
Oops, good catch, added to description!
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?
Great video - thanks
Didn't you also produce Nirvana's Nevermind?
corny
@@novanoskillz4151
No thanks, I'm driving.
Sir the data you entered was dummy data...please help me getting the data from the user and then putting it into database
for example when we use forms to get the data to make a todo list
When I want to select something I always have to create an index?
Kinda late, but nope. Unless, of course, you want to query using that index
Is IndexedDB very common or what depends that on usage?
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
@@AlexEagleson A POS app for example needs indexedDB I guess.
@@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.
What use is this if not explained how to take input values from an offline file and to store it to indexedDb !!
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
}
}
Got it working on Google Chrome, idk why Firefox didn't want to conform even though it supports IndexedDB. Thanks for the video :)