Base De Datos En JavaScript, localStorage

¿Sabías que puedes convertir tu navegador en una base de datos para tus aplicaciones web? Si trabajas con JavaScript, el manejo de datos usando localStorage en formato JSON te puede ahorrar tiempo y esfuerzo. En este artículo, exploraremos cómo almacenar, leer, actualizar y eliminar datos paso a paso utilizando ejemplos claros y fáciles de entender.

¿Qué es localStorage y por qué usarlo como base de datos?

El localStorage es una API nativa de los navegadores que permite almacenar datos en pares clave-valor. A diferencia de las cookies, localStorage no expira y puede guardar hasta 5 MB de datos, lo que lo hace ideal para gestionar información de forma simple en aplicaciones web pequeñas o medianas.

Ventajas del localStorage:

• Almacena datos de manera persistente.
• No requiere configuraciones adicionales como bases de datos externas.
• Ideal para prototipos o datos no sensibles.

Cómo trabajar con datos JSON en localStorage

Los datos que almacenamos en localStorage deben ser convertidos al formato JSON porque esta API solo trabaja con cadenas de texto. Aquí tienes una guía paso a paso:

Convertir un Objeto JavaScript a JSON

Primero, cualquier dato que quieras guardar debe ser convertido a JSON. Esto lo hacemos usando JSON.stringify(). Observa este ejemplo:

const person = {
  name: "Anas Dev"
};

const personToJSON = JSON.stringify(person);
console.log(personToJSON); // {"name":"Anas Dev"}

En este caso, el objeto person se transformó en un string JSON que ahora podemos guardar en localStorage.

Guardar un Registro en localStorage

Para almacenar datos, usamos el método setItem(), donde asignamos una clave y su valor. Aquí tienes el código:

localStorage.setItem("person", personToJSON);

Esto guarda el registro con la clave "person" en la base de datos del navegador.

Leer un Registro desde localStorage

Para leer un registro, utilizamos el método getItem(). Debemos convertir el JSON almacenado nuevamente a un objeto JavaScript con JSON.parse():

const JSONToPerson = JSON.parse(localStorage.getItem("person"));
console.log(JSONToPerson); // {name: "Anas Dev"}

Ahora puedes acceder a los datos como lo harías con cualquier objeto JavaScript.

Actualización y eliminación de datos en localStorage

Actualizar un Registro

Actualizar datos en localStorage es tan simple como sobrescribir el registro existente con una nueva versión:

const updatedPerson = {
  name: "Anas Dev",
  age: 22
};

const updatedPersonToJSON = JSON.stringify(updatedPerson);
localStorage.setItem("person", updatedPersonToJSON);

El método setItem() sobrescribe automáticamente el valor asociado a la clave.

Eliminar un Registro

Eliminar datos es sencillo con removeItem(). Solo necesitas pasar la clave del registro que deseas eliminar:

localStorage.removeItem("person");

Esto borra el registro "person" de la base de datos del navegador.

¿Cuándo usar localStorage en proyectos reales?

El localStorage es ideal para almacenar datos no sensibles, como configuraciones de usuario, temas visuales, o preferencias locales. Sin embargo, no se recomienda para datos confidenciales, ya que no ofrece seguridad avanzada.

Conclusión

Trabajar con localStorage y JSON es una solución práctica para pequeños proyectos web.