Learn localStorage in JavaScript by building a project! 

Thank you so much for subscribing 😍

Happy to know that Gargi 😀!

I'm glad it was useful 🙂.

Thank you so much 😊

Aameen brother 😄

Thanks! Yes I used a circular overlay and used it in OBS. Search for a video on RU-vid for a guide. 👍

Thanks. I always mention the theme and font in my video description. In this video i used default theme and cascadia code font

Thank you so much for your kind words 😄

Hello bro, would you kindly make a video about deleting and editing items with "local storage", maybe like a note app?

@@kanaung.academy Thanks for the suggestion. I'll try my best to cover this topic as soon as possible 😃

@@Mary-k2p Thank you for your kind words

@@MaxProgramming You're welcome. Please don't stop making videos like this; explaining concepts practically.

Thank you so much 🤘

Thanks! You too!

Selecting options for a dropdown is a little bit different from the input element. Make sure that the data you are getting from local storage actually exists by going to the devtools and Application tab. Undefined means the variable you are referencing does not exist

stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript Look at this to learn how to get text from dropdown

​@@MaxProgramming Thank for your quick answer, I just solved, The problem was that I have to add a name atribute in the select tag, and then just save it like you did in the video.

At 22:35 I set thr values of the inputs to an empty string manually. At that time I think I wasn't aware of the reset method.

Can you reply below with your code?

@@MaxProgramming solved..thankyou

JSON files aren't stored in local storage. Strings are stored. Can you elaborate your question?

As far as i know cpanel is something server side. And local storage is only for client side browser javascript. So if you use localstorage in script tags or js files that run in the browser, you're good to go

Thank you for the suggestion. I will try to do so maybe in the future on a different channel 🙂

Thanks a lot Sudhakar! Really appreciate that 😊

I didn't make a full tutorial on JavaScript as there are plenty of good ones already. The one I'll recommend is by @TheNetNinja

@@MaxProgramming I see, because I really like how you explain things.

@@thefudge Thanks 😁 I hope the tutorial I mentioned helps

Glad it helped Chris ✌️

getItem does not store the data. It GETS the data. setItem SETS the data. Can you send your code and elaborate it more?

@@MaxProgramming let shop = document.getElementById('shop'); let basket = JSON.parse(localStorage.getItem("data")) || []; let items = [ { id: "1", name: "cloths", price: "140", img: "products (1).jpg", stars:"4", }, { id: "2", name: "cloths", price: "199", img: "products (2).jpg", stars:"5", }, { id: "3", name: "cloths", price: "155", img: "products (3).jpg", stars:"5", }, { id: "4", name: "cloths", price: "140", img: "products (4).jpg", stars:"4", }, ]; let generateShop = () => { return (shop.innerHTML = items.map((i) => { let {id, name, price, img} = i; let search = basket.find((x) => x.id === id); return ` ${name} $${price} ${search.item === undefined? 0 : search.item} Rating : `; }).join('')); }; generateShop(); let increment = (id) => { let search = basket.find((x) => x.id === id); if(search === undefined) { basket.push({ id, item : 1, }); } else { search.item += 1; } localStorage.setItem("data", JSON.stringify(basket)); update(id); }; let decrement = (id) => { let search = basket.find((x) => x.id === id); if(search.item === 0) return; else { search.item -= 1; } localStorage.setItem("data", JSON.stringify(basket)); update(id); }; let update = (id) => { let search = basket.find((x) => x.id === id); document.getElementById(id).innerHTML = search.item; calculation(); };

@@_jawad_3090 Contact me on Discord discord.com/users/691360911440609290

W. Salam bhai. I am Indian 🙂

Good question! It would have been better if I had included it in the video but here is the way you can do it. 1. Use getItem to get the students array and store it in a variable 2. Use the Array Filter method to filter out the "students" array and remove one specific student from it (this blogpost will help you understand array filter method: jamesqquick.hashnode.dev/javascript-array-filter-method-practice-in-5-minutes ) 3. Once you have modified the array "students" using the filter method on it, save the modified array in localstorage using the setItem method. Let me know if you were able to implementt this deletion feature ✌

