xqft/almacenar.js

## almacenar.js
document.addEventListener('DOMContentLoaded', () => {
    const input         = document.querySelector('#item');
    const btnAgregar    = document.querySelector('#agregar');
    const btnTitulo     = document.querySelector('#titulo');
    const btnSeparador  = document.querySelector('#separador');
    const btnLimpiar    = document.querySelector('#limpiar');
    const lista         = document.querySelector('#contenedor');

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

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

    function agregarItem(valor, lista) {
        lista.innerHTML += `<li> ${valor}</li>`
        listado.push(valor);
        window.localStorage.setItem('lista', JSON.stringify(listado))
    }

    btnAgregar.addEventListener('click', () => {
        if (input.value != '')
            agregarItem(input.value, lista);
    });

    btnLimpiar.addEventListener('click', () => {
        localStorage.removeItem("lista");
        listado = [];
        lista.innerHTML = "";
    });

    btnTitulo.addEventListener('click', () => {
        if (input.value != '')
            agregarItem("<h2>" + input.value + "</h2>", lista);
    });

    btnSeparador.addEventListener('click', () => agregarItem("<hr>", lista));
});

## 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">
          <label for="Item" class="form-label">Nuevo ítem:</label>
          <input type="text" class="form-control" id="item">
          <div class="d-flex justify-content-between">
            <button type="button" class="btn btn-primary my-3" id="agregar">Agregar</button>
            <button type="button" class="btn btn-secondary my-3" id="titulo">Titulo</button>
            <button type="button" class="btn btn-warning my-3" id="separador">Separador</button>
          </div>
        </div>
        <div class="col-sm-8">
          <div class="border rounded-3 cont">
            <ul class="list-group" id="contenedor">
            </ul>
          </div>
          <div class="float-end">
            <button type="button" class="btn btn-outline-danger my-3" id="limpiar">Limpiar</button>
          </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 input = document.querySelector('#item');
	const btnAgregar = document.querySelector('#agregar');
	const btnTitulo = document.querySelector('#titulo');
	const btnSeparador = document.querySelector('#separador');
	const btnLimpiar = document.querySelector('#limpiar');
	const lista = document.querySelector('#contenedor');

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

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

	function agregarItem(valor, lista) {
	lista.innerHTML += `<li> ${valor}</li>`
	listado.push(valor);
	window.localStorage.setItem('lista', JSON.stringify(listado))
	}

	btnAgregar.addEventListener('click', () => {
	if (input.value != '')
	agregarItem(input.value, lista);
	});

	btnLimpiar.addEventListener('click', () => {
	localStorage.removeItem("lista");
	listado = [];
	lista.innerHTML = "";
	});

	btnTitulo.addEventListener('click', () => {
	if (input.value != '')
	agregarItem("<h2>" + input.value + "</h2>", lista);
	});

	btnSeparador.addEventListener('click', () => agregarItem("<hr>", lista));
	});
	<!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">
	<label for="Item" class="form-label">Nuevo ítem:</label>
	<input type="text" class="form-control" id="item">
	<div class="d-flex justify-content-between">
	<button type="button" class="btn btn-primary my-3" id="agregar">Agregar</button>
	<button type="button" class="btn btn-secondary my-3" id="titulo">Titulo</button>
	<button type="button" class="btn btn-warning my-3" id="separador">Separador</button>
	</div>
	</div>
	<div class="col-sm-8">
	<div class="border rounded-3 cont">
	<ul class="list-group" id="contenedor">
	</ul>
	</div>
	<div class="float-end">
	<button type="button" class="btn btn-outline-danger my-3" id="limpiar">Limpiar</button>
	</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>