Entendiendo el DOM
¿Para qué aprender JavaScript?
¿Qué es DOM y Window Object?
Explorando Nodos del DOM
Seleccionando y Accesando a Elementos del DOM
Consultando el DOM con getElementById y querySelector
Navegación efectiva entre nodos
Manipulando Elementos del DOM
Modificando atributos y propiedades
Modificando texto en HTML
Modificando estilos en HTML
Modificando la visibilidad de elementos HTML
Creación de elementos con HTML Strings e insertAdjacentElement()
Agregando elementos con innerHTML e insertAdjacentHTML()
Creación de elementos con createElement()
Remover elementos con remove() y removeChild()
Clonación y reemplazo de elementos con cloneNode y replaceChild
Manipulando Eventos en el DOM
Entendiendo eventos y tipos: Burbuja, Captura y Propagación
Agregar y eliminar escuchadores de eventos o Event Listeners
El objeto evento o eventObject
Manejo de entradas de formulario y validación
Delegación de eventos y prevención de comportamiento predeterminado
Creando un Administrador de Tareas
Añadir tareas desde un formulario
Eliminar y editar tareas del DOM
Almacenamiento y carga de datos en localStorage
Eliminar y editar tareas del almacenamiento local
Inspeccionando y solucionando errores en el código
Personalizando la interfaz del administrador de tareas
Aún hay más por aprender
Asincronía en JavaScript
¿Cómo funciona el JavaScript Engine?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Almacenamiento y carga de datos en localStorage
22/27Recursos
Aportes 8
Preguntas 1
Ordenar por:
Un método muy útil para visualizar (y modificar/eliminar) elementos guardados en el localStorage (o en el sessionStorage y otras APIs) es; en las herramientas de desarrollador, en la ventana *"Application/Aplicación"*.
Ahí tendrás los datos de forma súper accesible e intuitiva. Además, para efectos de desarrollo, puede ser muy rápido encontrar valores cuando hay muchos almacenados.
* **localStorage**: Es una Web API que permite almacenar datos en el navegador de forma persistente. La información se guarda en formato clave-valor y persiste si se cierra el navegador. No es una base de datos, sino un almacenamiento simple para cadenas de texto.
* Funciones principales de localStorage:
* **setItem(key, value):** Guarda un valor asociado a una clave. El valor debe de ser una cadena de texto, por lo que se usa **JSON.stringify()** para convertir objetos o arrays a formato JSON.
* **getItem(key):** Recupera el valor almacenado con la clave proporcionada. El valor recuperado es una cadena, por lo que se usa **JSON.parse()** para convertirlo a un objeto o array.
que diferencia hay entre usar cookies y localstorage? que ventajas y desventajas tiene cada uno?
Realmente con cada tema mi mente sigue evolucionando y sigo aportando valor a mi trabajo, definitivamente agradezco tanto el hecho de poder agregar valor con el contenido de platzi
Buenísimo profe me quito el sombrero es especial gracias pero tengo mucho que aprender
Aquí os dejo el código de mi aplicación con lo realizado hasta ahora. Es distinto a como lo tiene el profesor ya que he intentado ir realizando gran parte por mi cuenta y cuando tenía alguna duda o no sabía como continuar tomaba como referencia y veía los vídeos. Espero os sirva mi aporte. Os paso el código de cada uno de los archivos HTML, CSS y JS.
*Archivo HTML*
```html
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lista de tareas</title>
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>
</head>
<body>
<nav id="cambiar-tema">
<button id="btn-cambiar-tema" class="btn-cambiar-tema">Cambiar Tema</button>
</nav>
</body>
</html>
```\*Archivo CSS
```css
body {
margin: 0;
padding: 0;
background: lightgrey;
font-size: 24px;
font-family: monospace;
}
nav {
padding: 10px;
margin-bottom: 20px;
}
h1{
font-size: 64px;
}
form {
margin-bottom: 50px;
display: flex;
justify-content: space-between;
}
input {
width: 65%;
margin-right: 20px;
padding: 20px;
font-size: 24px;
}
button {
width: 20%;
padding: 20px;
font-size: 24px;
border: 0px;
border-radius: 5%;
color: rgb(10, 10, 10);
}
button:hover {
background: lightslategray;
cursor: pointer;
}
ul {
background: lightslategray;
color: lightgreen;
list-style: none;
}
li {
padding: 10px;
}
span {
margin-left: 10px;
}
span:hover{
cursor: pointer;
}
.contenedor-principal {
width: 50%;
background: white;
margin: 0 auto;
padding: 50px;
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: 10px 10px 5px 2px lightslategrey;
}
.btnEnviar {
width: 25%;
}
```*Archivo Javascript*
```js
//Vamos a crear una app de lista de tareas con persistencia de datos.
//El funcionamiento lo vamos a programar por funciones
// 1.- Función para escuchar el evento submit en el formulario
// 2.- Función para agregar la tarea a la lista de tareas
// 3.- Función para agregar los botones a continuación de la tarea. Botones eliminar y editar (creados con span)
// 4._ función para escuchar el evento click en la tarea y comprobar si queremos borrar o editar.
// Para el punto 4 poder comprobar si hemos dado click en borrar o editar usaremos delegación de eventos
// Visto en unos temas anteriores.
//Traemos el formulario completo para generarle un evento submit
const formularioTareas = document.getElementById("formularioTareas");
//Traemos el contenedor lista-tareas para agregar las tareas que vayamos añadiendo en el input
const listaTareas = document.getElementById("lista-tareas");
//Llamamos a la función leer tareas del localStorage
cargarTareas();
//Listener al formulario para cuando agreguemos una tarea.
formularioTareas.addEventListener("submit", (event) => { //Le pasamos el evento mismo para trabajar con el
event.preventDefault(); //Prevenimos el refresco de pantalla al dar en enviar. Es el efecto por defecto de un formulario.
//Tomamos los datos del input
const inputTarea = document.getElementById("inputTarea");
const tarea = inputTarea.value;
if(tarea){
addTarea(tarea);
inputTarea.value = ""; //Esto es para quitar el texto del input una vez enviado
}
});
//Función agregar tarea a la lista de tareas.
function addTarea(tarea) {
//Creamos un elemento li para agregar a la lista de tareas
const nuevaTarea = document.createElement("li");
//Llamamos a la función para crear los botones editas y borrar
const {btnBorrar, btnEditar} = editRemoveButtons();
//Agregamos la nueva tarea a la lista.
nuevaTarea.textContent = tarea
nuevaTarea.append(btnBorrar);
nuevaTarea.append(btnEditar);
listaTareas.append(nuevaTarea);
guardarTareaLocalStorage(tarea);
}
//Función para agregar los botones eliminar y editar
function editRemoveButtons(){
//Tomamos los elementos span para clonarlos. Después esta función habrá que cambiarla ya que habrá que crear
//los elementos desde cero teniendo en cuenta que no existirán inicialmente la tarea de ejemplo.
/* Para crear los botones span con los símbolos X y lápiz podemos hacerlo seguramente de dos maneras,
creando la etiqueta span y mediante una clase añadirle el símbolo, o creando la etiqueta span y añadirle como
textContent los símbolos. Probar de las dos maneras y devolver los nodos creados sin clonar.*/
/* Para después realizar el listener de los botones vamos a necesitar que tengan una clase btnBorrar y btnEditar,
nos aseguramos de indicarlo en el html */
const [spanRemove, spanEdit] = listaTareas.querySelectorAll("span");
const btnBorrar = spanRemove.cloneNode(true);
const btnEditar = spanEdit.cloneNode(true);
return {btnBorrar, btnEditar};
}
//Vamos a usar la delegación de eventos para comprobar si queremos editar o borrar la tarea.
listaTareas.addEventListener("click", (event) => {
if (event.target.classList.contains("btnBorrar")){
eliminarTarea(event.target.parentElement);
} else if (event.target.classList.contains("btnEditar")){
editarTarea(event.target.parentElement);
}
//Otra forma de hacer la comparación la hice así:
//(event.target.classList == "btnBorrar") y también funcionaba
});
//Creamos las funciones del botón editar y del botón borrar por separado
//Función que se ejecutará al pulsar el botón borrar
function eliminarTarea(tareaItem){
if (confirm("¿Estás segur@ de querer borrar la tarea?")){ //confirm es como el alert pero quedando pendiente de recibir una respuesta si/no
tareaItem.remove();
}
}
//Función para editar la tarea
function editarTarea(tareaItem){
//prompt es parecido a confirm pero que nos permite escribir algo para enviar y confirmar
const tareaEditada = prompt("Edita la tarea: ", tareaItem.firstChild.textContent);
//Tenemos que confirmar que tareaEditada no es null para modificar con el texto enviado dicha tarea
if (tareaEditada != null){
tareaItem.firstChild.textContent = tareaEditada;
}
}
/* Persistencia de datos */
//Las funciones que vienen a continuación harán uso de la wepAPI localStorage para guardar la información
//de las tareas que añadamos, editemos y borremos.
function guardarTareaLocalStorage(tarea){
//Creamos una constante para guardar las tareas que haya en localStorage
//con JSON.parse convertimos el objeto en un array
const tareas = JSON.parse(localStorage.getItem("tareas") || "[]");
tareas.push(tarea); //añadimos la tarea al array tareas.
//Guardamos en localStorage la nueva tarea con setItem pasándole dos argumentos,
//primero el nombre del objeto (key) y luego el array pasado a string.
localStorage.setItem("tareas", JSON.stringify(tareas));
}
//Función para cargar las tareas guardas en el localStorage
function cargarTareas(){
//Leemos el localStorage para comprobar si hay tareas y las convertimos en un array
//si no hay tareas creamos el array vacío.
const tareas = JSON.parse(localStorage.getItem("tareas") || "[]");
//console.log(tareas);
//Recorremos el array tareas y las pasamos al HTML
tareas.forEach((tarea) => {
//console.log(tarea);
addTarea(tarea);
});
}
```
Lista de tareas
<form id="formularioTareas"> <input id="inputTarea" type="text" placeholder="Escribe la tarea"> <button id="enviar" class="btnEnviar">Enviar</button> </form>- Tarea ejemplo ❌ 🖋️
```js
const tasks=JSON.parse(localStorage.getItem("tasks"||"[]"))
```Hola estoy depurando mi codigo, como podran leer la linea de arriba tiene un error comparado con lo que escribe el profe, sin embargo el editor nunca me aviso de esto al debuggear, lo encontre usando una ia para encontrar donde podia estar el error que me lleva alsiguiente comportamiento( y que al parecer no es este) cuando llamo la funcion loadTasks my programa deja de agregar las tareas y siempre tiene un comportamiento como si recargara la pagina. de echo acabo de darme cuenta que el problema era que el autocomplete de vscode me escribio tasks.Array.forEach en vez de task.forEach. me gustaria saber porque ese error puede tener un comportamiento como si la pagina se recargara cada vez, en la consola del navegador me salia :cannot read properties of undefine haciendo referencia a este error. tambien me gustaria saber el porque de la linea de arriba. si alguien sabe, yo igual seguire buscando por mi cuenta
Almacenamiento y carga de datos en localStorage():
Para utilizar este método es necesario la intervención de una web API, el window.localStorage, en él se pueden almacenar datos en el propio navegador, no importa si se cierra la ventana, pestaña o incluso si se reinicia, los datos ahí van a estar.
***<u>¿Qué son las API?</u>***
Las Interfaces de Programación de Aplicaciones (API), son los intermediarios que nos ayudan a comunicarnos y nos dan funcionalidades como métodos propios para interactuar con diferentes recursos, en este caso el localStorage pertenece al objeto window, que este a su vez es una API de almacenamiento del navegador al renderizarse.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?