Using Local Storage With JavaScript

PREREQUISITES

A basic understanding of Html, CSS and Javascript will go a long way here

You can get the link to the project file here

Quick Introduction

You can store data in your browser and this data can be used for various purposes later. The data is persistent such that after reloading the page data stored is not lost.

Getting Started

HTML:

I’m initializing my html with the following (Using Bootstrap):

<div class=”mb-3">
  <input type=”text” class=”form-control” id=”nameField”>
  <p class=”lead”>Your Name:</p>
  <button type=”submit” class=”btn btn-secondary”>Submit</button>
</div>

We have an input field and a button. What we want is to save the name of the user and no matter how many times we reload the page we never lose the person’s name.

JAVASCRIPT:

<script>
  const storageInput = document.querySelector(‘.storage’);
  const text = document.querySelector(‘.text’);
  const button = document.querySelector(‘.btn’);
  // Event Listener that listens to input
  storageInput.addEventListener(‘input’, name => {
  text.textContent = name.target.value
  })
</script>

The first thing we want to do is to update the paragraph by whatever we are writing the input tag, so first, we initialise variables and link them to the input, paragraph and button elements.

To successfully achieve this objective we would look out for the input event listener and then update the textContent of as the input field changes. This is very similar to managing and changing states in React.

Saving To Local Storage

More JavaScript:

const saveToLocal = () => {
localStorage.setItem(‘textInput’, text.textContent)
}
button.addEventListener(‘click’, saveToLocal)

What this function does is to save to the browser’s local storage, the text content of our paragraph field. Recall that the paragraph field is getting its content updated directly from the input field.

Next, we tell the browser to fire off the function once our button is clicked.

Click the button!

What do you see? Nothing? Me neither.

How then do we confirm this has worked? Open your console: Chrome (Ctrl+Shift+I) On the panel click Applications > Local Storage and look for the id name of the paragraph text.

Console JavaScript

Refresh the page if you like and check again.

THERE’S MORE

We can choose to change the value of the paragraph when we load the page so far as we have a value saved to our local storage.

More and more JavaScript

const storedInput = localStorage.getItem(‘textInput’)
   if (storageInput) { 
     text.textContent = storedInput;
   }

Here we get the value from the local storage using the getItem function and then use a conditional statement to check if there has been data stored to local storage and then set its value to be the text content of the paragraph we have.

One limitation of local storage is that it can only store strings, so how can we store other data types? We can use an object.

Storing Objects

The advantage of using this is that we can store various groups and types of data. Let’s say we wanted to store this data:

let region = {
   city: ‘Lagos’,
   locality: true, 
   number: 8
}

It has three basic data types: string, number and boolean. We can store this object locally using

console JavaScript

localStorage.setItem(‘region’, region);
console.log(localStorage)

We log this to the console and what we see is something like this:

Looking at the nature of the object it is saved as a string and so we need to stringify it to use it properly. We can achieve this using:

let reg_serial = JSON.stringify(region);
console.log(reg_serial);

And the output looks something like this:

Console JavasCript

So instead of storing the region object we store the serialised object and log the value into the console:

localStorage.setItem(‘region’, reg_serial);

To get the data and use it :

// Getting The Object Deserialised
let res_deserial = JSON.parse(localStorage.getItem(‘region’));
console.log(res_deserial);