xqft/almacenar.js

## almacenar.js
document.addEventListener('DOMContentLoaded', () => {
    const btnAgregar    = document.querySelector('#agregar');
    const lista         = document.querySelector('#contenedor');
    const titulo        = document.querySelector('#titulo');
    const grupoTitulo   = document.querySelector('.needs-validation');
    const descripcion   = document.querySelector('#descripcion');

    let listado = window.localStorage.getItem('lista');
    listado = JSON.parse(listado)

    if (listado == null)
        listado = []
    else
        for (const valor of listado)
            lista.innerHTML += `${valor}`;

    function agregarItem(titulo, descripcion, lista) {
        const contenido = `<li><h2>${titulo}</h2> <p>${descripcion}</p></li>`;
        lista.innerHTML += contenido;
        listado.push(contenido);
        window.localStorage.setItem('lista', JSON.stringify(listado))
    }

    btnAgregar.addEventListener('click', ()=>{
        if (titulo.value != '')
            agregarItem(titulo.value, descripcion.value, lista);
        else
            grupoTitulo.classList.add("was-validated");
    });
});

## index.html
<!doctype html>
<html lang="es">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <title>Listado</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
  <link href="css/style.css" rel="stylesheet">
</head>

<body class="bg-light">
  <div class="container">
    <main>
      <h1 class="my-3">Listado</h1>
      <hr class="my-4">
      <div class="row mt-4 g-3">
        <div class="col-sm-4">
          <form>
            <div class="form-group needs-validation">
              <label for="Item" class="form-label">Titulo:</label>
              <input type="text" class="form-control" id="titulo" required>
              <div class="invalid-feedback">Por favor escribe un titulo</div>
            </div>
            <label for="Item" class="form-label">Descripcion:</label>
            <textarea class="form-control" id="descripcion"></textarea>
            <div class="d-flex justify-content-between">
              <button type="button" class="btn btn-primary my-3" id="agregar">Agregar tarea</button>
            </div>
          </form>
        </div>
        <div class="col-sm-8 cont">
          <div class="border rounded-3 text-wrap">
            <ul class="list-group text-break" id="contenedor">
            </ul>
          </div>
        </div>
      </div>
    </main>
    <footer class="my-5 pt-5 text-muted text-center text-small">
      <p class="mb-1">Este sitio forma parte de <a href="https://jovenesaprogramar.edu.uy/" target="_blank">Jovenes a Programar</a> - 2022</p>
      <p class="mb-1">Generado con fines estrictamente educativos.</p>
    </footer>
  </div>
  <script src="js/almacenar.js"></script>
</body>

</html>
	document.addEventListener('DOMContentLoaded', () => {
	const btnAgregar = document.querySelector('#agregar');
	const lista = document.querySelector('#contenedor');
	const titulo = document.querySelector('#titulo');
	const grupoTitulo = document.querySelector('.needs-validation');
	const descripcion = document.querySelector('#descripcion');

	let listado = window.localStorage.getItem('lista');
	listado = JSON.parse(listado)

	if (listado == null)
	listado = []
	else
	for (const valor of listado)
	lista.innerHTML += `${valor}`;

	function agregarItem(titulo, descripcion, lista) {
	const contenido = `<li><h2>${titulo}</h2> <p>${descripcion}</p></li>`;
	lista.innerHTML += contenido;
	listado.push(contenido);
	window.localStorage.setItem('lista', JSON.stringify(listado))
	}

	btnAgregar.addEventListener('click', ()=>{
	if (titulo.value != '')
	agregarItem(titulo.value, descripcion.value, lista);
	else
	grupoTitulo.classList.add("was-validated");
	});
	});
	<!doctype html>
	<html lang="es">

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="">
	<title>Listado</title>
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/style.css" rel="stylesheet">
	</head>

	<body class="bg-light">
	<div class="container">
	<main>
	<h1 class="my-3">Listado</h1>
	<hr class="my-4">
	<div class="row mt-4 g-3">
	<div class="col-sm-4">
	<form>
	<div class="form-group needs-validation">
	<label for="Item" class="form-label">Titulo:</label>
	<input type="text" class="form-control" id="titulo" required>
	<div class="invalid-feedback">Por favor escribe un titulo</div>
	</div>
	<label for="Item" class="form-label">Descripcion:</label>
	<textarea class="form-control" id="descripcion"></textarea>
	<div class="d-flex justify-content-between">
	<button type="button" class="btn btn-primary my-3" id="agregar">Agregar tarea</button>
	</div>
	</form>
	</div>
	<div class="col-sm-8 cont">
	<div class="border rounded-3 text-wrap">
	<ul class="list-group text-break" id="contenedor">
	</ul>
	</div>
	</div>
	</div>
	</main>
	<footer class="my-5 pt-5 text-muted text-center text-small">
	<p class="mb-1">Este sitio forma parte de <a href="https://jovenesaprogramar.edu.uy/" target="_blank">Jovenes a Programar</a> - 2022</p>
	<p class="mb-1">Generado con fines estrictamente educativos.</p>
	</footer>
	</div>
	<script src="js/almacenar.js"></script>
	</body>

	</html>