CursosEmpresasBlogLiveConfPrecios

LocalStorage con JSON.stringify y JSON.parse

Clase 30 de 39 • Curso de Fundamentos de JavaScript

Clase anteriorSiguiente clase
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