Paso A Paso - CRUD - Localstorage - JavaScript

CRUD localStorage JavaScript
En el siguiente paso a paso, realizaremos una pequeña aplicación que nos permitirá
realizar anotaciones de tareas y/o actividades diarias que nos ayuden a organizar
nuestro diario vivir.
Implementaremos como principal lenguaje JavaScript con el paradigma de programación
POO (Programación Orientada a Objetos).
Para la persistencia de datos implementaremos el Localstorage del navegador siendo una
herramienta muy eficaz para el almacenamiento temporal de los datos y que nos
permitirá mantener estos datos aún cuando la página sea recargada, y no se perderán
los datos que trabajemos en la ejecución del aplicativo.
1. ORGANIZACIÓN DEL PROYECTO.

Creamos las carpetas necesarias para el proyecto y los archivos necesarios.
📂 Carpeta para los CSS
📑 Archivo llamado style.css
📂 Carpeta para los JS
📑 Archivo llamado app.js
📑 Archivo llamado index.html
El archivo style.css, tendrá todos los estilos de nuestra página (Este archivo es
opcional, puesto que trabajaremos con Bootstrap).
El app.js, dentro de la carpeta de js, tendrá toda la funcionalidad de nuestra

aplicación.
el archivo index.html, será la clase principal de nuestro proyecto.
En el archivo de Index.html, realizaremos un estructura sencilla, implementando

Bootstrap.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">


<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">


<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
CRUD localStorage JavaScript 1

crossorigin="anonymous">
<title>Mis anotaciones</title>
</head>
<body>
<div class="container mt-5">
<h3><i class="material-icons">accessibility</i>Tareas Díarias</h3>
<form id="formulario">
<input type="text" id="actividad" class="form-control my-3">
<button type="submit" class="btn btn-primary">Guardar</button>
</form>
<div id="listaActividades" class="mt-4">


</div>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"


<script src="app.js"></script>
</body>
</html>
Teniendo listo el html, podemos comenzar con la codificación de la funcionalidad de la

aplicación.
Abrimos el archivo app.js de la carpeta JS, y comenzamos a definir nuestras funciones
de CrearTarea(), GuardarTarea(), BorrarTarea, CambiarEstadoTarea.
1. Variables y/o datos principales
const formularioUI = document.querySelector('#formulario');

const listaActividadesUI = document.getElementById('listaActividades');
let arrayActividades = [];
Creamos una constante llamada formularioUI para capturar el formulario del html que
contiene el input y el botón de guardar.
Creamos otra constante llamada listaActividadesUI, que nos permitirá obtener el

contenedor en el cual se imprimirán todas las notas que definamos.

Por ultimo definiremos un arreglo llamado arrayActividades[] el cual almacenará los
datos de cada actividad (Descripción y Estado)
FUNCIONES
A partir de aquí comenzaremos a definir las funciones que se ejecutarán para que
nuestra aplicación pueda funcionar de manera optima.
Iniciaremos con la función de CrearTarea().
1. CrearTarea();
Esta función permitirá capturar los datos enviados a través del formulario y
almacenarlos en el arreglo definido arriba de manera global a través del método
push();
const CrearTarea = (actividad) => {
let item = {
actividad: actividad,
estado: false
}
arrayActividades.push(item);
}
Esta función recibe como parámetro la descripción que se envía en el input del
formulario.
Creamos un arreglo llamado ítem, el cual almacenará los siguientes datos
actividad : (Dato que se envía en el input del formulario)
estado : (Estado de la tarea, por defecto se envía en false)
Insertamos el arreglo ítem con los datos de la tarea, al arreglo global llamado
arrayActividades, con el metodo Push().
2. GuardarTareaLS().
Esta función permitirá guardar la tarea en el Localstorage para su persistencia.
const GuardarTareaLS = () => {
localStorage.setItem('rutina', JSON.stringify(arrayActividades));
PintarTarea();
}

El objeto Storage (API de almacenamiento web) nos permite
almacenar datos de manera local en el navegador y sin necesidad
de realizar alguna conexión a una base de datos. En este artículo
te mostraré cómo utilizarlo mediante JavaScript.
Te invito a revisar el siguiente link para tener mayor

información y documentación sobre esta herramienta.
¿Qué es y cómo utilizar localStorage y sessionStorage?

Aprende a almacenar datos de manera local con JavaScript utilizando el
objeto Storage.
https://ed.team/blog/que-es-y-como-utilizar-localstorage-y-sessions
torage
Aquí llamamos al localStorage y su método de setItem(), que recibe dos parámetros
name : “Nombre del elemento
content : “Contenido del elemento”
En este casó como nombre le colocaremos ‘rutina’ y como contenido le enviaremos

el arreglo global llamado arrayActividades, que viene cargado con la actividad
incluida en la anterior función, y la pasamos en formato JSON son su método
JSON.stringify().
Ejecutamos la función de PintarTarea();
Esta función aún no esta creada, pero nos permitirá ir

imprimiendo cada tarea guardada, en el index.html para el
usuario.
3. PintarTarea().
Ya creada la tarea y guardada en el localStorage, tenemos que pintar la actividad en
el index.html para que el usuario pueda visualizarla.
const PintarDB = () => {
listaActividadesUI.innerHTML = '';
arrayActividades = JSON.parse(localStorage.getItem('rutina'));
if(arrayActividades === null){

arrayActividades = [];
}else{
arrayActividades.forEach(element => {

if(element.estado){
listaActividadesUI.innerHTML += `
<div class="alert alert-success" role="alert">
<i class="material-icons float-left mr-2">accessibility</i><b>
${element.actividad}</b> - ${element.estado}
<span class="float-right">
<i class="material-icons">done</i>
<i class="material-icons">delete</i>
</span>
</div>`
}else{
<div class="alert alert-danger" role="alert">
</span>
</div>`
}
});
}
}
Bien, entendamos este codigo…
En primer lugar capturamos la sección en el cual se van a imprimir las tareas

que vamos a realizar.
Recuerdas que arriba ya la capturamos en una variable global llamada

listaActividadesUI.
listaActividadesUI.innerHTML = '';
Con la clase innerHTML la igualamos a vacío (= ‘’), esto nos permitirá

concatenar más adelante el diseño que vamos a imprimir en el index.html.
El arreglo global llamado arrayActividades lo igualamos al localStorage, pero

primero lo pasamos a tipo JSON.
arrayActividades = JSON.parse(localStorage.getItem('rutina'));
Validamos que este arreglo no venga vacío, ahora bien, si viene vacio no pasa
nada, de lo contrario si trae un dato, significando que ya se guardo una
tarea, entonces procedemos a imprimir en el index.html.
if(arrayActividades === null){

arrayActividades = [];
}else{
//Imprimimos los datos...
}
Realizamos un ciclo para recorrer el arreglo e ir imprimido los datos en cada

iteración.

arrayActividades.forEach(element => {
//Imprimis cada dato iterado del ciclo...
}
Realizaremos una validación de acuerdo al estado de la tarea, para generar dos

diseños diferentes, es decir, si la tarea viene con el estado en true entonces
pintamos la tarea en color verde, pero si viene en estado false, pintamos la
tarea en color rojo.
if(element.estado){
//Imprimir con el innerHTML la tarea en verde
}else{
//Imprimir con el innerHTML la tarea en rojo
}
En cada validación reutilizamos la variable definida arriba listaActividadesUI

y le concatenamos el diseño de la tarea.
if(element.estado){
<div class="alert alert-success" role="alert">
</span>
</div>`
}else{
<div class="alert alert-danger" role="alert">
</span>
</div>`
}
4. Registrar una Tarea

Hasta aquí vamos excelente, ya tenemos todo lo necesario para crear y guardar e
incluso pintar las tareas que yo quiera, pero aun nos falta crear una función de
escucha, que se ejecute al dar clic en el botón guardar del formulario.
formularioUI.addEventListener("submit", (e) => {

e.preventDefault();
let actividadUI = document.querySelector("#actividad").value;

CrearItem(actividadUI);
GuardarDB();
formularioUI.reset();
});
document.addEventListener("DOMContentLoaded", PintarDB);
Este evento al dar ‘click’ en el input de tipo submit del formulario, se

ejecutará y realizará los siguientes procesos.
Capturamos el dato que viene desde el input del formulario.
Ejecutamos la función de CrearTarea() y le pasamos como parámetro, el dato

capturado.
Ejecutamos la función de GuardarTareaLS(), para que recorra el localStorage y

pinte las tareas registradas.
Limpiamos y/o reseteamos el formulario.
Por ultimo creamos un evento Listener que se ejecute cada vez que el DOM se
recargue con nuevo dato.
5. Eliminar Tarea.
Vamos a crear la fusión para eliminar una tarea registrada en nuestra aplicación y que
sea removida desde el localStorage.
Para este proceso es importante crear dos funciones.
1. Una primera de escucha addEventListener(), que se encargue de escuchar un ‘click’

del botón eliminar que ejecute la segunda función BorrarTarea() y también va a
escuchar si se ha dado ‘click’ en la opción de cambio de estado y ejecutará la
función CambioEstado().
2. La segunda función llamada BorrarTarea(), recibirá como parámetro la posición de la

tarea dentro de del localStorage y la eliminará totalmente, y ejecutará
posteriormente la función de GuardarTareaLS(), para que recorra nuevamente el
localStorage y vuelva repintar las tareas registradas, teniendo en cuenta que
acabas de remover una.
Función que escucha el evento Click
listaActividadesUI.addEventListener("click", (e) => {

e.preventDefault();
if (e.target.innerHTML === "done" || e.target.innerHTML === "delete") {

let texto = e.path[2].childNodes[1].innerHTML;

if (e.target.innerHTML === "delete") {
// Accción de eliminar
BorrarTarea(texto);
}
if (e.target.innerHTML === "done") {
// Accción de editar el estado
CambiarEstadoTarea(texto);
}
}
});
Si recuerdas la variable listaActividadesUI, en la parte superior es quien nos

permite imprimir o pintar las tareas en el index.html, y para este caso nos servirá
para recorrerla y buscar dos palabras esenciales done y delete, el cual done será
la pablara que buscará al dar clic en el botón de editar Estado de la tarea pintada
en el index.html y ejecutará la función de CambiarEstadoTarea(), Por otro lado la
palabra delete ejecutará la función de BorrarTarea().
5.1 BorrarTarea().
Esta función recibe como parámetro el nodo o el contenido del localStorage para ser
removido con el método splice().
const BorrarTarea= (actividad) => {

let indexArray;
arrayActividades.forEach((elemento, index) => {
if (elemento.actividad === actividad) {
indexArray = index;
}
});
arrayActividades.splice(indexArray, 1);
GuardarTareaLS();
};
Analicemos este boque de código y entendámoslo.
Creamos una variable llamada indexArray, que nos permitirá capturar el índice
exacto de la tarea en el localStorage.
Recorremos el arreglo global donde tenemos todas las actividades registrdadas y

con un if() comparamos el dato que traemos por parámetro con la información que
tiene el arreglo en el contenido (Actividad) y si lo encuentra almacenamos el
índice en la variable antes definida.
ahora, ya tenemos la indice, procedemos a ejecutar el metodo splice() en el

arreglo que nos permitirá remover el elemento seleccionado.
Te invito a revisar el siguiente link para que tengas mayor

información sobre el uso del metodo splice().

JavaScript Splice: Como utilizar el metodo .splice() de arreglo en JS
Artículo original escrito por Nathan Sebhastian
[https://www.freecodecamp.org/news/author/nsebhastian/] Artículo original
JavaScript Splice - How to Use the .splice() JS Array Method
https://www.freecodecamp.org/espanol/news/javascript-splice-como-ulitizar-e
l-metodo-splice-de-arreglo-en-js/
Por ultimo ejecutamos la función de GuardarTareaLS(), para que recorra nuevamente

el localStorage y vuelva repintar las tareas registradas, teniendo en cuenta que
acabas de remover una.
5.2 CambiarEstadoTarea().
Esta función recibe como parámetro el nodo o el contenido del localStorage para que
el estado pueda ser actualizado.
const EditarDB = (actividad) => {

let indexArray = arrayActividades.findIndex(
(elemento) => elemento.actividad === actividad
);
arrayActividades[indexArray].estado = true;
GuardarTareaLS();
};
Esta función es muy sencilla, en primer lugar almacena en una variable llamada
indexArray la respuesta que trae el método findIndex() aplicada al arreglo global
de las actividades.
Recuerda que el método findIndex(), ejecuta la función de

callback una vez por cada índice del array hasta que encuentre
uno donde callback devuelva un valor verdadero (eso es, un
valor que fuerza un true ). Si dicho elemento es
encontrado, findIndex() inmediatamente devuelve el índice del
elemento
Te invito a revisar el siguiente link para que tengas mayor

información sobre el uso del metodo findIndex()
Array.prototype.findIndex() - JavaScript | MDN

El método findIndex() ejecuta la función de una vez por cada índice
del array hasta que encuentre uno donde devuelva un valor verdadero
(eso es, un valor que fuerza un true). Si dicho elemento es
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Gl
obal_Objects/Array/findIndex

Cuando ya tengamos el índice del elemento a editar, solo nos queda decirle que
el estado va hacer igual a 1 (true).
Por ultimo ejecutamos la función de GuardarTareaLS(), para que recorra

nuevamente el localStorage y vuelva repintar las tareas registradas, teniendo
en cuenta que acabas de remover una.
Listo, hemos finalizado con exito el desarrollo de la

aplicación de tareas cotidianas.
Ahora no te quedes con esto cámbiale el diseño, agregale elemento como:
Fechas.
Lugares.
Hora.
Nivel de importancia
Lo se que te ocurra…
Sin miedo al éxito.

Paso A Paso - CRUD - Localstorage - JavaScript

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Paso A Paso - CRUD - Localstorage - JavaScript

Cargado por

Copyright:

Formatos disponibles

CRUD localStorage JavaScript

1. ORGANIZACIÓN DEL PROYECTO.

El app.js, dentro de la carpeta de js, tendrá toda la funcionalidad de nuestra

el archivo index.html, será la clase principal de nuestro proyecto.

En el archivo de Index.html, realizaremos un estructura sencilla, implementando

CRUD localStorage JavaScript 1

<div id="listaActividades" class="mt-4">

Teniendo listo el html, podemos comenzar con la codificación de la funcionalidad de la

1. Variables y/o datos principales

const formularioUI = document.querySelector('#formulario');

Creamos otra constante llamada listaActividadesUI, que nos permitirá obtener el

CRUD localStorage JavaScript 2

const CrearTarea = (actividad) => {

Creamos un arreglo llamado ítem, el cual almacenará los siguientes datos

actividad : (Dato que se envía en el input del formulario)

estado : (Estado de la tarea, por defecto se envía en false)

const GuardarTareaLS = () => {

CRUD localStorage JavaScript 3

Te invito a revisar el siguiente link para tener mayor

¿Qué es y cómo utilizar localStorage y sessionStorage?

Aquí llamamos al localStorage y su método de setItem(), que recibe dos parámetros

name : “Nombre del elemento

content : “Contenido del elemento”

En este casó como nombre le colocaremos ‘rutina’ y como contenido le enviaremos

Ejecutamos la función de PintarTarea();

Esta función aún no esta creada, pero nos permitirá ir

const PintarDB = () => {

if(arrayActividades === null){

CRUD localStorage JavaScript 4

Bien, entendamos este codigo…

En primer lugar capturamos la sección en el cual se van a imprimir las tareas

Recuerdas que arriba ya la capturamos en una variable global llamada

Con la clase innerHTML la igualamos a vacío (= ‘’), esto nos permitirá

El arreglo global llamado arrayActividades lo igualamos al localStorage, pero

if(arrayActividades === null){

Realizamos un ciclo para recorrer el arreglo e ir imprimido los datos en cada

CRUD localStorage JavaScript 5

Realizaremos una validación de acuerdo al estado de la tarea, para generar dos

En cada validación reutilizamos la variable definida arriba listaActividadesUI

4. Registrar una Tarea

formularioUI.addEventListener("submit", (e) => {

CRUD localStorage JavaScript 6

Este evento al dar ‘click’ en el input de tipo submit del formulario, se

Capturamos el dato que viene desde el input del formulario.

Ejecutamos la función de CrearTarea() y le pasamos como parámetro, el dato

Ejecutamos la función de GuardarTareaLS(), para que recorra el localStorage y

Limpiamos y/o reseteamos el formulario.

Para este proceso es importante crear dos funciones.

1. Una primera de escucha addEventListener(), que se encargue de escuchar un ‘click’

2. La segunda función llamada BorrarTarea(), recibirá como parámetro la posición de la

Función que escucha el evento Click

listaActividadesUI.addEventListener("click", (e) => {

if (e.target.innerHTML === "done" || e.target.innerHTML === "delete") {

CRUD localStorage JavaScript 7

Si recuerdas la variable listaActividadesUI, en la parte superior es quien nos

const BorrarTarea= (actividad) => {

Analicemos este boque de código y entendámoslo.

Recorremos el arreglo global donde tenemos todas las actividades registrdadas y

ahora, ya tenemos la indice, procedemos a ejecutar el metodo splice() en el