JavaScript Cookies vs Local Storage vs Session

hello everybody kyle here from webdev simplified in today's video we're going to be talking about the three main ways to store data inside of a browser which are local storage session storage and cookies we're going to talk about the differences between the three as well as how to use all three of them so let's get started now now before I get started talking about the differences between cookies local storage and session storage I first want to talk about the similarities between the three all three of them are being stored on the user's actual browser that they're using so if they're using Google Chrome it'll be stored in their Google Chrome if they're using Firefox it'll be stored in their Firefox and so on so that means that any cookies or local storage or any of that that's saved on a user's browser for example Chrome will not be available on another browser on their same computer for example Firefox so it's browser independent also users do not share cookies and local storage between them so if you set the local storage for a certain user none of the other users of that site will be able to see that because it's stored on that user's computer only and nowhere else so this is really meant for storing information related to a single user and it's not important if this information gets lost for example since the user can always delete any of their cookies local storage or session storage at any time so now let's talk about the differences between them there's kind of two categories here local storage and session storage are very similar in how they interact and they're only different in a few instances while cookies are almost completely different than the other two and are also quite a bit older than the other two to get started cookies can store only a much smaller amount of information the capacity here is four kilobytes for most browsers while local storage and session storage can hold 10 megabits and 5 megabits respectively this means that cookies are going to be much smaller than local storage and session storage but that's okay for their use cases also cookies are supported in older browsers which support HTML 4 because they're been around for much longer but that's not really something you have to worry about because HTML 5 is in pretty much any browser being used now also cookies and local storage are available for any window inside the browser so if you have Google Chrome open on one tab or another tab the cookies are going to be available on all the different tabs that you have open to that website while for example section storage is only available in the single tab that you have open that you set it in so it won't be available if they open another tab and go to your website as for expiration this is where local storage and session storage really differ from each other session storage is for that one browsing session which is why it's called session storage and it is removed as soon as the user closes the tab where that session was set while local storage is around forever until the user ends up deleting it or you delete it yourself inside of the code and then cookies you actually have to set when they expire usually you're going to either set an infinite expiration for example a year very very far in the future or you're going to want it to expire in a certain timeframe to see if the user has done something in that timeframe but you have complete control over when the cookie actually expires as for storage location local storage and session storage are both on the browser like I said earlier but cookies while they are stored in the browser they are sent to this server every time a user requests something from the server whether it's an image HTML file CSS file anything the cookies get sent along with the request which is why they have a much smaller capacity because all the information in the cookies gets sent to the server so if you have a lot of cookies that are really large it'll slow down your request to the server and the requests coming back from the server this is why you want to make sure the cookies that you use are small and as limited as possible so you don't slow down the request any more than you need to it also makes cookies really good for doing certain authentication related tasks because they actually get sent to the browser or to the server from the browser unlike local storage or session server storage and that's really all the main differences between the three for the most part if you're going to be storing something in the user's browser you're almost always going to want to use local storage or session storage depending on how long you want it to live whether you want it to be for one session or if you want it to live after they close the browser and you only really want to use cookies if you need the aspect of sending it to this server because if you don't need to send it to a server you're just adding extra head and cookies are much harder to deal with so you should always use local storage or session storage unless you need to send it to the server so now let's look at a few examples of cookies local storage and session storage over here I have Visual Studio code open on the left and I just have my chrome dev tools open on the right for the web page so everything I type inside of my script is going to show up in the console here for example we can just do a log could you say hi and if we say that you say that's going to show up in our scripts over here on the log so if we wanted to start messing around with the actual different storage mechanisms of local storage session storage and cookies we need to figure out where we can view that information in google chrome dev tools and right here this application section is where all that information is going to be stored so if you click on that you'll see we have local storage information session storage information and cookies available and you can see that they're all going to be for this actual site that we're on which is my localhost and if you don't actually see this up in the top just click these little arrows on the side and it'll be in the list over here for you but for me it's just right on the top so we can just go straight into it you'll notice that at the beginning all of these are pretty much empty except for my session storage I'm using a plug-in and Visual Studio code called live server so every time I save my JavaScript it'll reload my browser and it just uses this session variable inside of that plug-in so we can ignore this variable right here for now and then also if my cookies are completely empty so to get started let's start with creating some variables and adding them to our local storage in order to do that we need to access the local storage variable in JavaScript just type in local storage and we have a few methods here that we can use we have the get item which will allow us to get something inside of the local storage remove item which will allow us to remove something and then finally what we want which is set item which will allow us to set an item inside the local storage and this just takes two parameters the first is going to be a key and the second will be the value the key is what you're going to use when you want to get to remove something and the value is what you're going to get when you get that keyed item think about this as a JavaScript object or a JSON object you have your keys which are before the colon and then you have your values which are going to come to the : and in this case everything has to be a string value and a string key so for example if we wanted to put a name in here we could put our name as the key and they could put the value of Bob for example and if you save that you see that we now added this item to our local storage with the key name and the value of Bob and we could get that item out of the local storage so we could just say local storage dot get item and all we do is we pass the key that we added to the set item which is named in our case and to make sure this is working we're just going to do a console dot log here and if you save that you'll see that Bob is going to show up in our log because it's getting that value from here in our local storage and now if we remove this line that sets that item and save it you see that this local storage item is still in there even though we're not resetting it every time the page refreshes and that's because local storage like I said is persistent just like session storage but session storage would end if we closed out of the browser so now let me remove this so we just click clear all and now we no longer have that item in local storage so we can see what happens if we try to get something that doesn't exist and as you see we just get an old being returned saying that they couldn't find the item that we're looking for so let's go back here add in the code to add that name back in there so we have it and then let's talk about how we can remove that item inside of the code so we can just do local storage dot remove item and again pass it the key we want to remove and if we save that you see that that local storage item is completely removed now session storage works exactly the same as local storage all the methods are exactly the same so we just use the session storage object instead and as you can see we have our get item remove item and set item methods and we're just going to quickly cover something up here we're going to do name again and we'll just put John in here for this one and if we save that go to our session storage section you'll see we have name with the value of John then we can try to print that out use that name key again and we want to make sure that we actually log this and if we say that you'll see that we're getting John printed out because it's getting that from our session storage and then lastly we can do session storage dot remove item and we can again pass it the key that we want to get rid of and if we save that you'll see that our key is being removed from the session storage and that's all there is to session storage and local storage they're really straightforward to get working with and you can kind of think of them as like a JSON object or a JavaScript object we have key value pairs that you can interact with by setting them and removing them if you wanted to update something inside of the storage for example if we wanted to update this name from John all we would do is just do set item again but we would just change what we want to set it to so we can just set it to Bob and now if we saved it you see it overrides the value to be Bob just like if you had a JavaScript object and you set a value of something that didn't exist it would create it and if you set the value of something that existed it would just overwrite it but then what we have left is cookies and cookies are much more complicated and quite a bit different to work with than session storage and local storage so let me explain how they work now unlike session storage and local storage cookies don't have a very nice interface for interacting with them the only way we have to interact with cookies is through the document dot cookie object and this object both will allow us to see all the cookies and set new cookies so if we wanted to create a new cookie we would just set this value of cookie equal to the cookie we want to set so in our case let's say we want to set the name again and we're going to set it equal to another name we'll just do Kyle for example if we save that and go down to our cookies you'll see that we have a name here value for name we have the value of Kyle and then a bunch of other sections here we have the domain that it comes from the path that it comes from let me expand this so we can see it all easier so we have the domain here which is just our localhost we have the path which we can set when we create the cookie in our our case it just defaults to the page that we're on we have the expiration and as you can see the expiration date is far in the past its 1969 because we didn't actually set a date that this should expire so it's already expired and then this is just the size we don't really need to worry about that so what if we wanted to set an expiration date for our cookie all we have to do is go into here and actually specify when we want it to expire so we would put a semicolon here after our name to denote that we're going on to another section of our cookie and then we just put expires and then we just want to put the date that we want it to expire in our case we want this cookie to expire on January 1st 2020 so we need to add the UTC string of January 1st 2020 on to this expires token and the easiest way to do that is with JavaScript dates because they have a to eat UTC string method on them so all we need to do is create a new date we want to pass it the year that we want 2020 we want to pass it the date and the month so the month will be 0 here because it's 0 indexed and the date is going to be 1 this is January 1st 2020 and we can just say to UTC string on this and what this is going to do is it's going to append that UTC string onto our expires section and now please save that you'll see that our expire section here if I can expand that it expires on January 1st 2020 which is exactly what we want if for example we wanted this token or cookie to never expire all we would need to do is just make a date that's so far in the future it'll never matter so for example we can just put year 9999 and if we save that you'll see that it now expires in your 9999 which essentially means it's going to never expire now we can also add other cookies by doing this exact same thing all we have to do is just say document dot cookie equals and it'll add a new cookie instead of overwriting the old cookie so let's just say we wanted to add another cookie this time we're just going to say last name and here we can just set it to Smith and we'll also make it so it never expires and if we save that you'll see that we now have two cookies in here even though it looks like we're actually overwriting the cookies this is really just adding a cookie every time we say cookie equals and if we want to view the cookies there is no good way to view the cookies other than viewing all of the cookie information all at once the only way we have to view is through the document.cookie object so we can just say document.cookie and if we print that out you'll see that it prints out name equals Kyle and lastname equals Smith but there's no easy way for us to parse that other than just parsing this string itself so I recommend if you do need to work with cookies in any way to use just a small library that helps manage cookies and makes them easier to use kind of like local storage and session storage are much easier to use rather than having to remember how to do all of this string related stint acts and how to parse the actual document dot cookie string that's returned but like I said at the beginning of this video most of the time you're just going to be using session storage and local storage since those are stored in the browser and not actually sent to the server and in most cases you don't need the information sent to the servers hope you guys enjoyed this video and learned about the differences between session storage cookies and local storage and how you can use them to store user information on their browsers if you guys did enjoy this video please make sure to subscribe to my channel for more videos just like this and check out my videos over here which are going to be more JavaScript elated content so with that thank you guys very much for watching this video and have a good day

Channel: Web Dev Simplified

Views: 330,037

Rating: 4.9541464 out of 5

Keywords: webdevsimplified, javascript cookies, javascript cookies tutorial, javascript local storage, javascript local storage tutorial, javascript session storage, javascript session storage tutorial, javascript cookies vs local storage vs session storage, javascript browser storage, javascript browser storage tutorial, javascript storage, javascript storage tutorial, javascript storage comparison, local storage, cookies, session storage, javascript tutorial beginner, javascript tutorial

Id: GihQAC1I39Q

Length: 14min 27sec (867 seconds)

Published: Sat Jan 12 2019