JavaScript LocalStorage and Session Storage API Tutorial

hello and welcome today we are exploring the web storage api with session storage and local storage let's get started today we're learning about the web storage api now the web storage api is not part of the dom i'll highlight that here because it's important to know and it's not the first thing we've actually worked with through this javascript playlist that is not part of the dom and instead it refers to the window api and i'll give you some examples it's currently available to javascript via the global variable window and really we want to refer to window with lowercase so i'm going to change that we do not usually have to type window though it's implied and therefore when we have worked with it in the past you haven't seen me type the word window but let's look at an example of this we could have a window dot alert and say ok and that is exactly the same as just typing alert and saying okay they would both result in alert windows or alert pop-ups and we can see that it's halfway hidden so i'll just click on the browser now you can see the page i have open as well as the console but here's the first alert and then here's the second alert we got the same result from both and so that is essentially referring to the window global variable there and we're accessing that alert just like we would with a prompt or a confirm through the window api now we've also used location or window.location and that returns the url of a website and likewise we don't have to type window in front of it either so i'll do one more example i'll save that we get the pop-ups and we get the url again i'm using live server here in vs code so we get the local ip address 127.0.0.1 and then the port number 5500 that we're viewing through our just our local live server serving our application so that is an example of the window and we're going to do the same thing with storage when we access the web storage api we're going to access session storage and local storage and they could both start with window dot i could type local storage or window dot session storage so let's get started with that the first thing we need to do is have some data to store so i'll just define my object and in my object i'm going to have name and i'll put my name and then i'm going to go ahead and put a method in here and i'm going to just call it log name put a function and in this anonymous function that we put for the log name method i'll put console.log and we'll have this dot name and that should work for our object now let's go ahead and make an array too so i'll have my array and my array is going to hold eat sleep and code code there we go i'll save both of those and so now we have some data to work with let's make sure for just a second that our method is working save that and yes we get dave in the console the method is working just fine so when we go to store something and let's use session storage first now for session storage it only keeps it the data during the session and that is while we're on the website or possibly logged into a website and once we close out of the browser and close our session that data is no longer stored local storage will store persistent data and it will continue to store that data in the browser but not attached to the open tab or the even the open browser so we can reopen our browser go back to the same website and retrieve that data that would be persistent data and we're going to store persistent data in the local storage so let's look at how this works we'll start with the session storage and the first method we would use is to store some data and that's not git it's the set item now we need to name the store what we're going to store in there so let's name this let's name it my store just something generic like that or even better my session store so we know what we're referring to and then we need to store so we'll store my object and then we'll take a look at where the browser actually stores this and see what we have in there so we save that and you would go to the application tab and mine is right here at the top but you if yours is not you can click the arrows and it will drop down and show you the different tabs available let's go to application then storage then session storage and you can see there's a couple of things in here one is from live server but the other is my session store that we named and you can see it's storing object object now that might look familiar when have we seen that before it was when we were working with json previously in this javascript playlist we worked with json and json only stores string data so that could be what is happening here let's go ahead and retrieve this and see if we get the same result and we'll put my session data as our variable and we'll set this equal to session storage dot get item now we just need to specify the name of the item that we're retrieving and we're retrieving my session store and then after that let's go ahead and log my session data and see if we get what we're expecting in the console as well we know what it stores now and it says object object we look in the console and yes we got object object back as well and that's definitely not what we want so something's going on there let's investigate just a little bit further by trying it with my array instead of my object and it might shed some light on what is happening so we're going to store my array and then we're going to retrieve that data so let's go ahead and store it and retrieve it now we got the data in return but does it look like an array we've got eat comma sleep comma code this may not be an array even though we did get something that is a little bit more like what we wanted so let's use the type of keyword in our console log and once we save that we can see that we're getting string data in return and all of that is because that is how session storage and local storage in the web storage api work they only store string data and if it's not string data it will attempt to convert it to string data and that should sound familiar because that is much like working with json and so that makes using the web storage api with json an ideal way of storing data so let's backtrack here and we'll store our data as json and that should make a little more sense now when we look at our object we need to remember that when we convert to json we convert an object to json it will not keep the methods it's only going to keep the properties we have defined so let's go ahead and well the first thing i'm going to do is move my array above my object and then i'm also going to copy it here because we're going to want to use my array by itself as well but i want to put another property in here and i'm just going to put hobbies and i'll store that array as well i'll save that and now we've got my session store still storing my array but what we really want it to do is store json dot stringify and then put my object into the storage let's go ahead and do that and you can see we do get a string of data already returned but it is a string and we worked with this of course in our previous experience with json as well this is just a string it's not an object when we get it back and we want to get an object back as well so what we need to do is use json on the outside of this and call parse and let me get that to wrap it's not showing as well so we'll finish the parse here and now we save that now we have an object with an array that returns in our console and i click that you can see the hobbies show with the three elements in the array here and then the name property as well so we don't want to just get string data when we send json to our session storage or our local storage we also want to get json back and convert that back into an object if that's what we're doing now let's go ahead and just work with the array and if we do this with the array which is what we did before we got a string if we'll remember it just said eat sleep code it wasn't really our array so let's see what happens if we go ahead and use json with the array as well attempt to stringify that we got that okay and now let's parse it when it comes back oh i missed something on line 17 one more parenthesis there we go we got eat sleep code back an array just like we wanted and so using json stringify and json parse as we use local storage or session storage just the web storage api in general that is what helps us get back and actually keep the data that we want to keep so we store it as a string but then we can retrieve it and it can turn back into the array or the object that we need it to be of course json does lose methods through the conversion through stringify so it does not keep methods in an object that we may have all right this is session storage now the only thing we need to change for local storage is the word session and this is really my persistent data if you will because this data will stay even when we close the website and relaunch so let's look at this application tab again and now under local storage we have a local store and it has the array in here we can clear these out as well just to make it look like we had left the website if we wanted to what i'm going to do is close this completely and then we'll reopen it so we'll stop our live server and now i'll click go live again and i need to bring the tab over we'll open up dev tools on the application tab let's look at session storage it's gone we have the live server in here but our other data is gone and i did not clear it before even though that was an option but under local storage we still have the local store we still have the data even after i closed the browser and reopened it and that is how we have persistent data even after we have left a website and maybe we don't revisit it for a few days we come back and there the data is again this might work in a web application for to-do list or a high score in a game and of course many other options but these are some projects we might want to consider as beginners and we move forward with our local and session storage okay before we stop working with the web storage api there are just a few more methods and at least one property we need to cover so let's look at some of those and one of the very first ones actually i'll put it before we log anything to the console so we know it is actually taking effect is remove item much like get item it is not too complicated we just say local storage and then we'll say remove item and we need to name the item so that would be my local store and now when we try to log the my local data well i guess it grabs my local data before that so let's change which line this is on now let's see what happens when we try to log the my local data variable it is null so if the data does not exist and we attempt to get it it will return null and we need to be prepared for that just in case so remember that if you tried it or attempt to pull data out of storage and it is not there or the key doesn't exist which the key was the name my local store it will return null and so that is good to know now besides remove item we could instead of just removing one item we could simply clear all of the local storage for the particular website or web app we are visiting and of course the result of logging my local data when it doesn't exist is the same it is just returns null we've cleared out everything though if there was more than one name of local data say there were several items of local data it would all be gone if it was all in that local storage or if we did the same to session storage these methods work with either one now we can also return the key the key is the name and so let's look at that local storage and then we say key and we have to give the position the index a number of where that is so this is if they had several items in local storage we would say the first position would be zero just like in an array so that would be the key and let's go ahead and just name that key for now and i'll log key here and i missed an initializer and oh yes missed the equal sign save and there's my local store which was the name of our store when we saved it they're in the first parameter position of set item and then once again we refer to it when we get the item or we remove the item but it is the key and so we referred to that and that was the first key in the local storage if there were more items in local storage we could of course send those index positions and there is a way to find out how many items are in local storage and that would be local storage dot length now remember there could be other items in local storage for other websites this would be how many are in the local storage or the session storage if we specified that for this particular website or web app so i'm just going to change this to store length and we'll log this and there should just be one and that is exactly what we have in there and now i'll go to the application tab i'll look at the local storage and yes we've just got one in here there's the key it's called my local store and that's pretty much it so we'll pull this back up we've gone over the get item method the set item method actually we set the item first and then we retrieve the item with get item we could remove the item we could clear all items we can specify the key to get the or we can specify the index position in local storage to get the key return and we can also use the length property to find out how many different keys are in the local storage for that particular site or web app and i keep saying local storage it's either local storage or session storage either one of those two just depends on what you use and we did use both throughout the tutorial hi i'm dave and i hope you enjoyed this tutorial remember to keep striving for daily progress instead of perfection subscribe to my channel and ring the bell to be alerted when i post new tutorials i'll see you next time

