Local Storage & Session Storage [ with Code Examples ]

- Understanding Web Storage API including, localStorage and sessionStorage
- Explaining how companies like Flipkart and Paytm use Local Storage
- How can this will help you in Machine Coding Round of your Web/UI developer Interview
- Code Example for how to use Local Storage functions

Web Storage APIs are used by developers to store data into the browser. Now the data here refers to the key-value pair of strings. Now storing this data can be done by 2 mechanisms: either by using the sessionStorage API and the localStorage API.

So in session storage, the data is stored in the browser’s memory for that specific session. Session more here means until you close the browser window. Unlike cookies, the data in sessionStorage is never transferred to the server while making a network request.

The storage limit of session storage is also very high when compared to cookies. The cookies which can generally store around 4000 bytes of data here session storage can store at least 5 MB of data or even more than that depending on the device and browser. Which is a lot!

If we talk about localStorage, it is almost the same as the session storage but the major difference is that it does not have an expiry. So Even if you close the browser and restart your system and come back again anytime the data persists. That makes it unique and very useful. And among these 3, localStorage has higher memory limit.

It’s used a lot even by many big companies to store some less relevant user-specific data into their browsers. Some companies even use it to optimize the performance of the web page speed as access localStorage is faster than making a request to the server and getting the data.

If you have ever observed many companies like Flipkart and Paytm use localStorage for keeping a lot of data. Flipkart. If you go and check the application tab of your developer console. Then you’ll find out that some information such as browsed products, navigation menu, autosuggest history all this user-specific data is being stored in the local storage.

And if you go and check the localStorage for Paytm you’ll also find that even they store a lot of data such as the recent searches for flights, recent cities you selected and even some session data into localStorage.

One more important thing to note here is that due to security reasons it follows the same-origin policy. Same-Origin refers to the same Protocol, same host, and the same port.

Later half of the video also contains the code demo for the localStorage APIs which you can use to get data, set data or clear data from the storage.

And towards the end, I also share my tips which you can use before your Machine Coding Round of the Interview and can save a lot of time.

If this video was helpful, give it a thumbs up and subscribe to my channel for more such videos. 🔔

If you want me to cover any specific topic, then comment down below. I would be happy to help you.

If you find my videos helpful,
then please support this channel by buying a coffee,

Cheers,
Akshay Saini

Would love to Stay Connected with you ❤️

#CrackingTheFrontendInterview #AkshaySaini

[TheUltimateTrainJourney]

5 saal ho gaye storage use karte karte but itna detail me kabhi nahi sikha great

[tejalbhavsar]

watched so many videos about local, session storage but no one cover like this clear covered and neat thanks

[abhisheksarmah]

The content is very helpful. And, yes I am preparing for machine coding round 😊

Just point out, while I was writing a blog about this stuff, I did found in MDN docs that, the session storage can maximum store 5mb data, which you mentioned as minimum in your video.

[aasthawadhwa]

Commendable work done! Clear, crisp and covered all major aspects of storage. Thankyou.

[mayankgupta]

Thanks for the video.I cleared first round because of this.

[rajasthani_rang]

I like you teaching skill, clear voice, clear voice easy to understand... 👍👍👍👍👍

[himangshuchowdhary]

I think the fact that you use less technical jargons, makes your videos more understandable! As they say.. one can only explain well if he/she has understood it well in the first place.

[VinitKumar-xkdd]

Now this concept gets stored in my brain's Local Storage. Thankyou 🙏

[codingwithgraceandtruth]

Value for time with high quality content. Thank you for your effort.

[itsnewsgalaxy]

Thanks a lot bro.... I was facing difficulties from past 4 days

[PiyushSingh-mttb]

Bro! This is how you explain it to newbies! Great video!

[nimishapundhir]

The way you explain every concept is appreciable like short and crisp and in a very clear way so that every one understands it so easily. Thank you so much ✌️

[Hemant-Singh-dec]

if anyone not understand some concept just watch it again and again, this only video cover all the concept . thanks you akshay sir to provide this concept in short or more understandable form, plz upload videos on some confusion topic

[sourishdutta]

Hey akshay big fan of yours, Thanks for you amazing videos. I will request you to make videos on micro front-end architecture with docker container, it will be very helpful as for the larger application running on Angular or React we need to split our works so what will be the architecture, please discuss this type of things. Thanks again. You great 👍👌

[shubhamh]

Dayummm, never thought of making custom functions. Thank

[saranyaasokan]

your videos are easily understandable, well explained super....Thanks.

[UnderUmbrella]

very informative.. Thank you for explaining so well.

[krishnasraves]

I like the way you of explanation, Good Job Akshay!


I want to add an example which you told in video in the Last with using a function, Please correct me if it is wrong. May be it well helps to other as per coding std.


function createItem (dataKey, DataValue) {
localStorage.setItem(dataKey, JSON.stringify(DataValue));

}
var list = {"Krishna" : "Dandu"};

var list2 = {"Siva" : "Konal"};

createItem("StoreList", list);

createItem("StoreList2", list2);

[mohitnegi]

I Loved It Bhai. Thanks For Clearing My Local Storage Doubts. Keep Spreading Knowledge .

[satendravishwakarma]

Hey man, you are doing a great Job. I wish i could have watched this video before my last interview.. i could have cracked the interview...