Local Storage in JavaScript

During my JavaScript learning journey, I decided to create a small pet project (a landing page) to better understand the material. One of the elements on the page is a form for adding a tour to the database. Since I don’t have a database and filling in all the required fields every time for debugging can be tedious, my mentor suggested using the browser’s Local Storage.

localStorage is convenient for optimizing the development process of web pages. In our case, it helps with creating the tour addition form because data will remain stored even if the page is reloaded.

The process of adding data to Local Storage consists of several steps:

localStorage.setItem('key', 'value');

localStorage.getItem('key');

localStorage.removeItem('key');

localStorage.setItem(key, value);

Saving Data

function saveTour(tour) {
  const tours = JSON.parse(localStorage.getItem('tours')) || [];
  tours.push(tour);
  localStorage.setItem('tours', JSON.stringify(tours));
}

Explanation:

• We retrieve existing tours from localStorage or create an empty array if there’s no data.
• Add the new tour to the array.
• Save the updated array back to localStorage in JSON format.

Displaying Saved Data

function displayTours() {
  tourList.innerHTML = '';
  const tours = JSON.parse(localStorage.getItem('tours')) || [];
  const tourWrap = document.createElement('div');
  tourWrap.classList.add('w3-row-padding', 'w3-padding-32', 'accordion-content');

  tours.forEach((tour, index) => {
    const tourDiv = document.createElement('div');
    tourDiv.classList.add('w3-third', 'w3-margin-bottom');
    tourDiv.innerHTML = `
      <img src="${tour.image}" alt="Tour Image" style="width:100%; height:200px; object-fit:cover;">
      <div class="w3-container w3-white">
      <h3><b>${tour.city}</b></h3>
      <p class="w3-opacity">${tour.date}</p>
      <p>${tour.description}</p>
      <button onclick="deleteTour(${index})" class="w3-button w3-red">Delete</button></div>
    `;
    tourList.appendChild(tourDiv);
  });
}

Explanation:

• Clear the tour list.
• Retrieve tours from localStorage.
• Create a wrapper for the tours.
• For each tour, create a div, populate it with tour details, and add it to the list.

Displaying Tours on Page Load:

window.onload = displayTours;

Explanation:

• Call displayTours on page load to show saved tours.

Deleting Saved Data

function deleteTour(index) {
  const tours = JSON.parse(localStorage.getItem('tours')) || [];
  tours.splice(index, 1);
  localStorage.setItem('tours', JSON.stringify(tours));
  displayTours();
}

Explanation:

• Pull out the tours from localStorage.
• Delete the tour by index.
• Save the updated list to localStorage.
• Update the tour display.

The full HTML CSS JS code for form can be tested on Codepen:

See the Pen Local Storage Example by Victoriia Hladka (@vikagladka) on CodePen.