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. 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.