Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 962 of the free egghead.io lessons, plus get JavaScript content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Web APIs: Persisting browser data with window.localStorage

4:24 JavaScript lesson by

Local Storage is a native JavaScript Web API that makes it easy to store and persist data (as key-value pairs) in the Browser. In this lesson, we'll walk through using window.localStorage to store feedback a user enters into a form (text) so that even if they close and re-open their browser, they won't loose their progress.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Local Storage is a native JavaScript Web API that makes it easy to store and persist data (as key-value pairs) in the Browser. In this lesson, we'll walk through using window.localStorage to store feedback a user enters into a form (text) so that even if they close and re-open their browser, they won't loose their progress.

Local storage is a JavaScript web API that allows you to store key-value pairs in the browser, even through browser closing and reopening. As an example we're going to build this feedback form which will allow us to enter information and have that information stay in the browser even when it's closed and reopened. So if we enter some feedback here, and now if we refresh the page, we'll see that the data is still on the form, and if we close and reopen the browser, the data is still on the form.

Local storage is just an object stored on the window object, and let's console log that out to see what it contains. So by default there's not anything in it, but to add to it you can treat it just as you would any other object and add properties with the dot syntax, so let's add someCoolProperty. We'll set it equal to 123, and now local storage contains 123. If we want to access that property we can do so with the dot syntax as well, so someCoolProperty will give us back 123, and let's log that out just to make sure it's working.

There you go, we're getting 123. In the Chrome developer tools you have access to the resources pane which shows you what is in local storage. So our coolProperty with the value of 123 is in local storage. We can clear out that local storage manually here, or we can programmatically do it with JavaScript using local storage object .clear method, like so. To build our persistent feedback form let's create a new module called input storage.

We'll define two methods, a restore method which will restore data from local storage to the form if it exists when the page loads, and a save method which will save data as the user enters it into local storage. These two methods will accept two parameters, the first will be the key where we want to store the data and retrieve it, and the second will be the selector of where the user's entering this information. So if we inspect this text area here we can see the class, and we'll add that as our parameter.

Next let's create our input storage module. Let's add our restore and save methods with the key and selector parameters that we defined. Let's add the logic for the restore method. So if the key exists in local storage, let's use that key's value to fill out the form. Next lets fill out the save method, and the way that we're going to save data is when the user enters data into this element here, then we're going to update local storage with it.

So we're going to add the input event listener which will fire whenever the textarea input changes, and then we're going to update local storage with that information. Now finally let's export this module and import into our main feedback file and see if it works. So export the input storage module and import the input storage module from one level up. Let's test to make sure this is working now, going to enter in some feedback, and now let's refresh the tab and the content is still in the form.

Then I'm going to close and open the browser and the data is still in the browser. So we now have persistent data through local storage.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?