Richard Li
Jul 18 · 4 min read

Local storage is data stored locally in a client’s browser. It is also pure JavaScript.

There are two types of storage you can use:

  • Local storage: Data that persists even if you refresh the page or close the browser.
  • Session storage: Data that will get cleared when the browser is closed.

Why Are Local Storage and Session Storage Useful?

You don’t have to use cookies to store temporary data, which needs to be created by a web server and doesn’t get sent with every HTTP request.

So, if you’re building a static website you won’t need any back-end language or logic to store data. Also, your local storage provides 5MB of data storage, while you can only store a maximum of 4KB in a cookie.

A few technical things:

  • You can set key: value pairs.
  • You can only store strings.
  • You can store arrays and objects, but you have to turn them into strings first, using a method called JSON.stringify() and JSON.parse(). More on this later.

These are the methods for local storage:

Setting data into local storage:

They are saved as key: value pairs.

Setting data into session storage:

These are also saved as key: value pairs.

If you go into your console in your browser (CMD+Option+J) and go into the Application tab you can see your data.

We can get from storage:

Used console.log() for an example to show data.

We can remove from storage:

We can clear all from storage:

The data will become null.

Example: Saving a Task

Quick example. If you had a form for, let’s say, a task list, and you wanted to save the task the user submits, you could do something like this:

Find your form input:

Add event ‘submit’ to form input:

Grab the form’s input value:

I had the input tag attached with an ID of “task” and I used the value method to get the user’s input and store it in a variable.

Here is the somewhat tricky part. If we want to store multiple tasks from the user, we need to create an array of tasks and store that as a string.

  1. First, we need to check to see if there is something in local storage and, if there is, pull it out and add to. And if not, set an empty array.

2. Now we want to wrap our localStorage.getItem(‘tasks’); in a method called JSON.parse(). Then, we want to pass our task variable into our tasks variable.

3. We will convert tasks back into a string because we can only store strings in our local and session storage.

4. Now, if we want to iterate through it and use a forEach(), we have to parse it back or we’ll get TypeError: forEach is not a function error because tasks is an array — we pulled it out from local storage which only stores strings.

Thanks for reading!

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade