0:00 Introduction to IndexedDB 02:17 IndexedDB open database events Flow chart 06:40 Tutorial start 08:20 indexedDB.open 10:00 onupgradeneeded, onsuccess, onerror 20:00 The database object 24:20 Creating object store 29:30 Adding new object to the object store 37:00 Unique key constraint 38:35 View objects 40:00 cursors
@KingKzTuts2000
10 ай бұрын
hi Hussein, I wanted to ask you how IDB works when you set network as offline. I had my IDB setup and stores data but when I set the network to offline in developer settings, the IDB is blank. When I set it back to online, the data is back. What is this issue, that I'm dealing with, can you please help?
@MrAuxiom
4 жыл бұрын
I knew indexedDB was what i needed, that appeared so simple, so i tryed lots of tutos, but failed to implemented it correctly, I did lot of research, and even took hours and days to motivate me to understant how it was build by reading few documentations... finally with some success but as soon as i try to change it a bit or wrap it, i failed without understanding what happening. And it was like a delicious icecream behind an bullet proof glass. I guess they wanted to do something very easy to use and so i guess it is too-much abstracted for beginner. Now i can fucking taste it! Ofc it is not complete but you made it so interresting that the 45min felt like 10! So thx you very much, and timecode
@think2086
4 ай бұрын
I know the other comments have said this too, but I just want to thank you and reiterate that this is EXACTLY the style of teaching we are all looking for--and you'd think it would be in great supply. But it's not. So many tutorials have major, major issues with them. But your teaching style, approach, and structure were all perfect and for that reason I subscribed.
@albertalbaba5101
4 жыл бұрын
If all instructors are as interesting and like you then the vibe will make people understand without stress
@ChumX100
3 жыл бұрын
IndexedDB together with web workers are really game-changing technologies for modern web app architecture. I feel they are not gaining as much traction with devs as they should be.
@peepwebdev575
2 жыл бұрын
I love this high level tutorial. It's like your casually speaking to other devs. "Guy this is just weird... What..." haha awesome
@kurniadi2199
3 жыл бұрын
No stress.. Nice! You sounded like the last villain in First Season of Loki
@HamzaBhatti10001
4 жыл бұрын
Better than Google Codelab! Saved so much time... Thanks 👍
@mac5600
3 жыл бұрын
Just wanted to let you know you helped me out a ton with this tutorial. Thank you so much!!!!
@hnasr
3 жыл бұрын
All the best ⭐️ thanks for your comment
@raghavddps2
3 жыл бұрын
Who on earth dislikes these videos ? Great Work Hussein. You are the Ninja of backend Engineering!!
@petermartinez8700
5 жыл бұрын
Your a life saver! thanks for the tutorial! seriously!
@hnasr
5 жыл бұрын
Thanks for watching happy to help!
@ymanfaith1588
3 жыл бұрын
That was amazing, I like your way of explainng things. GOOD JOB
@mayanksheladiya7541
3 жыл бұрын
I never been seen such kind of informative and learning video a very very good tutorial 🙌🙌🙌🙌
@thomasgiesing5845
4 жыл бұрын
thanks Hussein, a good job and I like your funny speech and now I will try it on my own
@hnasr
4 жыл бұрын
Thomas Giesing thanks Tom! Good luck building your own share with us!
@costagmc1
2 жыл бұрын
best idb video! Thanks nazzar,
@CodeCatProgramming
4 жыл бұрын
Incredible tutorial! Thanks for the help buddy!
@hnasr
4 жыл бұрын
No problem 👍 glad it helps!
@jpisty
4 жыл бұрын
This helped me a lot. Thanks man
@lardosian
4 жыл бұрын
AWS uses it for their DataStore service which is part of the Amplify framework which I'm using at the moment. It's an offline first approach.
@sabuein
2 жыл бұрын
Thank you, brother, and Eid Saieed.
@murtazamohammadi9370
2 жыл бұрын
Hossein brother, thanks for sharing these informative tutorial. could you make a video about indexeddb and synchronize with rest api using angular
@sylvaingendron5442
5 жыл бұрын
Good job on this tutorial. Thank you
@hnasr
5 жыл бұрын
Sylvain Gendron thanks for watching!
@vinaybammidi7123
2 жыл бұрын
Awesome explanation
@raghuvallikkat3384
4 жыл бұрын
I have used indexeddb from Angular type script. The indexed db npm packages exposes a little more better APIs for indexedDB access. Still, as you said, it is limitted. just FYI
@hnasr
4 жыл бұрын
Thanks for sharing Raghu
@alkhwarizmi5426
2 жыл бұрын
This guy is hilarious. Great content anyway.
@gauravmithas2362
2 жыл бұрын
great video @Hussein
@shubert9427
5 жыл бұрын
Thank you! This is a very helpful primer that gets right to it.
@hnasr
5 жыл бұрын
Seth Hubert thanks for watching! Trying to make video shorter but its Hard to explain such big concept with short videos..
@androidetube
2 жыл бұрын
How was he able to trigger the debugger when he pressed the button at 47:20?
@nitingupta1417
3 жыл бұрын
great tutorial !... I was a absolute beginner : )
@CodeCatProgramming
4 жыл бұрын
Awesome stuff dude!
@lizavetameta
Жыл бұрын
IndexedDB.js:48 Uncaught TypeError: Cannot read properties of null (reading 'transaction') at HTMLButtonElement.addNote Can someone deal with this problem?
@damdam4969
2 жыл бұрын
thats great. Thank you!
@amazonreviews2524
3 жыл бұрын
Excellent explanation!
@zoliky
4 жыл бұрын
Hello, Hussein, thanks for the video. This question may sound silly but does "indexedb" store the data in a file, just like SQlite? Or is it available only in the browser without any way to export it to a file?
@hnasr
4 жыл бұрын
Hey Leslie, no I think its a valid question. And yes it does store it on disk since IndexedDB is database using LSM tree structure.. and if i close and reopen the browser my data is still there .. the question whether you have access to these underlying disk files not sure really. Even if you do I would think they are unreadable anyway..
@zoliky
4 жыл бұрын
@@hnasr Thanks for the answer. So, in case I want to move my web application that has a populated database to another computer, it is not possible to load it on the other computer. Right?
@hnasr
4 жыл бұрын
Leslie King Correct. I wouldn’t relay on browser based databases for mission critical data. It is usually used for caching and simple applications when an application is particularly offline. That is where you would probably need a reliable server side database and use IndexedDB as a backup. Interesting use case though..
@zoliky
4 жыл бұрын
@@hnasr Thanks, Hussein. I appreciate your time. I have one more question and I promise this is going to be the last one. If I use a server side language such as Golang I can connect to an SQL database, however I'm not sure what is the best way to send the data towards JavaScript nowadays? Do developers configure the server to send JSON data and then JavaScript fetch that JSON with the Fetch API? I think that's what they call REST API. Am I Right?
@hnasr
4 жыл бұрын
Leslie King correct! I recommend you watch my REST API video explaining all these things. REST API advantages and disadvantages with examples kzitem.info/news/bejne/rmmOt2qvfnVmZIY Meanwhile yes, a server side language (golang php, or even Javascript is also now a server side language with nodejs) can connect to RDBMS database query some data change the data into another representation (thats the RE in REST) usually JSON and send the JSON to the client. The Javascript client makes a call to the server using the Fetch api to pull it.. And please ask questions! These are very beneficial to the community.. my professor always says if you have a question most likely 10 other students have the same question. Cheers
@The-Dev-Ninja
2 жыл бұрын
I tried the indexeddb (without using docs) thinking that is like a json object to change like localStorage, but in the end is super boilerplate code to write before changing or adding a single value. thanks for this video, now I can understand without that complexity
@tennoqinus7455
5 жыл бұрын
I read that indexedDB does not need a server to work, but from all the cases I`ve seen, it still requires a server environment like localhost. Can anyone help clarify this
@hnasr
5 жыл бұрын
TennoWeeb indexedDB is a browser based database so it works on the client. To run indexedDB you need to run javascript and to run javascript you need to put it as part of an HTML page. And to render an HTML page you need to host it on a staticwebserver that serves it. In this video we made a webserver hosted on the same machine. Thats how the all websites in the internet work. You can alternatively double click the html file and run it but you get into weird situations...
@albertalbaba5101
4 жыл бұрын
I believe I wrote the code properly... But the event callback fuctions on the DB object onsuccess, onupgra.... Didn't work when the version was >
@RawCoding
5 жыл бұрын
Good tutorial, love your energy, although I still think you needed to prepare a little bit more before doing filming the tutorial.
@hnasr
5 жыл бұрын
Raw Coding thank you so much for watching. Ill try to do a better job at preparation, i know this cuts down video length and ill know what about to record instead of just randomly pick a topic in the mid of the video. Having bullets points of what i want to cover could help i think. Will try to balance winging vs preparation Thanks again! .
@bilder7123
3 жыл бұрын
Very detial, Thank you very !
@ianaustria8868
3 жыл бұрын
Awesome tutorial. Btw, can you share the flowchart in the video?
@berkoca
4 жыл бұрын
Great tutorial Hussein! Can we add objects (Array) at once instead of object to IndexedDB?
@hnasr
4 жыл бұрын
Thanks Berk! I am sure you can it should accept it.
@berkoca
4 жыл бұрын
@@hnasr I'm trying to send Array but it's giving me this on the console: Uncaught DOMException: Failed to execute 'add' on 'IDBObjectStore': Evaluating the object store's key path did not yield a value.
@berkoca
4 жыл бұрын
nvm i'll just send one by one :)
@techwithshudarsan559
3 жыл бұрын
is it the alternative to location storage?
@lynnoneill7209
4 жыл бұрын
Fantastic tutorial! Thank you!
@hnasr
4 жыл бұрын
Thanks Lynn! 😊
@mrgogate
4 жыл бұрын
This is awesome! Thank you!
@umpiredeveloper6241
5 жыл бұрын
great video to start IndexDB. Thanks. And yes we can see zoom in text in your video😂
@georgetomeh8898
2 жыл бұрын
Great. Thanks
@xerxius5446
4 жыл бұрын
Awesome Tutorial !!
@hnasr
4 жыл бұрын
Thank you!
@muhammedcansoy1434
2 жыл бұрын
Excellent
@The-Dev-Ninja
2 жыл бұрын
localforage js library, make indexedb like using a localstorage
@Isra-p1
4 жыл бұрын
awesome and fun! thanks
@petekhamitbeyli3481
4 жыл бұрын
can ı write a hospital MySQL database with javascript?
@caribbeanman3379
4 жыл бұрын
42:15 Isn't there a getAll() method to retrieve all the items in a store?
@shubham_cr7
3 жыл бұрын
yes there is
@inderbirsingh3592
5 жыл бұрын
Really really good video! Wanted to ask as I keep getting the error "Cannot read property 'transaction' of null" and I'm not sure why. Sometimes it works, sometimes it doesn't.
@hnasr
5 жыл бұрын
Inderbir Singh thanks for your comment! Yes this usually mean that you are using the db object before it is completely initiated. Make sure when you open a database the onsuccess event is fully executed before you start using it take a look at 40:00 to see how i used addNote. You can also share your code happy to help :) hopefully its a simple repro.. send me an email hus.mhd@gmail.com
@iwswordpress
4 жыл бұрын
Really useful. Thanks.
@hnasr
4 жыл бұрын
Thanks!! Glad you find it useful 😉
@datamis2580
9 ай бұрын
perfect
@anshitsharma2917
6 ай бұрын
nice video
@satindersingh9671
3 жыл бұрын
cool
@hooligansofts7430
3 жыл бұрын
Press 4 on your keyboard Now press 6
@darulikhsan4151
4 жыл бұрын
very good
@omarfathy545
5 жыл бұрын
Good Job Bro.
@hnasr
5 жыл бұрын
Omar Fathy thanks Omar!
@李思南-x5k
5 жыл бұрын
so cool
@hnasr
5 жыл бұрын
李思南 it is right ! I love databases
@karandave7494
3 жыл бұрын
Hello
@Pharaoh-99
5 жыл бұрын
i wish youtube had a 100x speed option
@ahmadmoradi2018
3 жыл бұрын
Just say what you want. DO NOT MAKE NOISE PLEASE
@sushberiwal
3 жыл бұрын
were you drunk the whole time while shooting this video ?
@aspirinemaga
5 жыл бұрын
thanks for video, but to be honest, it was really difficult to stay calm and listen to your fancy joky-speech
@hnasr
5 жыл бұрын
aspirinemaga thanks for watching, I like to lighten the mode for such dry topic, sorry it was distracting for you. Will do better next time! Thanks for your comment
@usama7132
3 жыл бұрын
Uncaught TypeError: Failed to execute 'open' on 'IDBFactory': Value is not of type 'unsigned long long'. at HTMLButtonElement.createDB
@benf101
2 жыл бұрын
Would it make sense to download an external database for local use in an IndexedDB, and then push updates back to the external database? More specifically, my thought here is to store it externally as encrypted, then download it, decrypt it, and store locally in IndexedDB as unencrypted. When changes are made, it encrypts and pushes the encrypted data to the external database. So basically, the local IndexedDB is like a middleman, storing the decrypted data.
@techpodcastbyAnuj
3 жыл бұрын
Great content. Loved the simplicity of your explanation
@pradipspeaks9395
3 жыл бұрын
What is the scalability of indexedDB?
@meetmeer
3 жыл бұрын
Thank you so much!
@danielchambers6990
5 жыл бұрын
Hey there my fellow programmer. New to your channel (I subscribed), watched this video thought it was real informative. Make sure when you do the transaction, to overwrite the "oncomplete" function. For example, "objectStore.transaction.oncomplete = (event) => {...}" because this makes sure the objectStore has finished before adding data into it. IDB is pretty...errr.. it is what it is. Looking forward to checking out your other videos. Thanks
@hnasr
5 жыл бұрын
Daniel Chambers thanks Daniel for the great tip! That explains why i would get random errors at times. I wish we just had a promise based indexedDB api to avoid all those problems Cheers and welcome to the channel sir.
@tmack729
4 жыл бұрын
@@hnasr github.com/jakearchibald/idb
@tmack729
4 жыл бұрын
I just realised that you mentioned in the video that you know about third party stuff, and you wish for a built-in promise-based indexedDB. Me too!
@theledge3748
4 жыл бұрын
Hi Hussein, great Tutorial like your delivery style. TL;DR i'm trying to return an array from viewNotes.....This may have something to do with what's been mentioned in other comments or me not understanding some JS events fundamentals (probably the latter). But in viewnotes() i was pushing to an array using the cursor, then i wanted to return that array from viewNotes directly under the } where if(cursor) ends to where i have called viewNotes from (i'm using it to update a html form list). Weird thing is it will return the array back if i test using console.log after, but anything else, even using 'alert' it says undefined! Do i have to do all logic in the cursor loop? If that makes any sense, any help be cool, ta.
Пікірлер: 104