How to save data in localStorage using JavaScript
Tags: javascript, tutorial
Published: 2021-08-24 00:36:42

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:

```html
<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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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:

```javascript
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](https://gist.github.com/w3collective/9e6a99f4d828734676a12b2db2ff61e5).