Ejercicio local Storage

Tenemos una web con un input para poner una cantidad y un botón que pone sumar.
Cada vez que le demos al botón nos suma la cantidad en una variable almacenada en el localStorage y nos la muestra en un h1.

Cuando carguemos la página, si ya hay valores en el localStorage mostramos ese valor en el h1

<div id="contenedor" class="container ">
		Cantidad: <input type="number" id="cantidad">
		<button class="btn btn-success" id="sumar">Sumar</button>
		<button class="btn btn-success" id="borrar">Borrar</button>
		<h1 id="resultado"></h1>
	</div>
	<script src="js/test.js"></script>

document.getElementById('sumar').addEventListener('click', sumar)
document.getElementById('borrar').addEventListener('click', borrar)
document.addEventListener('DOMContentLoaded', function (event) {
  if (localStorage.getItem('cantidad') != null) {
    document.getElementById('resultado').innerHTML = localStorage.getItem('cantidad')
  }
})

function sumar () {
  // Recupero el valor del input
  let cantidad = parseFloat(document.getElementById('cantidad').value)
  if (isNaN(cantidad)) {
    cantidad = 0
  }
  // Recupero el valor de localStorage
  let cantidadAlmacenada = parseFloat(localStorage.getItem('cantidad'))
  // Si en el localStorage no hay número, bien porque no existe la variable
  // Bien porque existe pero no es un número
  // La pongo a 0
  if (isNaN(cantidadAlmacenada)) {
    cantidadAlmacenada = 0
  }
  // Calculo la suma
  const suma = cantidad + cantidadAlmacenada
  // La muestro en el H1 porque me lo piden
  document.getElementById('resultado').innerHTML = suma
  // ALmaceno el resultado en el localStorage para que quede registrado
  // En setItem tengo 'nombre de la variable', valor de la variable
  localStorage.setItem('cantidad', suma)
}

function borrar () {
  // Funcionaría localStorage.removeItem('cantidad')
  // Lo más lógico según mi estructura sería lo siguiente
  localStorage.setItem('cantidad', 0)
}