@@MaxProgramming thank you so much! This worked wonders :) Appreciate it!!

Can you show your code?

Did you add the proper name attribute to the checkbox and also the same while selecting it in JavaScript. This happens if the checkbox is not selected properly and that makes it null

@@MaxProgramming Thank you for your extremely quick response, i will have a look at my code now and make changes!

@@MaxProgramming The names match up in the "DOM Elements" section of code as well as everywhere else, so i have no idea what is going on

@@MaxProgramming Would i be able to add you on discord to discuss this issue further? If not, dont worry as i understand that you are most likely busy.

@@Doug-nc2ov Sure! I am busy right now. Drop me a message Usman#7291

Thanks for the comment Rune! Actually arrays in JavaScript are also a type of objects in the end. If you want to check if some variable is an array, you can use this way instead of using the typeof operator. *data instanceof Array;* OR *Array.isArray(data);*

That is awesome! Good luck for your project!

Happy to know that Philip 😄!

Thank you so much for the kind words Aman 🙂!

@@MaxProgramming can you give me personal guidance bro ..like how i can also be that much logistic and be prepared for the interviews

Sure! I'll make a separate video on that in a few days. Stay tuned!

Yes it is technically possible but it's a bad practice. Usually in this case you must have a back-end and a database system. Where you can add user accounts and roles etc. Anyone can open the devtools and change items in local storage. If we want to add roles in this case, you can store the ROLE in localstorage and then add an IF condition to check if the role is NORMAL and ADMIN.

@@MaxProgramming you're very right but my lecturer asked us (beginners) to create it with 1 admin and 4 users. For the solution you gave. Which part of the code do I implement it. Tbh I just learned about localstorage earlier today. It's a bit confusing.

@@ThePrryns okay lemme explain Localstorage is just like an object, and it can contain data that will be available on refresh too. Now in this case, what you can do is you can also add another item in localstorage with "setItem". For the "userRole" as a STRING. That can be either admin or normal.. Then you can "getItem" the "userRole" from localstorage, and you can check if it is equal to "admin" or "normal". Then you can allow the action or not based on that value I don't know what exact problem statement of yours is. But try to figure it out on your own. It might be a fun, challenging exercise and it will require a lot of googling. So don't hesitate to google stuff

@@MaxProgramming oh my thank you much. I understand what you mean. I'm going to work on my code tmr morning. This means a lot, thank you 🙏🏽 ☺️ 👍🏽

EDIT: You can do so. Just add a JavaScript file and get data from localstorage

Really appreciate that Rade! I'm glad you found this as the best one 🙂

@@MaxProgramming I would be grateful if you would make a similar video but crud local storage with a table.

@@rpralica Yes I just started tutorial series of a CRUD app with local storage. Only difference is that it doesn't have table ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-vPy-32qDCK4.html

There is no template for plate numbers in HTML. However if you want to validate accordingly you can use JavaScript with regular expressions or you can use the pattern attribute. More on that here: stackoverflow.com/questions/37611180/html5-input-pattern-for-french-licence-plate-number

What do you mean by "if we already have Dom"? Can you please elaborate?

Can you give me you telegram I'd so, that I can show where I am stuck

@@digitaltanzeel1056 Reach me out on Discord Usman#7291

Good to know 😃

haha good catch 🤣

Because of the styles we have added to the studentsContainer, the background colour is visible if the EMPTY DIV is visible. Hence we set the display to none so that nothing shows up

@@MaxProgramming oh, so there's a default width and height for the div even though it's empty?

I set a background color and it didn't appear 🤔 without using the ternary you mentioned

@@sanjanabhat5032 I haven't inspected the div in that moment but I don't think there is width and height. (Padding might be affecting the issue) Once some content gets added, and it's removed, then it seems like the div still gets displayed P S. Let me know if you've got a better solution...

@@sanjanabhat5032 Then I think you should go with what floats your boat. If it works without the background colour and you want to keep it that way, no problem.