Example of Using Local Storage

Building upon the idea of the Local Storage, lets look at a simple example where we have an HTML form with fields of data we want to store, and how we can load that data in.

Consider a situation where we need to store a person’s name, and then have it remember them for each time they come back. We also want to clear out all data at some point if we need to.

The Web Form

to set this up first, we’re going to use an HTML form.

    <form>
        <label for="firstName">First Name:</label>
        <input id="firstName">
        <button id="pressme" type="button" >Save Name</button>
        <button id="clearData" type="button" >Clear All Data</button>
    </form>

Obviously this form is very simple, and it will be in a standard HTML5 web page. We have a form field for collecting the name, and two buttons, one for saving the form data, and one for clearing the data from the local store.

Setting Up The JavaScript

To make this easier, we’re going to use jQuery. Now, this is total overkill for what we’re doing, but we want to look at how to make this as simple as possible.

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
        integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>

Selecting elements in jQuery, is like selecting them with CSS, which makes it very easy as you will see.

Configuring the JavaScript Events

Once we’ve got jQuery loaded, we need to apply events. We’ll set this up once the DOM has finished loading. jQuery makes this easy with use of a simple function call back.

        $(document).ready( function () {

        });

Anything we need to configure is going to be within that inner function body as part of the callback.

So first, once we are ready, we’re going to load up existing data, if it exist.

            if (typeof (Storage) !== "undefined") {
                // Code for Retrieving from localStorage
                $("#firstName").val(localStorage.getItem('firstName'));
            }

Next, we’re going to operate the save button. Now typically we’d store more data than this, but we’re playing it simple for the example

            $('#pressme').click( function () {
                saveData();
            });

Notice we’re calling an external function. This helps us group together data, and in case we need to do this operation again, we can reference this function, instead of writing everything out.

        function saveData() {
            if (typeof (Storage) !== "undefined") {
                // Code for storing data in localStorage
                localStorage.setItem('firstName', $("#firstName").val());
            } else {
                // Sorry! No Web Storage support..
                alert('Web Storage not available on this browser.');
            }
        }

The saveData function is not part of the document ready call back, it is its own separate function.

            $('#clearData').click(function() {
                clearData();
            });

Once again, we call an external function, and we’re just going to remove that one property, although we could clear everything if we really wanted to.

        function clearData() {
            if (typeof (Storage) !== "undefined") {
                // Code for storing data in localStorage
                localStorage.removeItem("firstName"); // using the removeItem method
            } else {
                // Sorry! No Web Storage support..
                alert('Web Storage not available on this browser.');
            }
        }

Example of Using Local Storage was originally found on Access 2 Learn