How to save data in localStorage using JavaScript

In this tutorial you’ll learn how to use localStorage a property of the window interface that allows you to access a storage object from the browser. To give you an understanding of how localStorage works we’ll be building a simple note taking application that will save and delete data in the localStorage.

Let’s get started by creating a form to add new notes and an unordered list to display the saved notes:

<form id="note-form">
  <input id="note-input" type="text" placeholder="+ Add Note" required />
  <button id="note-submit">Save</button>
</form>
<ul id="notes"></ul>

Now for the JavaScript functionality, first we’ll declare variables for the HTML elements we’ll be working with:

const noteForm = document.getElementById("note-form");
const noteInput = document.getElementById("note-input");
const noteSubmit = document.getElementById("note-submit");
const notes = document.getElementById("notes");

We'll also save any existing notes to a noteStorage variable to make them easier to work with. If there isn’t any notes in the localStorage yet we’ll just an empty array:

let notesStorage = localStorage.getItem("notes")
  ? JSON.parse(localStorage.getItem("notes"))
  : [];

Next we’ll add the functionality to save a new note when the form is submitted:

noteForm.addEventListener("submit", (e) => {
  e.preventDefault();
  notesStorage.push(noteInput.value);
  localStorage.setItem("notes", JSON.stringify(notesStorage));
  listBuilder(noteInput.value);
  noteInput.value = "";
});

This pushes the new note into into the notesStorage then updates the notes in the localStorage. We then call a listBuilder function which adds the note to the unordered list element in our HTML markup, here’s the code for that function:

const listBuilder = (text) => {
  const note = document.createElement("li");
  note.innerHTML = text + ' <button onclick="deleteNote(this)">x</button>';
  notes.appendChild(note);
};

The notes are now being saving in localStorage and displayed in the HTML. However if the page is refreshed the notes would no longer display in the HTML so we need to loop through each of the notes in localStorage when the page is loaded and re-render them in the HTML:

const getNotes = JSON.parse(localStorage.getItem("notes"));
getNotes.forEach((note) => {
  listBuilder(note);
});

Last thing we need to do is add the functionality for the delete button:

const deleteNote = (btn) => {
  let el = btn.parentNode;
  const index = [...el.parentElement.children].indexOf(el);
  notesStorage.splice(index, 1);
  localStorage.setItem("notes", JSON.stringify(notesStorage));
  el.remove();
};

This gets the index of the list item to delete and removes it from both the HTML and localStorage.

That’s all for this tutorial. Hopefully it’s given you an understanding of how to work with data in the localStorage. A full working example of the code used in this tutorial is available to download from here.