Это видео недоступно.
Сожалеем об этом.
IndexedDB Crash Course with Javascript
HTML-код
- Опубликовано: 14 авг 2024
- 💻 More Software engineering videos • Software Engineering b...
I found out recently about indexedDB that exists in the browser! and wanted to make a video tutorial about it. I got say the API is clunky but that did not stop me from making the video. I first explain the eventing that get triggered when you open the database, onupgradeneeded, onsuccess, onerror and when each are triggered. Then we dive into creating objectstore, then transactions both writing and reading. Pretty cool technology. We are using Javascript on the browser and visual studio code. Enjoy the tutorial guys
The tutorial is long so here are some jump codes for your convenience
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
git hub repo
github.com/hna...
Stay awesome
Hussein
![Gunna - today i did good [Official Video]](http://i.ytimg.com/vi/ulGLk8TaXcI/mqdefault.jpg)
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
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?
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
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.
If all instructors are as interesting and like you then the vibe will make people understand without stress
I love this high level tutorial. It's like your casually speaking to other devs. "Guy this is just weird... What..." haha awesome
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.
No stress.. Nice! You sounded like the last villain in First Season of Loki
Better than Google Codelab!
Saved so much time...
Thanks 👍
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
Your a life saver! thanks for the tutorial! seriously!
Thanks for watching happy to help!
Just wanted to let you know you helped me out a ton with this tutorial. Thank you so much!!!!
All the best ⭐️ thanks for your comment
Who on earth dislikes these videos ? Great Work Hussein. You are the Ninja of backend Engineering!!
Great content. Loved the simplicity of your explanation
That was amazing, I like your way of explainng things. GOOD JOB
thanks Hussein, a good job and I like your funny speech and now I will try it on my own
Thomas Giesing thanks Tom! Good luck building your own share with us!
best idb video! Thanks nazzar,
I never been seen such kind of informative and learning video a very very good tutorial 🙌🙌🙌🙌
Incredible tutorial! Thanks for the help buddy!
No problem 👍 glad it helps!
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.
This helped me a lot. Thanks man
Hossein brother, thanks for sharing these informative tutorial. could you make a video about indexeddb and synchronize with rest api using angular
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
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.
@@hnasr github.com/jakearchibald/idb
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!
Thank you, brother, and Eid Saieed.
Good job on this tutorial. Thank you
Sylvain Gendron thanks for watching!
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.
Awesome explanation
This guy is hilarious. Great content anyway.
great video @Hussein
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
Thanks for sharing Raghu
IndexedDB.js:48 Uncaught TypeError: Cannot read properties of null (reading 'transaction')
at HTMLButtonElement.addNote
Can someone deal with this problem?
Thank you!
This is a very helpful primer that gets right to it.
Seth Hubert thanks for watching! Trying to make video shorter but its Hard to explain such big concept with short videos..
thats great. Thank you!
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?
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..
@@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?
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..
@@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?
Leslie King correct! I recommend you watch my REST API video explaining all these things. REST API advantages and disadvantages with examples ruclips.net/video/M3XQ6yEC51Q/видео.html
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
great tutorial !... I was a absolute beginner : )
Excellent explanation!
Awesome stuff dude!
Nice tutorial , Thanks for your amazing content
Uncaught TypeError: Failed to execute 'open' on 'IDBFactory': Value is not of type 'unsigned long long'.
at HTMLButtonElement.createDB
great video to start IndexDB. Thanks. And yes we can see zoom in text in your video😂
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.
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
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...
Very detial, Thank you very !
Interesting and cool video,thank you.
How was he able to trigger the debugger when he pressed the button at 47:20?
Thank you so much!
Fantastic tutorial! Thank you!
Thanks Lynn! 😊
This is awesome! Thank you!
Good tutorial, love your energy, although I still think you needed to prepare a little bit more before doing filming the tutorial.
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! .
Awesome tutorial. Btw, can you share the flowchart in the video?
Awesome Tutorial !!
Thank you!
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 >
is it the alternative to location storage?
Great. Thanks
Excellent
awesome and fun! thanks
Great tutorial Hussein! Can we add objects (Array) at once instead of object to IndexedDB?
Thanks Berk! I am sure you can it should accept it.
@@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.
nvm i'll just send one by one :)
What is the scalability of indexedDB?
Really useful. Thanks.
Thanks!! Glad you find it useful 😉
localforage js library, make indexedb like using a localstorage
can ı write a hospital MySQL database with javascript?
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.
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
nice video
perfect
42:15 Isn't there a getAll() method to retrieve all the items in a store?
yes there is
Good Job Bro.
Omar Fathy thanks Omar!
very good
cool
Press 4 on your keyboard
Now press 6
so cool
李思南 it is right ! I love databases
Hello
i wish youtube had a 100x speed option
were you drunk the whole time while shooting this video ?
Just say what you want. DO NOT MAKE NOISE PLEASE
thanks for video, but to be honest, it was really difficult to stay calm and listen to your fancy joky-speech
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