Saving User Input in JS Objects

[@cristiandragusin3814]

Maaaan, that voice turns this tutorial into a fairytale 👍

[@scottdouglas2490]

I subscribed right away😂

[@mk-vg1mx]

@@scottdouglas2490 same!

[@rishika_gupta22]

0:03 and I'm down here just to say THIS MAN SHOULD START MAKING PODCASTS!

[@mewillson]

Steve, I can't thank you enough for this example. I have a new web / mobile app I am creating where I was really struggling with how to pull the data from the forms, push it into a list and then into local storage. I have looked at dozens of KZbin videos and gone done many rabbit holes along the way. Your example helped me to succeed. Clear, straight forward and easy to understand example. Please keep up the good work.

[@sharmajiNaveen]

Hi guys i am from India and came to this channel and got surprised Because of esay explanation Its really likeable

[@micah_erosa]

Steve, Thank you so much for explaining these little details. I'm new in Javascript and I wanted to know how to store those inputs from user in a storage for my thesis. I can't understand complex things as of the moment so I needed someone to explain these to me and Im glad I found your channel. Keep doing this, please. You're a great teacher. Thank you!

[@johnkovach2148]

Steve. Thank you! Complex --> Simple (once one tracks what's going on under the hood). I really appreciate your brain.

[@23Kattayopp]

Steve, whenever i click on one of your videos after searching what I need to learn, I hit the like button and only then i watch it, because it's clear for me that you're going to help me with whatever programming issue I have. Can't thank you enough, you were born to teach and explain. Take care!

[@indianathe3rd742]

Who would've thought that I would hear such a voice and great explanation.

[@kenosabi]

Dude you just became my hero. Thank you for explaining WHY and not just stating syntax. I want to be a better programmer not a faster typer. This is such an overlooked nuance in the YT coding realm. Solid stuff. Were also 4 minutes in and I've yet to hear about your amazing course that'll make me a full stack developer in 43 seconds. Subscribed.

[@IshaanSharmaRoarke]

Thank you so much. I like how you explain why you wrote a certain code. Really helps to understand the code rather than memorising it.

[@erennakdag]

I can't even begin to explain how much this helped. It is suprising how many videos I found here were either not helpful or missed crucial details but you made it all clear. Thanks man!

[@s.akhtarjoomun263]

I stopped the video before 2 minutes and had to subscribe. This is the kind of teaching I'm looking for. I'm gonna continue watching now.

[@seanfinegan1076]

Great tutorial. Thanks for walking through the "How's" and "Why's" rather than having a "Just copy me" approach.

[@SteveGriffith-Prof3ssorSt3v3]

Too many tutorials out there are just watching someone build one version of one project. I aim to help people understand. 🙂

[@soundwavenation5969]

Question: i dont want it to display on my page,i just want to store(new user) it as a object in my javascript or anywhere and give same functions as other code ,can i do that using js?

[@SteveGriffith-Prof3ssorSt3v3]

You can save the data in a JS variable on your page if you only need it while the page is open in the browser. If you want it the next time they visit the same page using the same browser then you would use localStorage or IndexedDB. If you want the data available from other browsers then you need to send it to the server via fetch( ).

[@KennieDevCamp]

This is really beautiful. Gave exactly what I needed and more. Very brief and nailed it

[@kyliegrass9026]

I love this so much. I can't express how grateful I am to find this video! Anyone interested in adding this to a form you are creating I just learned you can hide the msg to make this more secure using CSS HTML line 27-29 I didn't want the data to show to the user, only show on the backend. I used CSS to hide it: #msg {display: none;} This helped me being a newbie so I hope it helps another!

[@coming..back..in..2027]

I wish I saw your channel a year ago, to be honest is it the best and you explain it like mixing two ingredients.. love it thank you

[@facetzmielca]

NOBODY explains things so well. Thank you!!!

[@tannerormanoski2707]

This was amazing Steve 💯 I very rarely comment on videos, but this tutorial was spot on! Please never stop🙏

[@lucasteles3574]

The way you explained this made me insta subscribe. I don't even know what content you make but it doesn't really matter. Thanks, Professor Steve.

[@eliottbrown6959]

What are the odds than I'm doing my first project to end the precourse material right now. Happy to see my bootcamp of choice uploading these helpful videos!

[@raven.4815]

Man, you made it so easy I'm crying lol. I was stuck with this problem FOR HOURS and you just saved my butt, thank you so much!

[@confidential02]

amazing video i was actually doing the same as you and thought why it would not add the object to the array it turned out i had a simple logical mistake when checking if everything was not empty

[@fizag.designer5283]

I was facing the issue of retrieving data from input form to local storage. This video really helped me to solve that issue. Thanks Steve sir!

[@Observe411]

Wow, the context and clarity is really helpful here.

[@muhammadsohailabbas6343]

no words to explain how much I am thankful to you.

[@HaLe-gc8nb]

More JavaScript vids please. Your explanations are really clear. Subscribed 👍🏼 keep up the good work I really need this in my life

[@garettclement6671]

You're an awesome teacher! Just a suggestion though, could you consider writing all the code as the viewers watch.. It helps learners explore the mind of a pro in terms of approaches to solving programming problems. Explaining an already-written code is cool but someone can easily get lost along the way. Thank you and keep educating

[@SteveGriffith-Prof3ssorSt3v3]

I do that in most videos. Sometimes I start with more code to save time while explaining it. Especially if it is a lot of code that I explain and write in other videos made around the same time

[@rasulali4690]

Brother your voice and tone are just fascinating. You was just born to be an voice actor or the guy that makes trailers sound so badass. English is not just my native language even though im sure you guys will get the point

[@rasulali4690]

In fact, after this video when I hear myself I sound to myself like a goddamn chicken lol

[@rasulali4690]

Look, Simba. Everything the light touches is our kingdom. A king's time as ruler rises and falls like the sun. One day, Simba, the sun will set on my time here, and will rise with you as the new king. Lol I can do it all day

[@SteveGriffith-Prof3ssorSt3v3]

@@rasulali4690 lol

[@SteveGriffith-Prof3ssorSt3v3]

@@rasulali4690 dont think I will ever be on the same level as James Earl Jones or Morgan Freeman. 🙂

[@BlackDev]

Got me a new teach love the in depth knowledge on why it works not just how

[@AllCarsEvolution]

Thanks a lot for "prevent default". You really helped me to save my time (I already spent half of a day to solve this problem).

[@pruthvirajjadhav3853]

that's the reason I subscribed ! thanks for telling every small thing .

[@hickehelbro]

That voice tho. I subscribed immediately! Great content. Did exactly what I wanted! Thanks!

[@PigNe0]

how would could I make it possible for me to access the data that is inputed? You can't do it through local storage because that is only for that user right?

[@SteveGriffith-Prof3ssorSt3v3]

Correct. You have to send the data to a serverside script that saves it in a database.

[@ChadVick]

Thanks, Steve! I like your teaching style.

[@Plusdok-le1uk]

thank you for sharing but i couldnt find the file of json in local folder i need to save and after that get that same json and add and delete is there any video or documentation for that , thanks

[@SteveGriffith-Prof3ssorSt3v3]

localStorage does not create a local file that you can open. localStorage is a place in memory, within the browser, where strings can be saved with an associated key. You have to use the localStorage methods to save or read those values. If you want to learn more about localStorage, this video - kzbin.info/www/bejne/gqaQlnWqjrmFeLs - can help. If you want to save data to actual files, then these tutorials talk about doing that. kzbin.info/www/bejne/sKKVqXdjrdp8fZY kzbin.info/www/bejne/g6Sro6Gqg6tjkJI This video talks about Chrome dev tools for storage kzbin.info/www/bejne/Znu8ZaKHeZtpgpY

[@umbertopolanco4159]

Steve!!!! Thanks for your dedication to these awesome videos. So I'm using part of this tutorial for an app that I'm developing. Do you have a tutorial that would demonstrate saving the data to a server?

[@SteveGriffith-Prof3ssorSt3v3]

For uploading data, this tutorial covers all you need - kzbin.info/www/bejne/aKS0aqufeqaLhNE I have a playlist on MySQL - saving data in a MySQL database, I also have a playlist on PHP - building webpages and talking to the database. And I am currently recording a video on how to use SQLite in NodeJS to save data. It will be part of the NodeJs playlist.

[@zanetrain1651]

Only half way through and I'm already really impressed by this video. Great job. Best one ive seen regarding this topic.

[@katkodes6055]

Professor Steve to the rescue, twice in 2 days! Subscribed.

[@streetphysics8528]

Greattttt work mannnn, I was stuck in a project but your video helped me out and saved my time

[@septimusforster]

Programming is supposed to save time and resources, like this video of Mr Steve's. Arigato-gozaimasu, sensei.

[@RicardoManuelArana]

Hey, Steve. I'm sorry to ask but what's the point to using objects?. I have read many forums and watched videos and though I understood how to create them, thanks to your video as well, I still don't know how to properly use them. I mean, when I sing-up on a website, besides ending up on a SQL Database, is my information being stored as an object as well?... I'm really lost about it.

[@SteveGriffith-Prof3ssorSt3v3]

99% of what you do in JS is with objects. Your data is an object. Each of the form elements your typed in are objects. Functions are objects. The only things that are not objects are numbers, strings and boolean (and a couple other primitive values)

[@RicardoManuelArana]

​@@SteveGriffith-Prof3ssorSt3v3 So this is why they call it the famous P.O.O. Got it. Great tutorials, I loved your example here.

[@RicardoManuelArana]

Hey, it's me again, I got a question, maybe I'm confused but why didn't you use "this.title", "this.year". function Person(first, last, age) { this.firstName = first; this.lastName = last; this.age = age; } I know "this" references to the object / class itself, I found what you applied here: www.w3schools.com/js/js_object_methods.asp But still confused. They always use examples with manually inserted data or things like that.

[@SteveGriffith-Prof3ssorSt3v3]

@@RicardoManuelArana The use of `this` in JS can be confusing to many people at the best of times. `this` in JS is quite different than `this` in other Object Oriented languages. I avoid it as much as possible because even minor changes to how my code samples are used or combined with other can break if `this` was part of the solution. I've done a bunch of videos on `this` and prototypes and classes to explain those concepts. Bottom line, I don't need to use `this` to make any of this work.

[@RicardoManuelArana]

@@SteveGriffith-Prof3ssorSt3v3 Hey, hello. Can't believe it's been 3 months since that interaction. So I'm back on Objects, now that I understand most of the video. So I did this, but no matter how I try, the array stores the object, but it overwrites it after every submission. I've been to stackoverflow, seen similar issues but with other things. Any Idea Steve?. As far as I coud learn, this should work just fine. var buttonAddBook, book, availableBooks; buttonAddBook = document.getElementById('buttonAddBook') ; buttonAddBook.addEventListener('click', addBook) ; function addBook(e) { e.preventDefault(); book = { title: document.getElementById('bookTitle').value, author: document.getElementById('bookAuthor').value, year: document.getElementById('bookYear').value } availableBooks = [] ; availableBooks.push( book ) ; document.forms[0].reset() ; }

[@hakeamgureh2441]

Hey Dr. Griffith. What if you want to save user inputs in a FormData() object? Is it the same? What is the difference of saving user inputs in a normal JS object Vs saving it in a FormData() object?

[@SteveGriffith-Prof3ssorSt3v3]

A FormData object has the encoding to send everything via a POST call with a fetch / xmlHttpRequest call. It uses "multipart/form-data" encoding. It also has the various methods to let you create entries including for things like file objects.

[@indiajackson5959]

This was amazing!! I've been looking for someone to explain this for months!! Thanks!! Now I need to figure out how to send this information to the AWS S3 bucket!! Thanks a ton!!

[@kieranryan4718]

This is awesome. Super clear and well explained. Great job!

[@ericle1236]

Great tutorial. Explained every line of code concisely. Thank you sir.

[@ghazalehfereidouny4133]

Hi Steve. Thanks for the tutorial, but I have a problem here: If I don't check the array element in the console, All the elements get added to the array. However, the second I click on the array element to check if it's added the objects or not, then I can no longer add any objects to the array. In this video you clicked on it and you had no problem. Could you help me find a solution?

[@SteveGriffith-Prof3ssorSt3v3]

Whether or not you display anything in the console should not impact any of this code. If there is a javascript error on the page then, when you click on the submit button the form will get submitted and the page will reload. The ev.preventDefault( ) will be ignored if you have a JS error.

[@emilioconde8782]

Thank you for explaining what going on in the block of code. saved the grade

[@cfuman]

Thank you my friend, greetings from Greece!

[@PramodSingh-kc1ne]

but if I refresh of open the document again and try to add another movies the previous ones get deleted. what should i do.

[@SteveGriffith-Prof3ssorSt3v3]

Every time you call setItem you are overwriting what was in localstorage previously. Are you writing an empty array?

[@manju_kura]

As a beginner this helped me a lot ^^ thanks. I only programmed in java before but i did really good there. For example artificial intelligent. And now i wanna do something else. Thank you for the great start ^^

[@PigNe0]

why do you use 'let' instead of 'var' when declaring a variable inside of the

[@SteveGriffith-Prof3ssorSt3v3]

Let and const are much better for good coding practices. I stopped using var years ago

[@jorge_the_first]

Amazing video!! Clear, simple and direct! Subscribed for sure!

[@andresmoge6398]

Hey! Your videos are great! Your voice is like a masage. And the content: always right on point. Special stuff. Logic logics and enjoy every bit of it! Thanx🙏🏻

[@blacknight88]

Great easy video on my quest to learn web development. For a moment, I thought you was Agent 47

[@joeltorres1237]

You're a developer favorite over at JavaScript academy. Keep up the great work with JavaScript and CSS. Also great use of descriptive language and never assuming the obvious.

[@SteveGriffith-Prof3ssorSt3v3]

Thanks!

[@SteveGriffith-Prof3ssorSt3v3]

Is that Chris Ferdinandi's Vanilla JS Academy?

[@joeltorres1237]

Yes it is! Your videos have helped. Devs reference your links quite often.

[@larryjasontueno9016]

Thank you very much. The others tutorials i saw didn't show the array method

[@alexvarga425]

I have a page with a table and if I refresh the page the table will be deleted and I need to build it again. How can I save the table to remain there even if I close the page?

[@SteveGriffith-Prof3ssorSt3v3]

You need to save data that you want to keep in a more permanent place like localStorage or send it to the server to be saved in a database.

[@mennnoo8719]

So Im working on a similar project, aside from array how can I store a movie title rating out of 10 and a description ?

[@SteveGriffith-Prof3ssorSt3v3]

Use an object with three or four properties {id:1, title:'movie', rating:4, description: '' } Then you can have an array of objects to hold all the movies and their ratings.

[@ruudkorunka]

Thank you for your explanation, Steve. My name is Ruud, living in Amsterdam, Holland. I am working on a star rating system using html, css and javascript. The user input will be saved into a separate file. I cannot get it done. Can you help me out? Thanks in advance.

[@SteveGriffith-Prof3ssorSt3v3]

I did a basic tutorial about this here - kzbin.info/www/bejne/moGmm2mHoNZkabs For saving data in a localfile start with this: kzbin.info/www/bejne/sKKVqXdjrdp8fZY

[@KDXkid200]

I cannot seem to get the preventDefault function to work properly. My page still reloads. Any thoughts on how to fix this? I am following this video step-by-step

[@SteveGriffith-Prof3ssorSt3v3]

If there is an error in your script the page will ignore the prevent default and do the submit anyway

[@rafinhavutuvul]

Thanks so much Steve, I was looking for it and youtube has suggested me your video... Super clarifying, congratulations!

[@Emzumaki]

How would i display this information on the browser, for example displaying the movie names under the movie textbox every time you submit?

[@SteveGriffith-Prof3ssorSt3v3]

This playlist tells you everything you need to know about updating content on the page - kzbin.info/www/bejne/hWelf5mAr5ilndU

[@nunyo5280]

Great tutorial and very helpful! I searched and searched and you nailed it all. Thank you so much!

[@fatemahaje8980]

I really want to thank for your amazing and understandable way

[@sairak3514]

Is saving in Local Storage the only way of keeping data? I mean except using server. When the browser reloaded, I lost all objects in movies array variable.

[@SteveGriffith-Prof3ssorSt3v3]

webStorage (localStorage and sessionStorage) is the most common and easiest way to store data locally in the browser. webSQL is supported in some browsers but has been deprecated. IndexedDB is another alternative but is much more complex to use that webStorage. cookies were the original way to save data but they are limited in size and there are security considerations when using those. All JS variables will be lost when a page reloads. They get created when the page loads. You can use the page loading as an event to trigger your access of localStorage and read the values into your variables at that point.

[@MN-fl3hb]

Phenomenal. You were born to teach.

[@mennnoo8719]

Bit confused so why is your javascript in your html file?

[@SteveGriffith-Prof3ssorSt3v3]

I do this in demos sometimes so it is one reference file for my students.

[@_o.magnata]

I'm making a Todo list app can I save the taks using local storage? And if I reload the page the info will continue on the screen?

[@SteveGriffith-Prof3ssorSt3v3]

You can save it in localstorage. When the page reloads you need to get the data from localstorage and rebuild the content

[@_o.magnata]

Thank you so much man.

[@indianathe3rd742]

Are you winning Son?

[@juamp_m]

First of all, man, your voice is AMAZING xD. The video was exactly what I was looking for, but I still have one question, how can I send that JSON file to the server so I can use it for example in a python script that is living in the server scope?

[@SteveGriffith-Prof3ssorSt3v3]

Thanks. You can use fetch to upload the JSON data. I have a playlist on AJAX that gives lots of examples of fetch and sending data in different formats.

[@juamp_m]

Steve Griffith Thank you so much again 🙏🏻

[@peshotod]

This is good tutorial, but I am having issues with it Steve.It save it in local storage and when I refresh the page even though the string disappear from the screen it stays in the local storage.But when I put new name and year in the form after refreshing it delete the old entries in the local storage and replace them with the new entry.Also when I click the button on empty form it delete everything from the local storage and replace it with empty string it doesn't store them in the storage.

[@SteveGriffith-Prof3ssorSt3v3]

That is exactly what it is programmed to do. localStorage stays there when you refresh the page. It only gets replaced when you call setItem(). It you call setItem( ) with an empty value then that will be the new value in localstorage. If you want to keep the old data and add to it then you need to get the old value out from localStorage, and then combine it with the new value in JS, and then replace the old value with your new one using setItem(). setItem( ) always replaces the old value with a new one.

[@ivanjoshuaalutaya5581]

Sorry I'm just new in javascript, is this considered as Javascript OOP?

[@SteveGriffith-Prof3ssorSt3v3]

There are a few things that would be considered object oriented like the event listener attached to the document and the button and the way the reset method is called on the form object. It's not written in a functional programming way. So, you could call this Object Oriented JS.

[@moharrammoharrami3957]

I can't thank you enough, it's exactly what I needed. You're one of the best teachers I've ever seen, it's brief and exactly to the point. I'm new to web development and I completely understand it. Just one question: is there anyway that I can save that data to a JSON file instead of local storage?

[@SteveGriffith-Prof3ssorSt3v3]

You can take the data and pass it to JSON.stringify. Then that JSON string can be uploaded to a server as the body in a fetch call. Eg with FormData - kzbin.info/www/bejne/gKWuepanj8l_gq8

[@moharrammoharrami3957]

@@SteveGriffith-Prof3ssorSt3v3 Thank you so much.

[@fredericoamigo]

Great vid! But how do you save to database? I know how to do this using PHP, but out of curiosity, i want to know how to do this using javascript.

[@SteveGriffith-Prof3ssorSt3v3]

If you want to save it locally in a database then IndexedDB is what is available - kzbin.info/www/bejne/bJeuYn5obcqii6M If you want it in a database on the server which is available to more than just the one user, then you have to upload the data with fetch to a server-side script that can talk to the database. kzbin.info/www/bejne/bXaulpWYabuIj7M Then on the server-side you can use PHP, Ruby, NodeJS, or whatever language you want to save it in whatever database you are using. Server-side JS is NodeJS. kzbin.info/www/bejne/i36uhGmpqp17h8U

[@metifu]

will this save entries that have the same name to different index or will it overwrite the existing?

[@SteveGriffith-Prof3ssorSt3v3]

This basic setup will overwrite the existing. It is just a simple demonstration of putting form values into a javascript object. You can also use FormData objects to hold the data - kzbin.info/www/bejne/fYitmXhtgc6WoNU

[@ExistentialSadness]

Dear Steve, thank you for the amazing tutorial! Can I use this code for my personal project? Thanks!

[@SteveGriffith-Prof3ssorSt3v3]

Sure. I'm teaching people how to do things. All my code is freely available.

[@binayakbishnu]

This is great Better than explanations i have got in univ

[@chuckyyes]

is there a way to view the stored information that you typed on your device to view the same stored information on a separate device that you have not typed the information basically have the stored permanent stored information be viewed on other device like computers and phones? appreciate if you can answer this

[@SteveGriffith-Prof3ssorSt3v3]

Not directly. Localstorage is temporary local data. If you want something permanent that can be viewed from other devices it must be uploaded and saved in a database on the server.

[@guitarrazocapomil]

Thank you very much! you made me realize an error i was making and it was taking me to my "breaking point"

[@clusion1405]

The voice just wants me to learn more lol

[@jadenataylor]

Are you using React? I didn't know you could put script onto the html part

[@SteveGriffith-Prof3ssorSt3v3]

This is not using React. You can add script inside your file but it is not a good practice for production. You want your scripts to be in their own files so they can be cached by the browser

[@jadenataylor]

@@SteveGriffith-Prof3ssorSt3v3 Thanks for the quick response!

[@jadenataylor]

@@SteveGriffith-Prof3ssorSt3v3 Okay, this was helpful, thank you.

[@ashleycroucamp9186]

As i used this code, exactly what i wanted, i get a typeError "cannot read property 'addEventListener' of null... How would one resolve this issue.

[@SteveGriffith-Prof3ssorSt3v3]

Any time you get an error message that says "cannot read property 'x' of null or undefined" it means that whatever you wrote in front of 'x' is the problem. That variable is empty.

[@ashleycroucamp9186]

@@SteveGriffith-Prof3ssorSt3v3 Thank you appreciate it !!

[@longboy659]

Thank you for the tutorial, one issue I have though is the instance not saving when I refresh, I thought saving to local storage like this retained information even when refreshing

[@SteveGriffith-Prof3ssorSt3v3]

It does. The information is still in localstorage but you need to read it from localstorage when the page loads.

[@harsh_here]

Thank you so much!!! Cleared all my doubts.

[@jbuscaTV]

great video..do you have sample of retrieving function from a local storage without using database? is it possible?

[@SteveGriffith-Prof3ssorSt3v3]

Here is my video about localStorage - kzbin.info/www/bejne/noCmioGanNiInNU and another one talking about caching data with localstorage - kzbin.info/www/bejne/nJaZo3ahbMZpq5I

[@priyadesai8227]

How to check or validate here if the field is empty or not after submitting the data and then display it in console?

[@SteveGriffith-Prof3ssorSt3v3]

Every bit of data that comes from the HTML inputs will be a String. Always. The falsely String value is an empty string. So, take the value of the input and call the trim( ) method to remove extra trailing or leading spaces. Then you can use an if statement on the result. If it is falsey then you know it was empty. Video about truthy and falsey kzbin.info/www/bejne/gGWxZ3iKe9WXoaM If you are using fetch to submit the data to the server then you will still be on the same web page and still have access to all the original data.

[@akshatbhatawdekar4487]

I have tried local storage I am able to save it succesfully but whenever I reload it the inputs gets erased They show up in local storage but not on the form

[@SteveGriffith-Prof3ssorSt3v3]

When a page reloads a form goes back to its initial state. If you want the data from localStorage to appear in the form then you need to getItem( ) to pull the info from localStorage and then assign each of the values to the inputs.

[@readbeforeyoureply64]

Man i've been struggling a lot with this thank you for the help.

[@VirtualVortex4356]

Thank you! so much for the tutorial. Can we fetch this data and send this to a json file?

[@SteveGriffith-Prof3ssorSt3v3]

Yes, you can send data to the server with fetch. Whatever you are sending to the server is generally a String that gets formatted in some way - multi-part/formdata or application/json, etc. So you can take your data and JSON.stringify it and set it as the body of your fetch. OR a use FormData object. - kzbin.info/www/bejne/gKWuepanj8l_gq8

[@tizibinki3946]

ist there a way to connect the "Clock to Add" button to an other part of the site(like from index.html to index2.html)?

[@SteveGriffith-Prof3ssorSt3v3]

A button click can trigger either a change in CSS to hide and show different parts of an interface on the same page or it can be used to trigger navigation and loading of a new page. When the new page loads you will have a whole new set of variables. Variables from the previous page will be gone.

[@tizibinki3946]

@@SteveGriffith-Prof3ssorSt3v3 Ok thanks

[@alisaeedi1528]

Your voice is so good and you're a good teacher

[@Alexander-re8vz]

man your voice is heaven

[@TheSNdoubleB]

Do you think the Basic Attention Token Could be Worth 300$?

[@sandrakommos6401]

Hello Steve, I'm a beginner in web development and this helped me a lot however I was wondering how can I add the validation in that code, I'm making the registration page so i must make sure the user have entered all his data so it can be added to the array could u pls help?

[@SteveGriffith-Prof3ssorSt3v3]

Sorry. I haven't made a video on form validation yet.

[@fash9340]

Hi thanks for all, how long does data remains in local storage?! How about sending to another place. I need your technique for the time that server crashes but data is coming and receiving successfully but since they can not be shown on the page they are not able to store in database. For this case I am trying to find a solution to save data in text to be able to use them later. Do you have any idea?!

[@SteveGriffith-Prof3ssorSt3v3]

It depends in the platform. On iOS for a standard webpage it will remain for 7 to 14 days. Other platforms it is permanent except when you start to run out of space. There are limits by domain and by browser that vary between platforms. Localstorage is a great way to make a temporary cache. Alternatives are to use indexedDB and make a PWA with a service worker. I have playlists on all three of those.

[@fash9340]

@@SteveGriffith-Prof3ssorSt3v3 so many thanks. You are the best.

[@aadil4236]

I tried to store an array of objects in to the local storage but it's only storing one object at a time, whenever i tried to store another object into the arry it's overwriting the previous one. My code is as follows, function store(book){ let list =[]; list.push(book); localstorage.setItem('book', JSON.stringify(list) ): JSON.parse(list); } I don't what's going wrong here but it's not working as i intended Please help me Steve.

[@SteveGriffith-Prof3ssorSt3v3]

You are starting with an empty array. You need to start with your old array, push the new object, then put the new version of the array into localstorage

[@aadil4236]

@@SteveGriffith-Prof3ssorSt3v3 i don't have an old array, list is the first time i am initiating an array then I'm adding new objects to localstorage

[@SteveGriffith-Prof3ssorSt3v3]

@@aadil4236 What I'm saying is, if you use that same code every time then you will be creating a new array with one item and saving that to localstorage. localstorage ALWAYS replaces what was in the key before. It never does updates.

[@aadil4236]

@@SteveGriffith-Prof3ssorSt3v3 ohh..!! Thanks a lot man, i did an if else statement and it worked My code is as follows, Function addToLS(bookObject) { let arr; if(localstorage. getitem(books) === null) { arr = []; } else { arr = JSON.parse(localstorage. getitem(books)) } arr.push(bookObject); Localstorage.setitem('books',JSON.stringify(arr)); } Thanks a lot Mr.griffith, you're a very good teacher.

[@poojay.g7221]

@@aadil4236 what is book object!? which u r passing to a function..please help me out...I too need the same thing

[@sitaraanil8285]

hey i like ur video its rly well explained but i do have one doubt: how do u do this using radio buttons?

[@SteveGriffith-Prof3ssorSt3v3]

Radio buttons have a value just like any input element. Works the same way except the radio buttons will have one of their group with checked set to true

[@xviewmytubex]

Hi there! This totall flew over my head, but that's ok as I'm learning. I was searching for tutorials on hardcoding forms data with Javasript and I chose your vid. I'm trying to learn how to write a function that saves data entered in forms in hardcoded fashion and basically redisplays it afer being entered/submitted. Sort of like the function for creating a payable (invoice), and after all the data is entered in respective fields it is saved/re-displayed hardcoded. Any tips on where/how to start? Thanks! =).

[@SteveGriffith-Prof3ssorSt3v3]

For what you are describing you would need to have server-side code and a database too. When a form gets submitted it means that the data is being bundled and sent to a web server. A new web page is returned from the server containing the saved information. To bundle form data you can use JSON which would be generated from the JS Object described in this video OR a FormData object. kzbin.info/www/bejne/b57LqqJnrLZ6m6s kzbin.info/www/bejne/fYitmXhtgc6WoNU and then either the JSON or the FormData object get sent to the server kzbin.info/www/bejne/gKWuepanj8l_gq8 What you do with the information on the server is a whole other area. It can be done with a variety of programming languages - PHP, Ruby, J2EE, NodeJS, ASP.Net, Python, etc. And the database that holds the information can be any DB that you want.

[@xviewmytubex]

@@SteveGriffith-Prof3ssorSt3v3 Oh boy! I sure know how to pick the fundamentals! Lol. I've never learned JSON, AJAX, others. I can start thanks to your pointer! Thanks! =).

[@nip_slip269]

so how can i style each user input, like make the id title year info into one box and make it look nice instead of just being text

[@SteveGriffith-Prof3ssorSt3v3]

kzbin.info/www/bejne/gXeuhJaEfcZgbq8

[@SM-uv1rr]

Awesome explanation Steve. Thanks a lot.

[@waleed28ful1]

Thankyou soo much fort his beautiful Explanation