No video

IndexedDB Part 1 - Creating and Versioning

  Рет қаралды 19,443

Steve Griffith - Prof3ssorSt3v3

Steve Griffith - Prof3ssorSt3v3

Күн бұрын

Пікірлер: 57
@nisahidayatika231
@nisahidayatika231 Жыл бұрын
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 KZfaq), but important to know (like this one). As a self-learner, your channel really helps me.
@BP-kc3dj
@BP-kc3dj 3 жыл бұрын
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.
@fatihkilic5850
@fatihkilic5850 3 жыл бұрын
Clear and high level teaching. Thank you so much
@bryanathallah8513
@bryanathallah8513 11 ай бұрын
what a great explanation Steve!, from Indonesia 👍👍
@stephanpetersen3600
@stephanpetersen3600 3 жыл бұрын
Thanks Steve for deep diving with us! Great theme!
@ubaidarshad
@ubaidarshad 3 ай бұрын
comment for more recommendations
@user-el9gb4dj8h
@user-el9gb4dj8h 2 жыл бұрын
It is what I have been looking forward to deeply know about something for me.
@omarguzman1112
@omarguzman1112 2 жыл бұрын
Excellent! Clear, thorough and easy to grasp
@SingleWingAcademy
@SingleWingAcademy 3 жыл бұрын
phenomenal clarity. as always.
@grbsql
@grbsql Жыл бұрын
Excelente video. Muchas gracias
@smartsoil
@smartsoil Жыл бұрын
Absolutely fantastic series Steve!
@Ahmed-fq3kz
@Ahmed-fq3kz 7 ай бұрын
So clear, thanks alot.
@savimcgee7443
@savimcgee7443 2 жыл бұрын
I will like and second, "phenomenal clarity. as always"
@JakobPapirov
@JakobPapirov 2 жыл бұрын
Great video! I really liked the pace, gave me time think while you were explaining.
@agent-33
@agent-33 2 жыл бұрын
Really good explanation and I can read the codes due to zoom ins.
@quangpham-qs5oo
@quangpham-qs5oo Жыл бұрын
valuable content. thanks
@mackenzy7121
@mackenzy7121 3 жыл бұрын
Very clear, very good tutorial
@rmnkot
@rmnkot 3 жыл бұрын
Interesting and helpful info. Thanks!
@Kurkkulimu
@Kurkkulimu 2 жыл бұрын
thank you very easy to follow and understand 🙏
@blokche_dev
@blokche_dev 3 жыл бұрын
Valuable content, as always. Thanks a lot!
@sashatv138
@sashatv138 3 жыл бұрын
Amazing series of videos! Thank you!
@user-cd7gi6dh7m
@user-cd7gi6dh7m 3 жыл бұрын
Very helpful!!!Excellent work!
@DanielBeeke
@DanielBeeke 3 жыл бұрын
Very clear and concise :)
@diegoandresyepescelis2786
@diegoandresyepescelis2786 3 жыл бұрын
gracias !!! es una excelente explicación!!
@Colstonewall
@Colstonewall 3 жыл бұрын
Love it! Thanks Steve!!
@1Malak16
@1Malak16 3 жыл бұрын
Thanks for this video! Subscribed immidiatelly
@niallhoran5363
@niallhoran5363 Жыл бұрын
great video♥
@MrBullterrier
@MrBullterrier Жыл бұрын
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!
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 Жыл бұрын
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.
@MrBullterrier
@MrBullterrier Жыл бұрын
@@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!
@randomdamian
@randomdamian 2 жыл бұрын
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?
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын
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.
@ofeenee
@ofeenee 2 жыл бұрын
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?
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын
I have another playlist on service workers that explains how that part works.
@ofeenee
@ofeenee 2 жыл бұрын
@@SteveGriffith-Prof3ssorSt3v3 i have already watched all of it. Really amazing. But I couldn’t find where you mentioned that particular info.
@paulbeaudet1
@paulbeaudet1 3 жыл бұрын
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)
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 3 жыл бұрын
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.
@paulbeaudet1
@paulbeaudet1 3 жыл бұрын
@@SteveGriffith-Prof3ssorSt3v3 Thanks for confirming.
@samueldias89
@samueldias89 Жыл бұрын
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?
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 Жыл бұрын
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.
@samueldias89
@samueldias89 Жыл бұрын
@@SteveGriffith-Prof3ssorSt3v3 indexes can be added on existing store but can we change existing keypath of the store/table without deleting it?
@erey2790
@erey2790 2 жыл бұрын
like
@CyberTechBits
@CyberTechBits 11 ай бұрын
Excellent tutorial. Looking for new team members...Interested in working on a PWA project?
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 11 ай бұрын
Sorry. Way too busy to take on more projects
@Ahmed-fq3kz
@Ahmed-fq3kz 7 ай бұрын
What the advantages of making it with vanilla js instead of the library in the prev video
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 7 ай бұрын
The library from the previous exposes a subset of the abilities with a simple localstorage like interface.
@jimlanpheer5281
@jimlanpheer5281 3 жыл бұрын
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! :-)
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 3 жыл бұрын
The init function is an IIFE - kzfaq.info/get/bejne/l66SaZmiz5-RZmg.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.
@zuberalisavanur1354
@zuberalisavanur1354 3 жыл бұрын
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
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 3 жыл бұрын
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.
@samuelmatheson9655
@samuelmatheson9655 3 жыл бұрын
@@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
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 3 жыл бұрын
@@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.
@samuelmatheson9655
@samuelmatheson9655 3 жыл бұрын
documentation writers should be ashamed
@NavySturmGewehr
@NavySturmGewehr 5 ай бұрын
The lip smacking is terrible. :(
@douglasmckinley-sr1507
@douglasmckinley-sr1507 2 жыл бұрын
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.
@SteveGriffith-Prof3ssorSt3v3
@SteveGriffith-Prof3ssorSt3v3 2 жыл бұрын
That is a security restriction. IndexedDB and modules are supposed to run only over http, not loaded over file:///
IndexedDB Part 2 - Transactions and Requests
12:44
Steve Griffith - Prof3ssorSt3v3
Рет қаралды 9 М.
wow so cute 🥰
00:20
dednahype
Рет қаралды 31 МЛН
Dad Makes Daughter Clean Up Spilled Chips #shorts
00:16
Fabiosa Stories
Рет қаралды 3 МЛН
나랑 아빠가 아이스크림 먹을 때
00:15
진영민yeongmin
Рет қаралды 3,7 МЛН
白天使选错惹黑天使生气。#天使 #小丑女
00:31
天使夫妇
Рет қаралды 15 МЛН
IndexedDB - What is it, and when you should choose it
9:22
WebDevLog
Рет қаралды 32 М.
Service Workers - Controlling Every Fetch Call
19:35
Steve Griffith - Prof3ssorSt3v3
Рет қаралды 10 М.
Service Workers - The Cache API
29:48
Steve Griffith - Prof3ssorSt3v3
Рет қаралды 16 М.
Getting Started with indexedDB
26:18
All Things JavaScript, LLC
Рет қаралды 44 М.
IndexedDB - FINALLY an EASY Way! (with Localbase)
35:24
Make Apps with Danny
Рет қаралды 44 М.
IndexedDB Crash Course with Javascript
47:23
Hussein Nasser
Рет қаралды 49 М.
Simple Introduction to IndexedDB with the idb-keyval Library
24:46
Steve Griffith - Prof3ssorSt3v3
Рет қаралды 18 М.
5 JavaScript Concepts You HAVE TO KNOW
9:38
James Q Quick
Рет қаралды 1,4 МЛН
wow so cute 🥰
00:20
dednahype
Рет қаралды 31 МЛН