Это видео недоступно.
Сожалеем об этом.
IndexedDB - FINALLY an EASY Way! (with Localbase)
HTML-код
- Опубликовано: 14 авг 2024
- In this video I’m gonna show you an unbelievably SIMPLE and FUN way to work with IndexedDB and Offline Data - in ANY web site or web-based application - whether its an SPA, a PWA, React, Vue.js, Cordova, Electron, or even a bog-standard HTML Page with Vanilla JavaScript - using a new library called Localbase.
Localbase gives you an offline database with the simplicity & power of Firebase, all stored in the user's browser (in an IndexedDB database).
Kiss goodbye to writing countless lines of code for basic offline database operations and replace all those operations with single statements.
0:00 Introduction
3:58 Use Localbase with Script Tag
18:50 Use Localbase with NPM
30:11 Localbase Playground
34:10 I Need Your Help!
👉 Localbase GitHub page: github.com/dan...
👉 Localbase Playground: github.com/dan...
👉 Quasar Localbase Todo App Code: dannys.link/qu...
👉 JSFiddle Simple IndexedDB Todo App: jsfiddle.net/un...
👉 VSCode: code.visualstu...
👉 VSCode Live Server Extension: marketplace.vi...
👉 My Courses: dannys.link/co...
👉 Download Fudget: www.fudget.com
👉 My VSCode Setup: dannys.link/vs...
👉 DONT CLICK THIS: dannys.link/do...
![Baby Kia - WYG (feat. LAZER DIM 700) [Official Music Video]](http://i.ytimg.com/vi/avlLsOH_oJc/mqdefault.jpg)
Leave a comment to let me know what you think! Links from this video:
👉 Localbase GitHub page: github.com/dannyconnell/localbase
👉 Localbase Playground: github.com/dannyconnell/localbase-playground
👉 Quasar Localbase Todo App Code: dannys.link/quasarlocalbasetodocode
👉 JSFiddle Simple IndexedDB Todo App: jsfiddle.net/unclelongmao/VrS32/
👉 VSCode: code.visualstudio.com/
👉 VSCode Live Server Extension: marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
Other links:
👉 My Courses: dannys.link/courses
👉 Download Fudget: www.fudget.com
👉 My VSCode Setup: dannys.link/vscodesetup
👉 DONT CLICK THIS: dannys.link/dontclick
Pls ... Fix the issue of not working in next.js
@@Mike-Denver I prefer JS object-style databases but Lovefield looks very nice for relational DB. Thanks for the heads up. Google should definitely create an Object style DB wrapper for IndexedDB too 👍
Is this work inside serviceworker. Js
@@niravrk5446 I'm not sure...
@@MakeAppswithDanny its work man
Dude, this is amazing, I nearly came. And it's so firestore-esque, I love it! Thank you!
😂
I wanted to take a moment to extend my sincerest gratitude for the fantastic library you've built. Your creation has been an invaluable asset to my projects, saving me time and effort. I truly appreciate the dedication and hard work you've put into making this library available to the community.
Your library's functionality and ease of use have made a significant difference in my development workflow. It's evident that you're passionate about providing developers with top-notch tools, and I can't thank you enough for your contribution.
Your work has inspired and empowered developers like me, and I'm excited to see how it will continue to impact the community positively.
Thank you, that's very kind! 👍
You're doing just mind blowing stuff man. I will definitely use Localbase in one of my next projects. Thanks for making such an awesome library.
Thanks Abdul!
Hey man just here to thank for this incredible library. I can not believe that something that I take for granted on other platforms (cilent side storage) could get so complicated when it comes to web development.
I had to store some images on the client while they are being manipulated before uploading them to a database. This library worked perfect for my needs.
Great to hear!
What happened with this project? Keep moving on!!! Create a team to give updated support, implement CD/CI to handle PRs.
I think this tool is a great help for people like me who are looking for a better-paid job and have a short period of time to finish a technical assessment.
Thanks for sharing your knowledge!😊
Thanks Tatiana. Unfortunately I have too much going on to prioritise Localbase. However I may add some improvements soon - improvements I might need for my app Fudget. One thing I'd really like is .on listeners (like Firebase) so that we can listen for changes to a collection in realtime.
excellent wrapper library with ease-to-use APIs for indexedDB
This is gold 🎉❤ Thank you so much for your short videos. Shorter videos are tougher to make and reach the audience at the same time. Keep them coming 😊
Thanks 👍
This package is astonishing, magnificent, amazing and so on... I will definitely use Localbase in all projects where I need to work with indexedDB. Thank you!!!
Great! Thanks Juan!
Wow! This is really nice :) I am working on my graduation assignment and was wondering if there was a modern "prototype tool" like this. I came upon json-server which does what i need. The pity of it is that the receiver of the app (my teacher) must install json server and run the db for everything to work. Now, with Localbase i can just build the app and send as is. Awesome! Thank you!
Great to hear Robbert 👍
This is an AMAZING wrapper that you've created! You're incredibly talented man! I'm definitely a new subscriber to your channel. Thank You!
Thanks Mark! Welcome to the channel! 👍
This is EXACTLY what I was looking for to implement on my current Angular 11 PWA! I so much appreciate it! Thank you !!
Glad it was helpful!
thanks for reducing the complexity of IndexDB through localbase👍👍
You're welcome!
Hello Danny,
I have saw all this video, and on the second part, i saw all the advantages that your library bring on to me.
So i'm in a projet that i want to store data in the user browser, and your library answer by 80% my need.
So for the 10% remaind, i thinks that il could be usefull, if in your library, you can provide a function that can get data, base on a parameter, like name, or a boolean attribute wish the value is true or false.
But, even like that i found what i want to finish my projet with the appropriate tool for local storage.
Thanks to you Danny, and many courage !
Hi Alex thanks for the suggestion 👍
Maaaannnn... I'm surprised the IndexedDB devs don't praise you or something... Wow, this simplifies my local webapp so much
Thanks Cesar 👍
Thank you for creating this. It is fast, intuitive, and easy to work with.
Thanks Yahia!
Ooooooooooooooh my god,
Superb man,
You are great.
This world needs people like you who makes complex things very simple...
Keep up. It's fantastic.
Thanks Rahul!
dude, this npm package is a future star in the node world. Keep up the good work.
Thanks, will do! Unfortunately I don't have time to work on it. I'm considering looking for someone to take over it.
God-sent dev angel. You're a savior
Thanks 👍
thank you very much, I managed to implement it in my project and it worked perfectly well
Great!
I wish i had 10% of your skills . You are awesome dude.
Thanks --------------------------------------------------!
This is awesome! Great work! You’ve definitely earned my sub and so many more, I hope!
Thanks for the sub!
Hey Danny,
This video is really mesmerizing for me. I really learned a lot from this video. Dispite this all, I have few more questions for you. I hope you will revert me back asap.
1) What about if I used this in my next project, Does any tech guy will able to see my database in any way? If yes, How can I prevent that? How can I make my database more secure?
2) Is this a only option of database which we can use while pondering about any offine software?
3) There are also some other offline software are available such as Tally ERP 9, How does they are going to manage their database?
4) When we create build of Electron, Does this data will always be there with us? How can we take Backup and make our data secure?
Sorry as I have a so much questions to ask. Please bare with me and give me solution. I am waiting to hear from you.
1) yes anyone will be able to see the data in devtools. I suppose you could encrypt/decrypt the data somehow so the user just sees nonsense in the devtools
2) I don't know what you mean
3) I don't know anything about Tally ERP 9
4) Yes any browser based data will be stored on the user's computer. Of course it would be lost on a different computer, unless you were using a backend database to keep the data in sync across devices
That's very cool. I was looking at a couple of databases like rxdb etc but your implementation is very straightforward.
Thanks Shawn!
I starred on github as well. That's amazing Danny!!!
Thanks R&B! 👍
Looks simpler and more practical than pure javascript, I will definitely try it on my project and see if it is as fast as javascript, thanks a lot!
Thanks Hakan!
you just saved me learning mySQL :)
Glad to hear that!
Great work on this, feels just like using the Firebase JavaScript SDK
Thanks Ricky!
Excellent work Danny! I previously bought access to your PWA-course on Udemy and I'm really looking forward to following along some more. Thank you!
Thanks Eff! Welcome to the channel, hope you enjoyed the course! 👍
Awesome Danny!
Thanks for the hard work you are doing, its a masterpiece!
Greetings from Chile
Hi Claudio! Thanks for the kind words!
how neat is that!! it vaguely reminds me of mongodb, I am going to give this lib a go, thank you for sharing
Thanks Sara!
Awesome. That's a pretty cool wrapper lib! You forgot to say that you put this in practice with Quasar 😁 Thanks a lot!
Thanks Jean-Philippe! 👍
WOW excellent resource. I will definitely be using it.
Thanks Wanda!
i,m shocked bro this was amazing i hope best wishes for you and thank you for sharing it with us tnxxxx
My pleasure Mohamad!
Muchas gracias, me ahorraste mucho tiempo. Buen trabajo hermano! Saludos desde Venezuela!
Thanks Jonas!
Awesome! Very nice to see it!
Thank you very much Leonardo!
this is really great. only wish there was typescript support. thank you for making it so much easier to have a frontend database.
You are welcome!
Danny, thanks for helping us find easy, fun ways to get away from the tyrannical big tech! You're the best!
man thanks for making this npm pacakge you are absolutely amazing
Glad you enjoy it!
Awesome! Thanks for your work, Danny.
Thanks Quabbe! 👍
This is a great idea to work with ofline data.
Thanks Hasibur! 👍
thx a lot for creating this one - saving me a tremendous amount of time in current offline app development.
Thanks Daniel. Great to hear that people are using Localbase in their own projects 😀
@@MakeAppswithDanny the only question to me is, why didn't they make IndexedDB like this in the first place, the plain version is just unnecessary complicated to use
@@knufflpuffl good question!
You are a legend in web storage development :D awesome job. I will use your code in my web projects :)
Great!
Excellent work
Some important features lag
Localbase server
Sync
Thanks for your suggestions!
Great package! One question: how would you import/export this? I'd like to make a simple offline web app but would like the option to simply export
I suppose you could just grab the collection and save it as a json file. Then import the json file?
Awesome Danny !! luv ya work m8.. looking forward to giving it a workout in my next project !
Thanks mate. Let me know how you get on 👍
Just stumbled across this and I love it! Thanks for a great lib to use. In my case I'm going to use this in a vuex wrapper to cache data locally.
Great to hear, Dean! 👍
Brilliant! It really is as easy as Firebase.
Thanks John 👍
Hi, thank you for creating this amazing package. I have a question, if I have 100s of rows of keys and values (key being a uuid and value being an object), and I want to sort them by one of the fields in the object, say by createdAt, so I wanted to know if an index was created for this field or not, basically will the sorting be done when I call the function or will they be returned quickly if they were indexed.
No, there isn't any indexing being done, you will just need to grab the whole collection and then sort. 👍
@@MakeAppswithDanny Okay, thank you for the reply.
Hai from your example i have create todos, and how i get done task are true values only.. for exp i have 4 data, in that data 2 are complete how i get these 2 data only by using this localbase query
You will need to grab the whole collection and then filter it.
Thank you man, you nailed it!
Thanks! 👍
Loving it!! Thanks a lot man!!!
Glad you like it!
I started to use. Great. Love it. Simple....
Thanks glad you like it 👍
@@MakeAppswithDanny when we add an array with set it takes time for huge data lets say 10000 items. Any solution for huge data.
how do i get a specific value from a document? like i just want the id?
You will just need to grab the document then get the value from there. 👍
1. Do we need to use quasar if we use npm ?
2. How do we utilise the same js in pinia store. For some reason it does not work when I combine this vanilla version in pinia.
1. Localbase is framework agnostic. I think you should be able to use it in any type of JavaScript project / framework.
2. I'm not sure what you mean...
Always Danny in us! Tks.
Always!
this is so much easier to use than the nested callback hell of regular indexeddb
Thanks Richard!
i want to store and cache pages in offline mode wen the internet goes off and do database syncing when the app goes online
Hey Danny have u done this .. with syncing I see
Hi Danny, localbase is brilliant, I will be using it for prototyping, i see a lot of uses for this, will try it out and see if I can find any improvements or bugs, have also starred the project, well done!
Fantastic! Thanks Vince!
Does localbase support in typescript? It doesn't seem to find a declaration file (.d.ts) file for localbase.
Hi Jason. Not currently, unfortunately.
Hey Danny. There's no license for this that I can find. I'm considering trying implementing it in my company's commercial application. Can you update the license in the repo?
Also I noticed it's still in a
The .doc method only allow you to find One document, is there no way to find all documents corresponding to criteria in a Collection using LocalBase ?
Not currently. I'll hopefully add some kind of filtering functionality when I get around to it! For now though, you can just grab the whole collection and filter it from there.
Thank you for all you do Danny, I love your work!!!
Thanks JD!
Cool stuff. Thanks a lot for this cool library.
Thank you Bertrand! 👍
Really love your work it helped me a lot. Thanks
Great to hear Armghan! 👍
@@MakeAppswithDanny i am also started to work on quasar. I hope i'll learn from you more. Thanks again
Thank you so much Mr. Danny for creating this amazing library that allows us to easily manipulate indexdb, it really makes life way so much easier, this is an awesome tutorial, you are the man, I salute to you !!!
Thanks Stephen! Great to hear it’s helping you! 👍
Good Work. I just tried out your localbase for my fljota.network prototype - nice! Works just like described in your tutorial :-)
No worries Adam. Great to hear people are using it in their own projects! 👍
This is a really impressive framework for this frustrating use of the indexeddb, thank you :)
2 notes:
1. I noticed that at the moment the .set() and .update() function are actually doing the same effect for 'document' (row in table). set() is actually currently overriding existing data.
2. How would you suggest to check the existence of data (of document) inside table (collection) ?
Thank you !
Thanks Mike. I think you can just try and grab the document, and if it doesn't exist no document will be returned.
Wow! This is a lot simpler than Dexie! I wonder if I can use this in a service worker for a Chrome extension.
Thanks Olivier! That's a good question. I'm not sure....
Hey Danny, Localbase is phenomenal man. Honestly big up's man. Just, one request please can you merge the PR's that just change the require import to the ES6 equivalent. It's not possible to make use of localbase with VITE. I'd highly appreciate it if you could merge the PR's! Cheers man, thank you so much for building this.
Thanks. Honestly I don't have time to work on this, but I'll try and take a look at that. What I really need to do is find someone to take over it 👍
Great video as always! thanks Danny :)
Thanks Alexei!
Hi ,how indexed db works in case I want to access my web app from remote machine and not on local machine ,will it be replicated in that case in remote machine browser?
No, you will need some kind of backend, or some way of transferring the data across. IndexedDB is just stored on the machine you're on.
great video 😊 maybe you can create a method to get data with page, like from(page, limit)
Truly A Great Tool!! :)...Is it possible to do a quick video and/or Github post showing how to use localbase to recreate the JS Fiddle "A Simple TODO list using HTML5 IndexedDB"?...Many thanks again for your efforts to make our lives simpler!
Thanks Rashard. I'll consider it 👍
I thank you from bottom of my heart. its exactly what i wanted
You're welcome 😊
I want to ask for clarification, is localbase can run on server side (node backend server) or on client side browser only (using framework like quasar / react or directly using script tag)?
I'm having trouble using this on nodejs, with error like this
import Localbase from './localbase/localbase'
^^^^^^
SyntaxError: Cannot use import statement outside a module
It is only for the front-end. It uses IndexedDB, which is a technology that exists only within browsers (front-end) 👍
Hi. for my uni project I needed a client side database and localBase has been great, thank you! A question for you please, ideally I would like to be able to access the database by using the DB index instead of passing an object with a field and value? The reason I ask is I want to use it is an unique reference, currently I add an ID but it would much simpler to use the index. Thanks again for localBase!
Thanks Rob. I wouldn't recommend using the index. I'm not sure if the ordering is always guaranteed. However, to do this you would need to grab the whole collection and then grab the item using the index. You could create a method to do this that you could reuse.
That's amazing !!! Thanks a lot for your work.
Thanks 王海波! 👍
it is great super simple, but i have tried it with importing a CSV file in a quasar project , the sample file had 6410 rows and 3 columns, what i have noticed even with async and waiting for the add method it seems that there is still something happening in the background the for each was quicker than the add method so that clipping to stored data happened, i have even tried "awaiting" the set method to overwrite the whole collection , refreshing the page well make some clipping, i don't if i am making something wrong or not though, Dexiejs is good but the idea of versioning is a headache since my app depends on dynamic creation and deletion of collections
PS: i am using a worker to push when complete
Hmm not sure what's going on there, Hani...
Thanks for the library, it's really awesome, Just a question, does it provide database encryption?
Thanks Voloide. No, not currently.
thank you for your time and a great package!
Thanks for the kind words Pavel! 👍
Hey, thanks for the great video! Maybe it's a dumb question, but, is there any way to store data (import/export) to a file that is stored in the indexedDB, so I can retrieve ist at any time.
Yes I think you can store files in IndexedDB. It doesn't work with Localbase by default (I think... 🤔) but you could perhaps base 64 encode the file, store it in a document, then retrieve and decode back out of base 64.
Hello , i created a db in page "A.vue", and i want to have access to its conent from page "B.vue". is there any method to get the content of the existing db from any page ( by passing the name of the db) ? is there a method which allows us to get the list of the existing DBs in our project ?
thank you for you time,
thank you for your videos
Code Sengel
Thanks Code. You should be able to access the data from any page, using the steps shown in the documentation. The data is stored within the browser (in an IndexedDB database) at the domain-level, not the page level 👍
Hi, Thanks a milliard times to you.
Can you show me how to save data from an online real database locally using LocalBase when the user is on the internet? This can be used, for example, to download after the user sees the news. The user will not have internet but can see old posts. I think you understand what I mean.
Thanks again.
Yeah, I understand what you mean. I will consider it. Thanks.
This is amazing, thanks Danny :D
Thanks José! 👍
wow wow thank you for this fun
Glad you found it fun, Mustafa 👍
Hey Danny, can u add one more function to display data from one point to another.
example:
Say i have 10000 records and i nedd to display only data starting from 2100 to 2200 (100 records)
I actually wanted to display huge data in Paginated manner.
Thanks Abdul. I'll consider it, though I struggle to find time to work on this...
How do I check how many collections there are in the DB? I tried getting a collection, I tried db.collection.length I just don't want to fill my database every time my app runs, if there is already data present.
Decided to just set a localstorage variable and control off of that.
Glad you found a solution Adam 👍
Hi Danny,
This is awesome! Thank Goodness I found this!
Quick question, is it possible to compare Localbase DB to another object?
For example, I am fetching JSON from a server, then saving it to Localbase.
What I need is to check next time I fetch the JSON data from server,
compare it with what is already in localbase, and if it's different, then overwrite it, if not, then do nothing.
Thanks JP. Yes, you would need to grab the remote data, grab the localbase data and compare. You might need to use a package to alphabetise all of the objects & properties to make a valid comparison. I'm using this package for this purpose in Fudget 2: github.com/atomantic/alphabetize-object-keys
Hi. Excelent Library.
How can I join two or more collections using a key. Or make a query for any field?
Not sure about the first one, but you can grab a document based on a unique field: github.com/dannyconnell/localbase#get-a-document
Cool stuff!
Thanks 👍
This is awsome. Thanks a lot!
Thank you André!
Thank you so much, regards from Mexico (:
My pleasure, from Manchester!
Does the data in the database persist even after the browser window/app is closed? If so, how and where is it retained? And then can it be retrieved the next time the app is run?
It gets stored on the user's computer (the folder depends on the platforms). Yes, data is available when user returns.
Super bro 💐💐 ur genius 🎉🎉
Thanks man! 🥊
great job Danny ;-)
Thanks Yann!
Awesome!!! Bravo!!! Amazing!!!
Thanks a lot!
Excellent work….
Thank you! Cheers Kalph!
This is amazing. The only missing features are database versioning, line in classic Indexed DB. Also I am getting the following error when importing and calling new Localstore(): require is not defined. the error is in let UUID = require('ordered-uuid'). Also npm tells me the uuid@3.4.0 package is depricated. Many thanks
Thanks Studio. I think you want new Localbase() - not Localstore() 👍
Oh sorry my bad, im actually including localbase(), a typo. Anyways, it may be the issue with my Rollup setup. But ive used lots of packages and none has this issue of missing imports. Maybe npm did not install uuid library because its depricated? Can you please update it to the newest version?
I really want to use it as this is going to be a completely offline app where the phone kind of acts as a server, and IndexedDB looks like an absolute pain. Im in shock that it is a standarized API😂
Many thanks 😊
@Danny i am hopping for your reply on my issue, i am using your library for my current project,
Issue i am facing is that when i fetch all the data from server when the user logins and then store all of it in indexedDb, it gives me ERROR of "setItem" is not defined, i figured out that this error occurs when i am setting the collection with larger data and then the 2nd collections starts setting it.
what i did to solve it is that i am setting the bigger data after the smaller data.. But thats not a proper way, i am hopping for your input in this issue
I'm not sure what's going on there without seeing examples of the data you're storing and the code you're using. 👍
@@MakeAppswithDanny is there any way i can share details with you?
what i want to do is when the user is logging in, i want to fetch all the data from my server and store it to indexed db, so i can have access the all of data from indexed db on my homepage to make it working,
@@MakeAppswithDanny i fixed that issue, thanks for your time danny, :)