JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

<div id="info"></div>
<button id="btn-add">Add a car</button>
<button id="btn-clear-all">Clear all</button>

JavaScript

const info = document.querySelector('#info');
const btnAdd = document.querySelector('#btn-add');
const btnClearAll = document.querySelector('#btn-clear-all');
const LS_KEY = 'cars';

const getCars = () => JSON.parse(localStorage.getItem(LS_KEY)) || [];

const renderCars = () => {
  info.innerHTML = getCars().map(car => `
  	<div class="item" class="${car.model}">${car.model}</div>
  `).join('');
}

renderCars()

btnAdd.addEventListener('click', function() {
  const addedCar = { model: 'Tesla Model X' };
  const cars = getCars();
  cars.push(addedCar);
  localStorage.setItem(LS_KEY, JSON.stringify(cars));
  
  renderCars();
});

btnClearAll.addEventListener('click', function() {
  localStorage.clear();
  localStorage.setItem(LS_KEY, JSON.stringify([]));
  renderCars();
});