Channel: Dave Gray

Views: 1,454

Keywords: local storage javascript, session storage javascript, local storage, session storage, localStorage, sessionStorage, local storage tutorial, session storage tutorial, javascript storage tutorial, web storage api, web storage, persistent data, javascript local storage, javascript local storage tutorial, javascript session storage, javascript session storage tutorial, javascript browser storage, localstorage javascript, javascript localstorage, javascript localstorage tutorial

Id: zmFDvFwj6-8

Length: 19min 1sec (1141 seconds)

Published: Thu Oct 22 2020

Reddit Comments

[u/DaveOnEleven]

This JavaScript LocalStorage and SessionStorage tutorial demonstrates the Web Storage API. We'll compare Session Storage (sessionStorage) and Local Storage (localStorage). We'll look at why JSON works so well with web storage. You will learn how to store persistent data for users between their visits to your web app. Let's get started!

Subscribe ➜ https://bit.ly/3nGHmNn

✅ Quick Concepts outline:

JavaScript Web Storage API

(0:00) Intro

(0:14) Web Storage is part of the global window object

(4:02) Session Storage

(4:22) Local Storage for persistent data

(4:48) setItem

(5:28) The dev tools application tab

(5:50) What type of data does web storage store?

(6:20) getItem

(7:50) Why JSON is the perfect match for web storage

(12:15) A look at localStorage for persistent data

(14:15) removeItem

(14:55) Retrieving an item that does not exist

(15:25) Clear all items

(15:55) Get the key at a specific index position

(17:10) Return how many keys are in storage

Was this tutorial about the web storage API with sessionStorage, localStorage, and persistent data helpful? If so, please share. Let me know your thoughts in the comments.

JavaScript LocalStorage and Session Storage API Tutorial: https://youtu.be/zmFDvFwj6-8