1

Estoy trabajando con este ejemplo el cual es una aplicación en JavaScript que crea tareas en forma de listas.

Dentro de la funcion agreagar Tarea , quiero implementar localstorage. pero no consigo que funcione, creo la variable llamada checklist y una lista vacia.

despues de crear el elemento lista, hago un bucle para insertar en mi lista vacia los elemento que boy añadiendo div id="tareas"luego quiero imprimir la lista checklist. Pero no lo consigo.

imprimo checklist

este es mi codigo.

document.addEventListener('DOMContentLoaded', () => {

  //Asignación variables
  var lista = document.getElementById("lista"),
    tarea = document.getElementById("tarea"), //input
    agregar = document.getElementById("agregar"); //button

  if (!localStorage.getItem('checklist'))
           localStorage.setItem('checklist', "");
  var checklist = []
  //  Funciones
  var agregarTarea = function() {
    var tarea = document.getElementById("tarea").value,
      nuevaTarea = document.createElement("li"),
      enlace = document.createElement("a"),
      hr = document.createElement("hr"),
      contenido = document.createTextNode(tarea); // crea un elemento con tarea como texto

    enlace.appendChild(contenido); //agregar el valor del input a enlace
    enlace.setAttribute("href", "#"); //añadimos la propiedad a enlace.
    enlace.style.color = "black";
    nuevaTarea.appendChild(enlace);
    lista.appendChild(nuevaTarea); //por ultimo, agregamos nueva Tarea (valor del input) a lista (contenedor)
    lista.appendChild(hr);
    document.querySelector('#tarea').value = '';

     for (var i = 0; i < lista.children.length; i++) {
            checklist.innerHTML = lista.children[i]
          }
     
        console.log(checklist);
  };


  //Eventos
  agregar.addEventListener("click", agregarTarea);

});
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <title>Checklist con javascript</title>
</head>

<body>
  <div class="container">
    <div class="container bg-danger py-3">
      <h1 class="text-center text-capitalize text-white font-weight-bold"> lista de tareas con javascript</h1>
      <div class="container">
        <form action="#" class="">
          <div class="form-group mt-5">
            <input type="text" id="tarea" class="form-control text-center py-2" placeholder="Agrega una tarea a la lista." autofocus autocomplete="off">
          </div>
          <div class="form-group">
            <button type="submit" id="agregar" class="btn btn-outline-warning  btn-block btn-lg">Agregar Tarea</button>
          </div>
        </form>
      </div>
    </div>
    <!--separacion -->
    <hr class="font-weight-bold bg-warning">
    <!--endbeparacion -->

    <!--lista-->
    <div class="container" id="tareas">
      <div class="title bg-warning my-5 py-3">
        <h2 class="text-center text-danger">Tareas a Realizar</h2>
      </div>
      <ol id="lista" class="text-center text-capitalize ">
        <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, fugit.</a></li>
        <hr class="font-weight-bold mb-3">
        <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. At, fugit.</a></li>
        <hr class="font-weight-bold mb-3">
        <li><a href="#">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ducimus, adipisci!</a></li>
        <hr class="font-weight-bold mb-3">
      </ol>

    </div>
    <!--endlista-->
  </div>
  <script src="js\checklist.js"></script>
</body>

</html>

Agradesco que me ayuden o me digan como puedo asignar los elementos que se crean a la lista y almacenarlo a la variable localstorage('checklist'). Gracias

