How to save data in localStorage using JavaScript

In this tutorial youll 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 well be building a simple note taking application that will save and delete data in the localStorage.

Lets 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 well declare variables for the HTML elements well 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 isnt any notes in the localStorage yet well just an empty array:

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

Next well 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, heres 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.

Thats all for this tutorial. Hopefully its 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.