Это видео недоступно.
Сожалеем об этом.
IndexedDB Part 1 - Creating and Versioning
HTML-код
- Опубликовано: 22 фев 2021
- This is the first video in my series on learning how to use all the IndexedDB features with vanilla JS.
This video covers how to create and version Databases, how to add and delete stores inside your databases, as well as an overview of the major objects and interfaces that make up IndexedDB.
Code from video: gist.github.co...
IndexedDB Playlist: • Simple Introduction to...
MDN reference for IndexedDB Concepts: developer.mozi...
![Baby Kia - WYG (feat. LAZER DIM 700) [Official Music Video]](http://i.ytimg.com/vi/avlLsOH_oJc/mqdefault.jpg)
Hi, Steve! I just wanna say that I'm so thankful that I found your channel. I find many interesting videos here. Tutorials that aren't popular(I couldn't find many youtuber talk about these topics on RUclips), but important to know (like this one). As a self-learner, your channel really helps me.
YOU ARE THE MAN!!!!!!!!! Looking all over the web and found only crappy tutorials with partical code and cryptic guidance until landing here. YOU ROCK MAN!!!! Subbing.
Clear and high level teaching. Thank you so much
what a great explanation Steve!, from Indonesia 👍👍
Thanks Steve for deep diving with us! Great theme!
phenomenal clarity. as always.
Excellent! Clear, thorough and easy to grasp
Absolutely fantastic series Steve!
It is what I have been looking forward to deeply know about something for me.
Excelente video. Muchas gracias
Great video! I really liked the pace, gave me time think while you were explaining.
I will like and second, "phenomenal clarity. as always"
Really good explanation and I can read the codes due to zoom ins.
So clear, thanks alot.
Very clear, very good tutorial
Interesting and helpful info. Thanks!
Very helpful!!!Excellent work!
thank you very easy to follow and understand 🙏
Very clear and concise :)
valuable content. thanks
Valuable content, as always. Thanks a lot!
Love it! Thanks Steve!!
Thanks for this video! Subscribed immidiatelly
Amazing series of videos! Thank you!
gracias !!! es una excelente explicación!!
comment for more recommendations
HI, Steve!
Maybe I'm being dense here, but can you explain why you're encapsulating your code in an IIFE?
I've looked online and the best I can gather is, that it prevents global scope issues. However doesn't putting it in a const already prevent that?
I'm loving the tutorial by the way. Cheers!
The goal is always to minimize things in the global scope and reduce the chances of naming collisions. I will often write code in different ways in different videos to show alternate approaches.
Sometimes I will use modules, sometimes not.
Sometimes I will wrap all the code in a namespace (const APP = { }) with all the code inside the APP object. this approach will use a DOMContentLoaded listener outside APP that calls an init method inside the object.
Sometimes I will wrap the initial function inside an IIFE to start things running.
If you put each function into a const in the global scope then you are missing the initial goals.
@@SteveGriffith-Prof3ssorSt3v3
That's very well explained. I'm usually doing smaller projects by myself, so I'm not very familiar with such techniques.
Thank you!
great video♥
hey steve thanks for the video, i have a question here if i already have created store with some keypath with "Id" and now i want to change the keypath as composite of "Id" & "Name" of the existing store is it possible? if yes then how?
If you want to change the indexes for the database then you have to increment the version and recreate them in the upgrade needed event listener.
@@SteveGriffith-Prof3ssorSt3v3 indexes can be added on existing store but can we change existing keypath of the store/table without deleting it?
Thank you so very much for the series. I watched both this and service worker’s, and I cannot be more grateful. I have a question if I may: around the beginning, you did mention how to protect our indexDB with service worker, but I still failed to realize how after watching all the videos… may you please explain?
I have another playlist on service workers that explains how that part works.
@@SteveGriffith-Prof3ssorSt3v3 i have already watched all of it. Really amazing. But I couldn’t find where you mentioned that particular info.
Steve, I'm curious if the upgrade event was ever meant for migrations or data initialization? For example, if a property needs to be added to a set of data in a newer version of the application and you want to backfill the property values in older data. I'm trying to gauge if I'm making bad assumptions in trying to do something like that within the upgrade event. I'm getting errors that look like "DOMException: IDBTransaction.objectStore: Transaction is already committing or done." Is that event.target.result db only meant for createObjectStore and indexing? Or maybe my issues might lie in an async quark of the wrapper I'm using (IDB)
upgrade is more about the structure of the database. When you change the structure by adding an index or something else, the change applies to all your existing data.
After the update is when you would migrate new data to change the contents of the database.
@@SteveGriffith-Prof3ssorSt3v3 Thanks for confirming.
Hello,
thank you for this amazing TUTORIAL! I've seen the Google and Microsoft video and I didn't understand it.
I need to see the code to understand :D
Also, if there are some entries in the existing collection and I trigger a new version, will this remove all the entries in the store? Or is the upgrade version just to trigger that function to modify the collections etc?
the new version will still have the old data. It is primarily an opportunity to make changes to the structure before working with the database.
What the advantages of making it with vanilla js instead of the library in the prev video
The library from the previous exposes a subset of the abilities with a simple localstorage like interface.
Excellent tutorial. Looking for new team members...Interested in working on a PWA project?
Sorry. Way too busy to take on more projects
Hi Steve, i have a question:
say i have an application with login username and password, and i am creating an store which stores the user data, so say it stores the username for every login, how do i build a store which stores all the usernames in the indexed db and checks for the username before loading the application, thanks in advance
IndexedDB is only on the client side. It only works for the person who is currently using the computer. You need server-side validation for usernames and passwords.
Never save usernames and passwords on the client side.
@@SteveGriffith-Prof3ssorSt3v3 There are indexed Db wrappers that work on the server, but at that point you may as well have a folder full of text files
@@samuelmatheson9655 serverside you should be using something else like Mongo or dynamodb or firebase firestorm, etc. This is meant to be a client side way of implementing temporary document style databases.
Thanks for this series, i'm going to watch it all. I'm trying to follow your example from square one and my database will not create (and according to my debug statements, that 'init' block never executes. I see that the basics of opening the database are inside a function called 'init'. Is there something 'magical' about the 'init' function or 'init' in general? I don't see that your code calls this function directly, am i right? Obviously, it's meant to initialize but as i follow along, if i can't create the database using your methods, i'm wondering how far i will get. I'm sure that the author is too busy to comment, but if anyone reading this has thoughts, i'd like to hear them. I'm learning! :-)
The init function is an IIFE - ruclips.net/video/aHb66qj9-64/видео.html
init just a name. This code can even run without a name there, but it does have to be wrapped in an IIFE
( function( ) { } ) ( );
That last set of parentheses is what makes it run.
It just runs to call the open method and add the event listeners to the indexedDB object.
indexeddb is supported pretty much anywhere - caniuse.com/indexeddb - unless you are using a really old browser.
like
documentation writers should be ashamed
The lip smacking is terrible. :(
Thanks for making this video. Please note that I had to make this change in Index.html to get this running. Running Chrome 104.0.5112.102 I was getting this error.
Access to script at 'file:///C:/Users/damck/source/IndexedDB%20Tutorial/Lesson01/app.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
index.html:83 GET file:///C:/Users/damck/source/IndexedDB%20Tutorial/Lesson01/app.js net::ERR_FAILED
Making this change allowed it to run.
That is a security restriction. IndexedDB and modules are supposed to run only over http, not loaded over file:///