A Complete Guide to LocalStorage in JavaScript: Part-2
import localStorage from ‘JavaScript’ ;
Before starting this article, I want to take a moment to thank you guys for so much loving and support to the first part of this article, I got an amazing response on that and many people texted me saying it was amazing and they are eagerly waiting for the second part.
So yes, your wait is over, and lets get started!
Let’s recapitulate what all we have covered —
So last weekend, I released the first part of the article, “A Complete Guide to LocalStorage in JavaScript: Part-1” in which I introduced you with the theoretical details of the JavaScript localStorage, which were as follows —
- What is localStorage?
- Methods and Properties provided by Storage Object
- Browser compatibility with localStorage
- Limitations of localStorage
If you want to read the full article, here’s the link —
What are we going to do?
I have been thinking a lot about the project idea that we can build together in order to have a good understanding of how localStorage works.
And yes, I got this amazing idea of building a ‘LOCAL TAPAS MENU’.
here‘s how it looks…
Project Specifics
Through this project you guys are going to learn about two thing:
- Local Storage
- Event Delegation
In this project, you can add dishes in the menu, you can check in and check out the dishes and whats cool thing about this is that even if you refresh your page, you see that your menu items are still there.
This means that we are going to persist our state using localStorage.
Whats Event delegation?, and why are we using this in out project?
Event delegation is a simple technique by which you add a single event handler to a parent element in order to avoid having to add event handlers to multiple child elements.
In our project we have to use event delegation because when we add a dish in the Local Tapas menu, we also want to check in and check out the dish, which means we are trying to create an ‘onClick’ event listener on a element which is not even created. And you know that if an item doesn’t exist, in future you can not click in it. This problem will be addressed using the JavaScript Event Delegation.
To view the live project, you can follow this link: Demo
Development is On!
First I’ll present the gist of HTML and CSS file used in the project. You might not face any problem understanding it. All the logic for localStorange and Event Delegation is implemented in the JS file.
I’ll explaining all the concepts involved in the js file.
HTML Structure
CSS Styling
JS — The logic behind everything …
So what’s Happening ?
Okay, so let’s go through the JS file displayed above. There are three main functions that are taking care of everything:
- addItem(…)
- populateList(…)
- toggleDone(…)
Before I go on explaining the complete function, first let me talk a bit about this JSON.parse(…)[line 3] and JSON.stringify(…)[line 46]
In localStorage, data is not saved in the same format as it is used in JS code. In you browser, open Browser tools > Storage > Local Storage and you will find this —
We see that the data is stored in key: value pair. Value contains the name of the dishes that we have entered with done status.
JSON.parse()
The JSON.parse() method parses a string and returns a JavaScript object.
[line 3]: In this line, we are checking if items already exist in the browser or not.It exists, then convert it into JavaScript object and display that, else return [].
JSON.stringify(…)
Whenever we add anything to localStorage we need to convert it into string, this is where JSON.stringify(…) comes into picture.
[line 46]: JSON.stringify(…) is going to convert our object of arrays into JSON strings
Functions —
- addItem(…): It’s called whenever a user adds a new dish. It pushed the new dish in the array of items and calls populateList(…) to re-render new array of items.
- populateList(…) : It’s rendering the complete array of items.
- toggleDone(…): It’s taking care of the check in and check out functionality and also calls populateList(…) to re-render the array whenever it encounters a change.
Congratulations!! You have successfully developed a JavaScript project implementing LocalStorage!
Conclusion
We did it! If you followed along with me through this whole tutorial, you should have a really good feel for localStorage now. To summarize, we have divided the article into two parts. The first part deal with the theoretical understanding and conceptual details of how to implement localStorage in JavaScript. The second part(this article) covers the implementation and in-depth explanation of localStorage and also develop a cool Project.
This article should have given you a good understanding of localStorage in JavaScript. There is much more to learn and improve, but I hope you feel confident delving in and playing around with localStorage yourself now.
Please let me know if anything was unclear, or if there’s anything else you’d like to see in this or a subsequent article. Feel free to reach out to me anytime if you want to discuss something. I would be more than happy if you send your feedback, suggestions.
Thanks a lot for reading till end. You can contact me in case if you need any assistance:
Web: https://portfolio.abhisheksrivastava.me/
Instagram: https://www.instagram.com/theprogrammedenthusiast/
LinkedIn: https://www.linkedin.com/in/abhishek-srivastava-49482a190/
Github: https://github.com/abhishek2x
Email: abhisheksrivastavabbn@gmail.com
