Local Storage & Session Storage [ with Code Examples ]

hello everyone this is action I'm back again with another video in my tracking different and interview series so in this video I will be covering three important topics the first one is the web storage API is the second one is how you can use this API is into your normal day-to-day coding and the third one is how you can use this in your machine coding round of your front-end developer interview so without wasting any time let's begin and watch this video till the end and all your doubts will be cleared web storage API is used by developers to store some data into the web browser and this data is nothing but key value pair of strings okay you can say it as a very big object which only contains string so it is that simple now there are two mechanisms to store this data one mechanism is session storage the second one is local storage so when I say we store data in session storage that means that data is persisted only for that particular session so what do you mean by session is that suppose a user is visiting of above and as soon as he visits the web app a session is started and the data which is stored in that session storage may only be persisters till he is on that the browser window as soon as he closes the window or the tab of the browser that data is lost so that is the session storage but it is very useful than cookies unlike cookies session storage data is not being sent to the server while making the network requests calls and also this session storage data has a larger capacity to hold like in cookies you can just store some 4000 bytes of data while in session storage minimum or at least you can store 5 and be use of data that is a lot if we talk about local storage it is just same as this isn't storage but the advantage over here is that it does not clear itself like it does not come with an expiry so even when I user closes the web browser or even if he closes of web browsers tab or even if we shut down the systems and time to come back again to the same web browser and visits the same website data is still persisted in that browser so that is the power of local storage you can keep the data stored for that user in his browser till as long as you want and if we talk about the memory capacity local storage has the highest memory capacity when compared to session storage or cookies and you know what the memory capacity is actually depends on what type of device were using what type of browser you are using it totally depends on that but yes local storage roughly is at least 5 MB for sure if even if you are using a mobile phone I have seen a lot of big companies using local storage a lot and you know what these companies they store some user specific data into their browsers so sometimes you know what like if you have some data which is not very relevant to keep it on the server side they just dump it down into the local storage sometimes they use it for a be testing and sometimes you know it can be used for optimizing the performance of the web apps so you know getting the data from the local storage is very much faster than getting the data actually from the network making a network call and getting the data so sometimes these these websites what they do is they just push down the data into the local storage and fetch it from there instead of just making a network call and optimize these PageSpeed like that so if you check out the most famous Indian startup which is flipkart.com they store a lot of data into the local storage if you just go ahead and check out the application tab of your developer console then you will find out that some of the information such as the browse products navigation menu autosuggest history all this user specific data is being stored in the local storage there then itself and not just the Flipkart so again if you can go ahead and check out the local storage for the again another famous Indian startup ATM comm you will find out that even they saw a lot of data in the local storage so suppose if you are a travel customer on PT m.com this store your Serg flights and recent cities which you have selected and even some more sessions to arrays or session value data into the local storage so now you must have got the answer to your question how you can use this local storage in your day-to-day web apps just like these startups are using to keep this data you can also keep your user specific data into their web browsers if that data is not much an element or if you are performing some AP test or if you want to optimize the page speed of your website so that's how it has done one more important thing about these storage API is is that they follow a same origin policy that is because of the security concerns so due to security reasons they just follow a same origin policy so let me just quickly explain you what the same origin means so the origin comprises of three things the first thing is the protocol which is like the HTTP or HTTPS the second thing is the host or the domain suppose flipkart.com or PT m.com or XS n u dot n and the third thing is the port which is 80 80 or 80 81 wherever your app is hosted so these are the three things which which defines our origin so so when we say that we are setting some data into local storage we are setting this for that particular origin so if we set some local storage data suppose for our origin HTTP access any dot n so where all can be accessed the data from let's take this so can we access this data from HTTP access any dot n slash data dot PHP so can we access that yes we can because we are on the same origin that means our protocol our host or airport all remains the same it is just that we are giving it an extra path so we can access this data over here can we access this data on HTTP access any dot in no we cannot access this over here because we are we are not on the same origin now because it it is disobeying the protocol so the protocol earlier was HTTP and now HTTP so can I access this data on HTTP blog dot accessary dot n so again the answer is no over there because we are again disobeying the host property now so when you put some subdomain over here the host changes so that means our origin changes that means the local storage for blog dot actions any dot in is very different than access any dot n so and the third thing is can I access the data on HTTP actions any dot in colon 8080 so again the answer is no so when the port changes or the host changes or the protocol changes the origin changes and the local storage for each and every origin is different in the browser so that is what the same origin policy in the storage API first to hope this is clear let's move on to the third part of the video where I'll actually show you by the code how local storage works and how you can use it so if you go on to the developer console and go on to the application tab you will see under the storage section you have a section of local storage as well so right now as you can see for our HTTP localhost 8080 there is no key value pair set so here you will see the key value pair of the data which you store in your local storage so how do you set that data let's see first of all so I want you to tell you that local storage is stored on the window object of the browser so window object is the global object if you know it so window dot local storage you can access just because this local storage is on that window object with and you can use this local storage just because it is a browser you can just use it directly like this as well or window dot local storage so if we do local storage the set item which is a function again present on top of this local storage API so it is an API so this set item takes a key and a value so if you see it takes it is a function which takes a key and a value pair so let's State our key as hello and the value as world so as I said these are these can be two strings and this key value pair of strings will be stored in the local storage so if I hit enter it it it fires and it returns undefined and it sets this hello world in the key and value in a local storage so here it is similarly we can set some more so if we said ha again if we try to set it again then what happens is it overrides and if we try to set some other key it will go again and will set like this now then we have said something in local storage how do we fetch data outside the local storage so how do we get data from it so there is one more function for it which is get item so in get item there is one argument which you have to pass that is the key so if we want it if you want to check what is stored against hello so we'll see that okay if all two is stored against hello and that's how it is that's how you access the values from local storage now there is one more important function local storage dot remove item so when we say local I local storage dot remove item and we pass in some key maybe suppose hello one and we press enter so it removes our data from local storage this specific key value pair it removes and if we do something like local storage is not clear so it will it will automatically clear everything from local storage so now our local storage is empty now when we said so these are all the major functions which we use while accessing local storage but I wanted to tell you one important concept which will help you in your machine coding round of your front-end developer interview for that generally we don't store the key value pairs of these strings okay so we generally have some objects which we want to store in our local storage so suppose if we have one two but but there is a problem local storage accepts as strings but we want to store some objects so suppose if we have a object user and we have suppose name and suppose the name is actually and we want to store this user object inside our local storage so if we try to do I'll show you what problem we face so if we to store something like set item set item and we try to store our user object like this so it gets stored like this so now if you can use can you see the challenge over here so what problem with did we face is the browser atom when we do subset item this dysfunction over here tries to parse this object into the string so if I do something like strength and I will try to convert this object to a string it will give us object object but do we want to store it like that if we again go and fetch this user item so what we'll get let's check so see we'll get this object object but we wanted our original object right so how do we do that let me clear the console and do that once again so if we want to store a local storage some object into our local storage what we will do instead is we will just use a copy and we will store it something like this Jason dot sin dot stringify actually so what we what this will do is this will string if I our object and stores it in to our local storage see now you can see we have a user copy where the object is originally stored like an object and when we get the data out of this local storage now will get it properly now we will get it properly something like this now again if you see this is a string so generally when we get this data out of local storage we generally want to do something like json dot parse over this so now we got an actual object from the local storage so local storage is very useful but these small things are a little gotchas while you are doing it in your machine coding round so sometimes when you have to use local store machine coding round you will end up facing such problems where these nitty-gritty things which can hinder your performance like even one women even one minute is really very important machine coding round I don't want you to waste that in just doing this string manipulation and transformation so generally what you can do is prepare yourself before the interview as well so how you can prepare is just just create your own function before they interview something like get local storage and set local storage data so create this these functions before in hand local storage data some your own functions which you can use instead of these local storage what set item and get items and underlying to this just Jason dot stringify and Jason dot parse to make the same functionalities what these functions are doing so I am trying to say that try to develop your own small library which which will expose some sets to a set local storage data and get local storage data and similar functions but you don't have to worry about all these transformation and translations while handling our objects or arrays or maybe functions or any any sort of random code you put in just try to handle those cases in this our local storage data and wherever you want to use this in your code instead use your own functions so that will be helpful and will save you a lot of time while you are doing your machine coding round of interview so I hope this helps and thank you for watching so that was all about the web storage API sets and so arrays and local storage if you liked this video then do give it a thumbs up and also go ahead and check out the other videos in my cracking different and interview video series that will help you a lot and also don't forget to subscribe this channel and hit the bell icon so that you get notifications for all the upcoming videos and you never miss any update so that's all for now and thanks for watching

Channel: Akshay Saini

Views: 159,240

Keywords: local storage, session storage, local storage javascript, session storage javascript, local storage limit, session storage limit, web storage api, local storage vs session storage, akshay saini javascript, javascript tutorials, javascript interview questions, frontend interview questions, frontend tutorials, javascript fundamentals, Same Origin meaning web, local storage code, local storage code examples, session storage examples, local storage vs session storage vs cookie

Id: MOd5cTJ6kaA

Length: 14min 52sec (892 seconds)

Published: Sun Jul 28 2019