Aprende a implementar un sistema de persistencia para tus notas usando local storage en JavaScript. Verás cómo guardar y cargar datos con JSON.stringify y JSON.parse, aplicar validaciones para evitar errores y documentar funciones con formato yesdoc. Además, integra Prettier para mantener un código limpio, consistente y fácil de leer.
¿Cómo implementar la persistencia con local storage?
Construir la persistencia implica definir una clave de almacenamiento global, crear funciones para guardar y leer desde local storage y asegurar datos válidos. El flujo se apoya en JSON para serializar y parsear la información.
¿Qué clave de almacenamiento usar en local storage?
Define una variable global para reutilizarla en todo el proyecto.
Usa un nombre claro y estable para identificar las notas.
// Clave global para el almacenamiento en localStorageconst storageKey ='markdown-notes';
¿Cómo guardar notas con JSON.stringify y setItem?
Valida que el parámetro no sea undefined o null.
Serializa con JSON.stringify antes de guardar.
Usa localStorage.setItem con la clave global.
/**
* Guarda las notas en local storage.
* @param{Array}notes - array de notas a guardar.
*/functionsaveToStorage(notes){if(notes ===undefined|| notes ===null){console.error('No se pueden guardar notas, datos inválidos');return;// Evita continuar con el guardado.}const notesJSON =JSON.stringify(notes);localStorage.setItem(storageKey, notesJSON);}
Conceptos aplicados: validación de datos, serialización JSON, uso de console.error, control de flujo con return y setItem en localStorage.
¿Cómo cargar notas con getItem y JSON.parse?
Lee el valor con localStorage.getItem.
Si no hay datos, retorna un array vacío.
Parse a objeto iterable con JSON.parse.
Verifica el tipo con Array.isArray antes de asignar.
/**
* Carga las notas desde el local storage.
* @returns{Array} array de notas o array vacío si no hay datos.
*/functionloadFromStorage(){const notesJSON =localStorage.getItem(storageKey);if(notesJSON ===null|| notesJSON ===undefined){return[];}let notes =[];const parsedNotes =JSON.parse(notesJSON);if(Array.isArray(parsedNotes)){ notes = parsedNotes;}return notes;}
Conceptos aplicados: lectura desde almacenamiento, parseo JSON, verificación de tipo con Array.isArray, retorno seguro con array vacío.
¿Por qué documentar funciones con yesdoc?
La documentación breve y clara facilita el mantenimiento y el uso de las funciones. Con formato yesdoc, se deja explícito qué hace cada función, qué parámetros recibe y qué devuelve.
Descripción directa: qué hace la función en una línea.
@param: tipo y significado del argumento, por ejemplo, array de notas a guardar.
@returns: forma del retorno, por ejemplo, array de notas o array vacío.
Beneficio clave: legibilidad y estandarización en todo el código.
¿Cómo mejora Prettier el flujo de trabajo?
Integrar Prettier al editor permite formatear el código al guardar. Así se aseguran puntos y comas, indentación correcta y una estructura consistente. Como “la cereza del pastel”, automatiza el estilo para que el foco sea la lógica.
Formatea al guardar cambios.
Organiza el código y agrega puntos y comas.
Corrige indentación y espaciados.
Produce una sintaxis amigable y lista para leer.
¿Te gustaría compartir cómo estructuraste tus funciones o qué validaciones agregaste? Deja tus dudas o comentarios para seguir mejorando juntos.
Mis notas sobre lo que se hizo en el código explicado:
Se crea en la parte superior la lógica de persistencia al declarar STORAGE_KEY.
Como dato importante, está en MAYÚSCULAS para avisar que esa variable es una constante "pura": un valor que no debe cambiar en toda la ejecución, como una llave de configuración o un identificador fijo.Es como poner una señal de "no tocar" en el código.
Se continúa con funciones de guardado de storage, enfatizando en la importancia de documentar lo que hace cada función, lo que retorna y sus parámetros.
Primero se crea saveToStorage(), recibe notas. Se valida con un if si esas notas son undefined o null, de ser así se regresa un error y se detiene el código con un return para evitar que siga guardando.
Continuando con el else, se crea la constante notesJSON, que convierte al objeto recibido como parámetro (notas) a texto, implementando: JSON.stringify(notes)
Se guardan esas notas en el storage con localStorage.setItem(STORAGE_KEY,notesJSON);
Nota: localStorage solo entiende cadenas de texto, por eso es necesario usar stringify
setItem es un método que recibe dos argumentos obligatorios: el identificador (la llave) y el valor (el dato). STORAGE_KEY es el nombre único que elegimos para encontrar ese dato después. notesJSON es el valor, que ya transformamos a texto para que el navegador pueda guardarlo.
Después se crea la función que carga las notas (loadFromStorage()). En ella se declara la constante notesJSON, que obtiene el contenido del storage usando localStorage.getItem(STORAGE_KEY);
Se valida si notesJSON es nulo o indefinido, de ser así, se retorna un array vacío.
Si notesJSON tienen un valor, se declara un array vacío llamado notes que se usará más adelante.
Se vuelven a transformar las notas obtenidas - de string a un objeto iterable usando parse: JSON.parse(notesJSON) y se le asignan a la variable parsedNotes
se comprueba que estas notas son array usando if(Array.isArray(parsedNotes);
Se le asigna el valor de parsedNotes al array vacío creado anteriormente (notes).
Se retorna notes.
Mi solución:
// Reto 25: LocalStorage con JSON.stringify y JSON.parse// Aprende a implementar un sistema de persistencia para tus notas usando local storage en JavaScript. Verás cómo guardar y cargar datos con JSON.stringify y JSON.parse, aplicar validaciones para evitar errores y documentar funciones con formato yesdoc.// Conceptos clave// localStorage: Almacenamiento persistente en el navegador// JSON.stringify: Convertir objetos a strings para almacenamiento// JSON.parse: Convertir strings a objetos para uso// Validación de datos: Verificar tipos antes de procesar// Array.isArray: Comprobar si un valor es un array// console.error: Mostrar mensajes de error// setItem/getItem/removeItem: Métodos de localStorage// ============================================// Reto: LocalStorage con JSON.stringify y JSON.parse// ============================================// Completa cada función según las instrucciones.// Ejecuta los tests con: npx vitest src/25-localstorage-json// ============================================// --- Reto 1: Definir clave de almacenamiento ---// Declara una constante llamada STORAGE_KEY con el valor 'markdown-notes'// y retórnala./**
* Declarar const de local storage
* @returns{string} Clave del localStorage
*/constSTORAGE_KEY='markdown-notes';functionobtenerStorageKey(){// Tu código aquíconstSTORAGE_KEY='markdown-notes';returnSTORAGE_KEY;}// --- Reto 2: Guardar datos en localStorage ---// Crea una función que guarde notas en localStorage.// Debe validar que el parámetro no sea undefined o null.// Usa JSON.stringify para serializar los datos.// Usa localStorage.setItem con la clave global./**
* Guardar notas en el localStorage
* @param{Array}Array de notas a guardar
*/functionguardarNotas(notes){// Tu código aquíif(notes ===undefined|| notes ===null){console.error('No se pueden guardar notas, datos inválidos')return;}const notesJSON =JSON.stringify(notes);localStorage.setItem(STORAGE_KEY, notesJSON);}// --- Reto 3: Cargar datos desde localStorage ---// Crea una función que cargue notas desde localStorage.// Si no hay datos, retorna un array vacío.// Usa JSON.parse para convertir los datos.// Verifica que el resultado sea un array con Array.isArray./**
* Cargar las notas desde el localStorage
* @returns{Array} Array de notas o vacio si no hay datos
*/functioncargarNotas(){// Tu código aquíconst notesJSON =localStorage.getItem(STORAGE_KEY);if(notesJSON ===undefined|| notesJSON ===null){return[];}let notes =[];const parsedNotes =JSON.parse(notesJSON);if(Array.isArray(parsedNotes)){ notes = parsedNotes;}return notes;}// --- Reto 4: Validar datos antes de guardar ---// Crea una función que valide si los datos son un array antes de guardar.// Si no es un array, muestra un error con console.error y retorna false.// Si es válido, llama a guardarNotas y retorna true./**
* Validar datos antes de guardar
* @param{Array}Si no es un Array muestra error y retorna false si es valido llama a guardarNotas y retorna true
*/functionvalidarYGuardar(notes){// Tu código aquíif(!Array.isArray(notes)){console.error('Los datos deben ser un array');returnfalse;}guardarNotas(notes);returntrue;}// --- Reto 5: Limpiar localStorage ---// Crea una función que elimine todos los datos del localStorage// usando localStorage.removeItem con la clave global./**
* Limpiar localStorage
*/functionlimpiarStorage(){// Tu código aquílocalStorage.removeItem(STORAGE_KEY);}// --- Reto 6: Verificar si existen datos ---// Crea una función que verifique si existen datos en localStorage.// Retorna true si hay datos, false si no hay datos o es null./**
* Verificar si hay datos en localStorage true si hay false si no o es null
* @returns{Boolean} true si hay datos false si no o es null
*/functionexistenDatos(){// Tu código aquíif(localStorage.length<=0||localStorage.getItem(STORAGE_KEY)===null){returnfalse;}returntrue;}// --- Reto 7: Obtener cantidad de notas ---// Carga las notas desde localStorage y retorna la cantidad.// Si no hay notas, retorna 0./**
* Obtener cantidad de notas
* @returns{Number} Retorna cantidad si no hay notas retorna 0
*/functionobtenerCantidadNotas(){// Tu código aquíconst notesJSON =localStorage.getItem(STORAGE_KEY);const parsedJSON =JSON.parse(notesJSON);if(notesJSON ===null|| notesJSON ===undefined|| parsedJSON.length<=0)return0;return parsedJSON.length;}module.exports={ obtenerStorageKey, guardarNotas, cargarNotas, validarYGuardar, limpiarStorage, existenDatos, obtenerCantidadNotas,};
Todos los test pasaron en verde 💚:
Actualizado:
// Reto 25: LocalStorage con JSON.stringify y JSON.parse// Aprende a implementar un sistema de persistencia para tus notas usando local storage en JavaScript. Verás cómo guardar y cargar datos con JSON.stringify y JSON.parse, aplicar validaciones para evitar errores y documentar funciones con formato yesdoc.// Conceptos clave// localStorage: Almacenamiento persistente en el navegador// JSON.stringify: Convertir objetos a strings para almacenamiento// JSON.parse: Convertir strings a objetos para uso// Validación de datos: Verificar tipos antes de procesar// Array.isArray: Comprobar si un valor es un array// console.error: Mostrar mensajes de error// setItem/getItem/removeItem: Métodos de localStorage// ============================================// Reto: LocalStorage con JSON.stringify y JSON.parse// ============================================// Completa cada función según las instrucciones.// Ejecuta los tests con: npx vitest src/25-localstorage-json// ============================================// --- Reto 1: Definir clave de almacenamiento ---// Declara una constante llamada STORAGE_KEY con el valor 'markdown-notes'// y retórnala./**
* Declarar const de local storage
* @returns{string} Clave del localStorage
*/constSTORAGE_KEY='markdown-notes';functionobtenerStorageKey(){// Tu código aquíreturnSTORAGE_KEY;}// --- Reto 2: Guardar datos en localStorage ---// Crea una función que guarde notas en localStorage.// Debe validar que el parámetro no sea undefined o null.// Usa JSON.stringify para serializar los datos.// Usa localStorage.setItem con la clave global./**
* Guardar notas en el localStorage
* @param{Array}Array de notas a guardar
*/functionguardarNotas(notes){// Tu código aquíif(notes ===undefined|| notes ===null){console.error('No se pueden guardar notas, datos inválidos')return;}const notesJSON =JSON.stringify(notes);localStorage.setItem(STORAGE_KEY, notesJSON);}// --- Reto 3: Cargar datos desde localStorage ---// Crea una función que cargue notas desde localStorage.// Si no hay datos, retorna un array vacío.// Usa JSON.parse para convertir los datos.// Verifica que el resultado sea un array con Array.isArray./**
* Cargar las notas desde el localStorage
* @returns{Array} Array de notas o vacio si no hay datos
*/functioncargarNotas(){// Tu código aquíconst notesJSON =localStorage.getItem(STORAGE_KEY);if(notesJSON ===undefined|| notesJSON ===null){return[];}let notes =[];const parsedNotes =JSON.parse(notesJSON);if(Array.isArray(parsedNotes)){ notes = parsedNotes;}return notes;}// --- Reto 4: Validar datos antes de guardar ---// Crea una función que valide si los datos son un array antes de guardar.// Si no es un array, muestra un error con console.error y retorna false.// Si es válido, llama a guardarNotas y retorna true./**
* Validar datos antes de guardar
* @param{Array}Si no es un Array muestra error y retorna false si es valido llama a guardarNotas y retorna true
*/functionvalidarYGuardar(notes){// Tu código aquíif(!Array.isArray(notes)){console.error('Los datos deben ser un array');returnfalse;}guardarNotas(notes);returntrue;}// --- Reto 5: Limpiar localStorage ---// Crea una función que elimine todos los datos del localStorage// usando localStorage.removeItem con la clave global./**
* Limpiar localStorage
*/functionlimpiarStorage(){// Tu código aquílocalStorage.removeItem(STORAGE_KEY);}// --- Reto 6: Verificar si existen datos ---// Crea una función que verifique si existen datos en localStorage.// Retorna true si hay datos, false si no hay datos o es null./**
* Verificar si hay datos en localStorage true si hay false si no o es null
* @returns{Boolean} true si hay datos false si no o es null
*/functionexistenDatos(){// Tu código aquíif(localStorage.getItem(STORAGE_KEY)===null){returnfalse;}returntrue;}// --- Reto 7: Obtener cantidad de notas ---// Carga las notas desde localStorage y retorna la cantidad.// Si no hay notas, retorna 0./**
* Obtener cantidad de notas
* @returns{Number} Retorna cantidad si no hay notas retorna 0
*/functionobtenerCantidadNotas(){// Tu código aquí// const notesJSON = localStorage.getItem(STORAGE_KEY);// if(notesJSON === null || notesJSON === undefined || notesJSON.length <= 0) return 0;// const parsedJSON = JSON.parse(notesJSON);returncargarNotas().length;}module.exports={ obtenerStorageKey, guardarNotas, cargarNotas, validarYGuardar, limpiarStorage, existenDatos, obtenerCantidadNotas,};
