Jonnie Grieve Digital Media: Blog

Blog: Persisting data in the browser with localstorage. (More Posts)

In this blog, I wanted to demonstrate how to use the localStorage property in JavaScript.  Local Storage is useful for the persistence (that is to say make sure the data stays there when the browser is closed) of none sensitive personal data so an application can remember certain settings in an application for the next time it is loaded.  For example, you might use a string value to remember that you put an application into “night mode” when you left it last, or you might want to just “remember” a user’s name.  With localStorage, you can persist that data.

There are some limitations, however. It is important to remember localStorage is not a way to store secure data and can only be used to save String values.

I’m going to demonstrate how localStorage works using a rudimentary example; a form with 3 text inputs.

An example of using localStorage

Here’s the HTML.

<section class="wrapper">
<p> content </p>
<article>

    <form action="index.html" method="POST" id="form" class="main_form">

    <label for="input_1">Input: 1</label> 
    <input type="text" id="input_1" class="input_form" /><br />
    <div class="input_result one"></div>

    <label for="input_2">Input: 2</label> 
    <input type="text" id="input_2" class="input_form" /><br />
    <div class="input_result two"></div>

    <label for="input_3">Input: 3</label> 
    <input type="text" id="input_3" class="input_form" /><br />
    <div class="input_result three"></div>
</form>

<div class="localstorage-form-buttons">

    <button class="btnShow">Click Me!</button>
    <button class="btnClear">Clear Values!</button>
</div>

</article>
</section>

<script src="app.js" type="text/javascript"></script>

Storing string data using local storage

The first thing we need to do is select the various elements in JavaScript so we know what we’re going to do with each elements.  There will be several elements we need to select. These will be the form inputs, div elements to display the value of the local storage objects to the screen, and the form input buttons so we can process the form data.  We can do this using document.getElementById and document.querySelector().

const input1 = document.getElementById("input_1");
const input2 = document.getElementById("input_2");
const input3 = document.getElementById("input_3");

//div spaces to displsy to browser
const one = document.querySelector(".one");
const two = document.querySelector(".two");
const three = document.querySelector(".three");

const mainForm = document.querySelector(".btnShow");
const clearStorage = document.querySelector(".btnClear");

One of the elements we’ve selected has the variable name of “mainForm” which is tied to the form’s submit button.  That is the element we’ll use to perform an action on so we need to write the method that will take care of that, which we do by using an event listener.

mainForm.addEventListener('click', () => {
    //write the code
}

With an event listener, we can tell JavaScript to create local storage in the browser with a click event. The first thing we need to do is make sure we’re getting the value of whatever text is entered into the text boxes.

mainForm.addEventListener('click', () => { 
    
    //Store text inputs
    let getTextOne = input1.value;
    let getTextTwo = input2.value;
    let getTextThree = input3.value;
}

Next, it’s time to put localStorage to work. Local storage works by storing values as strings in key/value pairs… so it has the value as well as the string identifier so it can be referenced later.  And it does this on a method on the localStorage object like this.

// Store something in local storage with setItem 
// Syntax localStorage.setItem('keyName', 'keyValue')
let set1 = localStorage.setItem('input_1', getTextOne);
let set2 = localStorage.setItem('input_2', getTextTwo);
let set3 = localStorage.setItem('input_3', getTextThree);

Since the values we get from the text boxes are string values, we can add them as variables to localStorage.setItem(). They will be stored behind the scenes in the browser and can be accessed via their key, such as  “input_1“, “input_2” etc.  And since variables like getTextOne contain strings, I’m passing that in as the value in localStorage.

We can look at this value by displaying it on the div elements below each text box. By the time the application is done, you’ll be able to assess these values by going into your browser’s DevTools.  This for example is what it looks like in Chrome DevTools.

getItem()

The getItem() method is simpler in that it only takes one argument which is the key name.

one.textContent = localStorage.getItem("input_1");
two.textContent = localStorage.getItem("input_2");
three.textContent = localStorage.getItem("input_3");

We are assigning the text content of the div element to the value of the existing keys in local storage.

So now every time the button is clicked, it will take the contexts of the input boxes, show them below the designated input boxes and will change to update that value on every click.  And when you close the browser tab and reopen it again, not only will you see the local storage keys in the DevTools the red text in the browser will still be there, because local storage is persisting the text.

Clearing localStorage.

Now let’s use another local storage method to remove the key-value pairs. removeItem works in a similar way to get. We just need to pass in the key of the local storage data. We just need another event listener which is attached to the “clear” button.  If we go back into the browser, we should no longer be able to see the key and the value in the browser which means it is no longer keeping track of the string and the value.

Further down in the code we are just ensuring no trace of what was there is there in the browser by setting the value of the inputs to an empty string and making sure there’s no text output in div elements.

clearStorage.addEventListener("click", () => {

    localStorage.removeItem("input_1");
    localStorage.removeItem("input_2");
    localStorage.removeItem("input_3");

    one.textContent = "";
    two.textContent = "";
    three.textContent = "";

    input1.value = "";
    input2.value = "";
    input3.value = "";
});

It has now been removed.  The browser no longer knows anything about a key-value pair and does not list them in DevTools.

When you click on the submit button again

• 3 key value pairs ate generated even if those values are empty (no text was input)
• If a keyvalue pair exists it is updated via localStorage and persisted in the browser
• The key value will remain there with no defined expiration date until the object is removed in the application or browser data is removed via the browser itself.

That’s it for local storage in the blog. You can play around with local Storage by going to my page here and seeing the effect your inputs have on the page by typing in the data, closing the browser and seeing what remains.  Thanks for reading.