El almacenamiento local es una útil herramienta de desarrollo web que permite a los desarrolladores guardar datos en el navegador del usuario. En este artículo, veremos diferentes características del almacenamiento local, comenzando con ejemplos de nivel principiante y continuando con técnicas más complejas. Al final de esta guía, tendrá una comprensión básica de cómo utilizar con éxito el almacenamiento local en aplicaciones web.

Ejemplos de nivel principiante sobre almacenamiento local

1. Almacenamiento de preferencias del usuario:

    Choose a theme:
    LightDarkMediumSave Preference

    

Cuando el usuario selecciona un tema y presiona el botón "Guardar preferencia", este código registra el tema en la consola. Para leer este registro, abra las herramientas de desarrollo del navegador (normalmente presionando F12 o haciendo clic derecho en la página y seleccionando "Inspeccionar") y vaya a la pestaña de la consola. (Leer más)

2. Recordar la entrada del usuario:

    Save Input

    

Este ejemplo HTML genera una página web simple que permite a los usuarios ingresar texto en un campo de texto y guardarlo en el almacenamiento local de su navegador.

Cuando un usuario escribe texto en el cuadro de entrada y presiona el botón "Guardar entrada", el texto se guarda en el almacenamiento local del navegador. Esto implica que incluso si los usuarios actualizan el sitio web o cierran y vuelven a abrir el navegador, la entrada guardada seguirá siendo accesible. El registro y la alerta de la consola notifican al usuario que su entrada se ha guardado correctamente. (Leer más)

3. Persistencia del carrito de compras:

    
Shopping Cart
    

Este ejemplo muestra cómo guardar un carrito de compras usando el almacenamiento local. Los artículos agregados al carrito se guardan como una matriz en el almacenamiento local bajo la clave "carrito". Cuando se carga la página, los artículos del carrito guardados se extraen del almacenamiento local y se muestran.

Cuando hace clic en uno de los botones "Agregar artículo X al carrito", el artículo apropiado se agrega al carrito de compras y el contenido actualizado del carrito se muestra en la consola. Para inspeccionar estos registros, abra las herramientas de desarrollo del navegador (normalmente presionando F12 o haciendo clic derecho en la página y seleccionando "Inspeccionar") y vaya a la pestaña de la consola.

También puede ver el almacenamiento local directamente a través de las herramientas de desarrollo del navegador. La mayoría de los navegadores le permiten hacer esto haciendo clic derecho en la página, seleccionando "Inspeccionar" para obtener las herramientas de desarrollo y luego navegando a la pestaña "Aplicación" o "Almacenamiento". Desde allí, expanda la sección "Almacenamiento local" para ver los pares clave-valor del sitio web. En este ejemplo, la clave "carrito" incluye la cadena JSON que representa los artículos guardados del carrito.
Lea el artículo completo: Dominar el almacenamiento local en el desarrollo web: ¡8 ejemplos prácticos, desde principiantes hasta expertos!

Aprenda Json: haga clic aquí