Cursos Empresas Blog Live Conf Eventos Precios

0:007:36

Recursos

Resumen

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 localStorage
const 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.
 */
function saveToStorage(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.
 */
function loadFromStorage() {
  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.

LocalStorage con JSON.stringify y JSON.parse

Curso de Fundamentos de JavaScript

Clase 30 / 39

Ver clases

LocalStorage con JSON.stringify y JSON.parse

Curso de Fundamentos de JavaScript

Clase 30 de 39

Clase 30 / 39

LocalStorage con JSON.stringify y JSON.parse

Curso de Fundamentos de JavaScript

Clase 30 / 39

Ver clases

Miguel Lozano

Hace 3 meses

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
 */
const STORAGE_KEY = 'markdown-notes';
function obtenerStorageKey() {
  // Tu código aquí
  const STORAGE_KEY = 'markdown-notes';
  return STORAGE_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
 */
function guardarNotas(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 
 */
function cargarNotas() {
  // 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
 */
function validarYGuardar(notes) {
  // Tu código aquí
  if (!Array.isArray(notes)) {
    console.error('Los datos deben ser un array');
    return false;
  }

  guardarNotas(notes);

  return true;


}

// --- Reto 5: Limpiar localStorage ---
// Crea una función que elimine todos los datos del localStorage
// usando localStorage.removeItem con la clave global.
/**
 * Limpiar localStorage
 */
function limpiarStorage() {
  // 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
 */
function existenDatos() {
  // Tu código aquí
  if (localStorage.length <= 0 || localStorage.getItem(STORAGE_KEY) === null) {
    return false;
  }

  return true;

}

// --- 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
 */
function obtenerCantidadNotas() {
  // Tu código aquí
  const notesJSON = localStorage.getItem(STORAGE_KEY);
  const parsedJSON = JSON.parse(notesJSON);

  if(notesJSON === null || notesJSON === undefined || parsedJSON.length <= 0) return 0;

  return parsedJSON.length;
}

module.exports = {
  obtenerStorageKey,
  guardarNotas,
  cargarNotas,
  validarYGuardar,
  limpiarStorage,
  existenDatos,
  obtenerCantidadNotas,
};

Todos los test pasaron en verde 💚:

Miguel Lozano

Hace 3 meses

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
 */
const STORAGE_KEY = 'markdown-notes';
function obtenerStorageKey() {
  // Tu código aquí
  return STORAGE_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
 */
function guardarNotas(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 
 */
function cargarNotas() {
  // 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
 */
function validarYGuardar(notes) {
  // Tu código aquí
  if (!Array.isArray(notes)) {
    console.error('Los datos deben ser un array');
    return false;
  }

  guardarNotas(notes);

  return true;


}

// --- Reto 5: Limpiar localStorage ---
// Crea una función que elimine todos los datos del localStorage
// usando localStorage.removeItem con la clave global.
/**
 * Limpiar localStorage
 */
function limpiarStorage() {
  // 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
 */
function existenDatos() {
  // Tu código aquí
  if (localStorage.getItem(STORAGE_KEY) === null) {
    return false;
  }

  return true;

}

// --- 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
 */
function obtenerCantidadNotas() {
  // 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);

  return cargarNotas().length;
}

module.exports = {
  obtenerStorageKey,
  guardarNotas,
  cargarNotas,
  validarYGuardar,
  limpiarStorage,
  existenDatos,
  obtenerCantidadNotas,
};

// ============================================ // 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. function obtenerStorageKey() { // Tu código aquí const STORAGE_KEY = 'markdown-notes'; return STORAGE_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. function guardarNotas(notes) { // Tu código aquí if (notes === undefined || notes === null) { console.error('No hay notas o las notas son inválidas'); } else { const STORAGE_KEY = 'markdown-notes'; const notesJSON = JSON.stringify(notes); localStorage.setItem(STORAGE_KEY, notesJSON) } return 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. function cargarNotas() { // Tu código aquí const STORAGE_KEY = 'markdown-notes'; const notesJSON = localStorage.getItem(STORAGE_KEY); if (notesJSON === null || notesJSON === undefined) { 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. function validarYGuardar(notes) { // Tu código aquí if (!Array.isArray(notes)) { console.error('La notas no son un arreglo'); return false; } else { guardarNotas(notes); return true; } } // --- Reto 5: Limpiar localStorage --- // Crea una función que elimine todos los datos del localStorage // usando localStorage.removeItem con la clave global. function limpiarStorage() { // Tu código aquí const STORAGE_KEY = 'markdown-notes'; const notes = localStorage.removeItem(STORAGE_KEY); return notes; } // --- 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. function existenDatos() { // Tu código aquí const STORAGE_KEY = 'markdown-notes'; const notesJSON = localStorage.getItem(STORAGE_KEY); if (notesJSON !== null && notesJSON !== undefined) { return notesJSON; } else return ('No existen datos'); } // --- Reto 7: Obtener cantidad de notas --- // Carga las notas desde localStorage y retorna la cantidad. // Si no hay notas, retorna 0. function obtenerCantidadNotas() { // Tu código aquí const notes = cargarNotas(); return notes.length; } module.exports = { obtenerStorageKey, guardarNotas, cargarNotas, validarYGuardar, limpiarStorage, existenDatos, obtenerCantidadNotas, };

// 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 */ const STORAGE_KEY = 'markdown-notes'; function obtenerStorageKey() { // Tu código aquí const STORAGE_KEY = 'markdown-notes'; return STORAGE_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 */ function guardarNotas(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 */ function cargarNotas() { // 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 */ function validarYGuardar(notes) { // Tu código aquí if (!Array.isArray(notes)) { console.error('Los datos deben ser un array'); return false; } guardarNotas(notes); return true; } // --- Reto 5: Limpiar localStorage --- // Crea una función que elimine todos los datos del localStorage // usando localStorage.removeItem con la clave global. /** * Limpiar localStorage */ function limpiarStorage() { // 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 */ function existenDatos() { // Tu código aquí if (localStorage.length <= 0 || localStorage.getItem(STORAGE_KEY) === null) { return false; } return true; } // --- 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 */ function obtenerCantidadNotas() { // Tu código aquí const notesJSON = localStorage.getItem(STORAGE_KEY); const parsedJSON = JSON.parse(notesJSON); if(notesJSON === null || notesJSON === undefined || parsedJSON.length <= 0) return 0; return parsedJSON.length; } module.exports = { obtenerStorageKey, guardarNotas, cargarNotas, validarYGuardar, limpiarStorage, existenDatos, obtenerCantidadNotas, };

Recursos

Resumen

LocalStorage con JSON.stringify y JSON.parse

LocalStorage con JSON.stringify y JSON.parse

LocalStorage con JSON.stringify y JSON.parse

Progreso del curso

Fundamentos Javascript

Funciones, Scope y Estructuras de Datos

DOM y Experiencia en el Navegador

Modulos y Asincronía

LocalStorage con JSON.stringify y JSON.parse

LocalStorage con JSON.stringify y JSON.parse

Recursos

Resumen

¿Cómo implementar la persistencia con local storage?

¿Qué clave de almacenamiento usar en local storage?

¿Cómo guardar notas con JSON.stringify y setItem?

¿Cómo cargar notas con getItem y JSON.parse?

¿Por qué documentar funciones con yesdoc?

¿Cómo mejora Prettier el flujo de trabajo?

Comentarios

Recursos

Resumen

¿Cómo implementar la persistencia con local storage?

¿Qué clave de almacenamiento usar en local storage?

¿Cómo guardar notas con JSON.stringify y setItem?

¿Cómo cargar notas con getItem y JSON.parse?

¿Por qué documentar funciones con yesdoc?

¿Cómo mejora Prettier el flujo de trabajo?

Comentarios