Javascript Local Storage

__del__ | __delete__ | exp | find | JavaScript | locals | log | mean | power | sin | split

Michael Zippo 04.11.2021

Web applications can get very complicated, very quickly. One thing I’ve learned as a developer is that you can do a lot with old JavaScript if you give it the chance.

The localStorage API is a powerful built-in feature that eliminates the need to use databases for simple applications that do not require a server. We may use this API to locally store data items accessible by our application.

In this guide, we will explain how to use the localStorage method in JavaScript. We’ll see an example of using localStorage to save the contents of a form for later on a web page. Let’s get started !

What is localStorage ?

localStorage is part of the Web Storage API. This API allows you to store data that your application can access in a user’s browser.

The Archive API is useful because it means that you don’t need to submit all of a user’s session data to a database. If a user turns on dark mode on your site, you can track them on the client side; if a user saves a form for later, it is not necessary to store the partially completed form in the database.

There are two types of web archiving. localStorage is data that will remain in a user’s browser window even after closing the browser tab. Unlike cookies, localStorage data is provided without an expiration date. sessionStorage is data that lasts until a session expires or the browser is closed.

In this article, we’ll focus on the localStorage object. However, you can replace it with sessionStorage because they both use the same syntax.

How to use localStorage

Before going deeper into our example, let’s take a look at the methods offered by localStorage.

To create a localStorage entry, we can use a method called setItem () :

Our code returns:

localStorage stores items in key: value pairs . In our example, we created an element called "name". This element has the value "Linda Carlton".

We used a console.log () statement to print the contents of localStorage in order to ensure that our value has been added.

You can use this same code to update a value stored in localStorage.

To retrieve a particular value from localStorage, you can use the getItem () method:

Our code returns:

There are two methods you can use to remove data from localStorage:

• removeItem (): remove a single item from localStorage
• clear (): remove each item from localStorage ()

If you want to remove our "name" element from the local memory, we could use this code:

Our code returns:

Note that even though we removed our localStorage, there is still one element stored: length. This tells us how many items are stored in localStorage. Now that we have removed the "name" entry , nothing is stored in localStorage.

It’s also important to note that localStorage can only store strings.

Create a save forms function using localStorage

We’ve all been to a few websites asking us to fill out a long form. Unless something is really important, I like being able to come back to that shape later. This is why so many sites have "save form" features that keep track of your form details for later.

Although some of them probably track your data in a database, you can create a lightweight version using the localStorage method.

Create the front-end

We are going to create a customer feedback form for a local tea house, The Little Tea House. Our first step is to create the front end of our web application. Create a file named index.html and paste the following code:

La petite maison de thé: customer feedback

How was your experience at La Petite Maison de Thé? We would love to know more !