DEV Community

Michael Burrows
Michael Burrows

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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"))
  : [];
Enter fullscreen mode Exit fullscreen mode

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 = "";
});
Enter fullscreen mode Exit fullscreen mode

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);
};
Enter fullscreen mode Exit fullscreen mode

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);
});
Enter fullscreen mode Exit fullscreen mode

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();
};
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (1)

Collapse
 
natclark profile image
Nathan

Just want to tag on that not all browsers support localStorage:

if (typeof localStorage !== `undefined`) {
    // Interact with `localStorage` here
}
// Do not interact with `localStorage` here
Enter fullscreen mode Exit fullscreen mode