5
  • En que parte de tu codigo estas agregando items a checklist? Commented el 23 abr. 2020 a las 18:48
  • En agregarTarea( ) creo la variable localstorage, luego de crear el elemento y añadirlo a la sección de tareas, recorro las listas que se crearon y se las asignó a checklist[]. Al imprimir por consola me arroja " Checklist not defined". Commented el 23 abr. 2020 a las 19:08
  • Pero en el for no estas agregando nada al checklist, estas solo asignando el valor de lista.children y pisandolo con el ultimo valor Commented el 23 abr. 2020 a las 19:10
  • Es lo que te digo.. Al hacer eso no estas agregando nada a tu arreglo, por eso no te imprime nada Commented el 23 abr. 2020 a las 19:36
  • Cambien checklist.innerHTML = lista.children[i] a checklist = lista.children[i]. Ya imprime por consola lo que estoy insertando. Gracias @Paulño Urbano Ahora intente almacenas checklist dentro de localStorage.setItem("checklist", checklist[i]);` aumente checlist++ pero ahora me imprime NaN Commented el 23 abr. 2020 a las 19:38

1 respuesta 1

1

Tomando como base el ejemplo para poder almacenar todo en localStorage es necesario que cada que se ingrese una tarea almacenar el texto en un arreglo y a su vez almacenar el arreglo como un JSON dentro de una variable localStorage.

El ejemplo no lo pongo para ejecución debido a que SO localStorage debido a que es un sandbox.

El HTML queda con el listado vacío y el formulario tal cual:

<div class="principal">
    <div class="wrap">
        <form class="formulario" action="">
            <input type="text" id="tareaInput" placeholder="Agrega tu tarea">
            <input type="button" class="boton" id="btn-agregar" value="Agregar Tarea">
        </form>
    </div>
</div>

<div class="tareas">
    <div class="wrap">
        <ul class="lista" id="lista">
        </ul>
    </div>
</div>

El JavaScript queda de la siguiente manera (Tiene comentarios explicando paso a paso):

var guardado;
(function () {
    // Variables
    let lista         = document.getElementById("lista");
    let tareaInput    = document.getElementById("tareaInput");
    let btnNuevaTarea = document.getElementById("btn-agregar");
    // Recibimos lo que tenemos guardado el LocalStorage
    guardado          = JSON.parse(localStorage.getItem('datos'));

    // Verificamos si guardado es diferente de null entonces
    // realizamos un ciclo for para agregar las tareas
    if (guardado != null) {
        for (i in guardado) {
            agregarTarea(guardado[i]);
        }
    }
    // En caso de que sea null la declaramos como un arreglo
    else {
        guardado = [];
    }

    // La funcion recibe el texto
    function agregarTarea(tarea)
    {
        let nuevaTarea = document.createElement("li");
        let enlace     = document.createElement("a");
        let contenido  = document.createTextNode(tarea);

        // Agregamos el contenido al enlace
        enlace.appendChild(contenido);
        // Le establecemos un atributo href
        enlace.setAttribute("href", "#");
        // Le agregamos el evento onclick haciendo referencia a la funcion
        // eliminarTarea mandando como parametro el evento
        enlace.setAttribute("onclick", "eliminarTarea(this)");
        // Agrergamos el enlace (a) a la nueva tarea (li)
        nuevaTarea.appendChild(enlace);
        // Agregamos la nueva tarea a la lista
        lista.appendChild(nuevaTarea);
    };

    // Agregar Tarea
    btnNuevaTarea.addEventListener("click", function () {
        // Verificamos que la tarea a ingresar no sea vacia
        if (tareaInput.value != '') {
            agregarTarea(tareaInput.value);
            guardado.push(tareaInput.value);
            localStorage.setItem('datos', JSON.stringify(guardado));
            tareaInput.value = "";
        }
        // Si es vacía le agregamos el placeholder de invalida
        else {
            tareaInput.setAttribute("placeholder", "Agrega una tarea valida");
            tareaInput.className = "error";
        }
    });
}());

// Recibe como parámetro el evento
function eliminarTarea(link)
{
    // Verificamos el parentNode sea diferente de null
    if (link.parentNode !== null) {
        // Eliminamos la tarea clickeada
        link.parentNode.parentNode.removeChild(link.parentNode);
    }
    // Verificamos si el texto existe en el arreglo general
    let index = guardado.indexOf(link.text);
    // Si existe lo eliminamos
    if (index !== -1) guardado.splice(index, 1);
    // Guardamos el arreglo en localstorage
    localStorage.setItem('datos', JSON.stringify(guardado));
}

Puedes ver el ejemplo funcional en Codepen.

1
  • Gracias por responder, estoy entrando apenas en el mundo de JavaScript y este ejemplo me va de maravilla al hacer uso de JSON para almacernar objetos como listas. Commented el 23 abr. 2020 a las 20:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.