Introducing LocalStorage
In our first session on web storage we will start working with the localStorage object. The local storage object enables you to save information on client end.
The way to work with the local storage is very easy. If the object has been implemented all we need to do is start adding into it properties just as we would with any other object we would create ourself. Click on the play button let's see it in action.
Video Transcript
00:00Alright, so let's start the session and funny enough that I say the word session is because
00:05we're going to be talking about session storage and local storage and we're actually going
00:09to start with local storage.
00:11Local storage's information is just like cookies if you know what they are and it enables
00:16you to save information for later usage when the client comes back onto your site.
00:22So let's see how that works.
00:23You can also use it while the user is still on the site, saving information about the
00:26user or actions of the user, enabling to create a more customized experience of the user so
00:32they don't have to come back to whatever page they came originally from, basically for example
00:37maybe adding a bookmark onto the page, enabling the user to go back to the page that they were
00:42last at, for example, without needing it to be saved on your server.
00:46Alright, so let's take a look and see an example.
00:48So I'm going to, first of all I started a local storage example, literally it's just
00:53a basic HTML page, was kidnapped from zero2geek.com with a limited feature with less fonts and
01:00less heavy and such of that nature and a more thinner CSS file.
01:06Alright, so first of all let's get familiar with it.
01:10The object itself is called local and let's make this nice and big, local storage.
01:17Now the way it works is incredibly easy.
01:19All you have to do is just basically add a new attribute.
01:21You could just put a dot and just add a new property.
01:24So for example we might want to add a new property and call that property maybe h1.
01:30And we could call that Ben's new data.
01:35Alright so now we saved Ben's new data into this new h1 and how about we now just go
01:41and maybe go and input that information directly into maybe our h1 titles.
01:48Let me just zoom down so we could find maybe where one of our titles are, we're in the
01:55body.
01:56Let's find some copy here and we will go for dynamic title, here we go.
02:02So we have an id dynamic title.
02:04All that's really left for us to do is to go to our document, get element by id and
02:11then just input that information, get that title and we could update that inner HTML
02:18and just send into that inner HTML basically the information that we wanted to store which
02:24will be our local storage h1.
02:27Now so far not that impressive.
02:29We could do that, save that and once we go into our browser and click on refresh we
02:34should be able to see that our information will be updated to Ben's new data.
02:38Now as we're doing this recording this doesn't work on Safari but I'm quite sure that at
02:43some point it will.
02:45So literally right now if you do go to Safari you'll see that it doesn't work on Safari
02:49at this stage so we're not going to worry about Safari, we're going to work on Firefox
02:53because this is a new feature that isn't fully supported on all browsers yet.
02:57Now the really big feature about what we just did and if we look at it it's just simple
03:02enough just like a regular object.
03:05The greatest thing about this is basically that it enables us to basically go right
03:09into our browser, imagine that you close the browser, came back in, clicked on refresh
03:14and your data will still be there.
03:16So let's just make this a little bit more dynamic before we wrap this up.
03:20How about we put here maybe some extra copy, maybe local storage, visit count and let's
03:28set that to basically be, well we could have your question if we have, if there is
03:36a value in it and if there is no value in it we might want to set it to be one else
03:47we might want to just bump it up by one and we could save that and literally what we're
03:53doing here is we're updating our local storage count basically enabling us, oh here we want
03:57to put the value, I messed that up a bit, let's break a line so it's easier to see.
04:03So we'll put here one if it's a really original first time we've ever done it and if it's
04:07not our first time we've ever done it then we're just going to count up our visits
04:11so we have your if and we have your else and literally all that's left for us to
04:14do is go back into our browser, go back into Firefox and just, oh let's add that into
04:20our title so we could actually see it, right?
04:23So I'm going to concatenate it right into the title that's there and let's word wrap.
04:30Alright, so I'm going to just put that local storage visit count right into it and let's
04:39give it a roll, go back to our browser, click on refresh and now we should be able to see
04:43that this is our first visit and now it's our second visit and now it's our third visit
04:48and we could even go into another window and in our new window basically do the exact same
04:55thing and suddenly we have your four and if we go to the other window and click on refresh
04:59on it it will know and update the information and it's, throughout the experience the session
05:05is updated automatically, well the local storage variable is updated in all the different
05:09windows of the user as the user updates and changes them as long as they're in the same
05:15browser, right?
05:17So that gives, that's the basics of working with local storage and in the next video we're
05:21going to look a little bit more deeply into a few ways where you could set your item
05:27and get your item.