Lección 10: Almacenamiento

Al refrescar o abandona una página, la información que estaba en las variables desaparece. Todo vuelve a empezar como el día de la marmota. Los datos usados en las variables se evapora sin dejar rastro ni sentir piedad. A no ser que nos apoyemos en un backend, quien a su vez está interconectado con una base de datos. O al menos así ha sido tradicionalmente. Por fortuna las herramientas evolucionan y en frontend con cierta intensidad. Podemos guardar información en el navegador del usuario, y ¡recogerla cuando la necesitemos! Incluso estructurada como si fuera una base de datos relacional o NoSQL.

dataset

Nos otorga la habilidad de guardar información, sin romper el estándar, en los elementos HTML. Muy útil cuando quieres comunicar el HTML con JavaScript o dar ciertos parámetros de configuración a los diseñadores Web.

Para ello puedes declarar una llave en forma de atributo que debe empezar por data-.

<article
  class="personaje-historico"
  data-nombre="Charles Darwin"
  data-campos="historia natural y geología"
  data-anyo-de-muerte="1882"
>
...
</article>

Para utilizarlos desde el Front haremos uso de dataset.

const miArticulo = document.querySelector('.personaje-historico');

miArticle.dataset.nombre // "Charles Darwin"
miArticle.dataset.campos // "historia natural y geología"
miArticle.dataset.anyoDeMuerte // "1882"

¿Qué ha pasado con anyo-de-muerte? La regla es sencilla: si tienes espacios debes usar Kebab case (soy-un-ejemplo) en HTML pero Camel case en JavaScript (soyUnEjemplo). Puedes ver ampliar en el siguiente artículo.

Esta información es de solo lectura, no es posible modificarla a no ser que sea generado desde un backend.

localstorage

Permite guardar datos en el navegador que se mantiene accesible de forma ilimitada aunque se cierre el navegador, siendo posible su recuperación en las siguientes visitas (a no ser que este en una pestaña en modo incógnito o privado). Su concepto es similar a las viejas Cookies.

No debes usar Cookies existiendo LocalStorage ya que moderniza y simplifica su uso además aumenta el límite de memoria de 4KB de las Cookies a 5Mb del LocalStorage.

Guardar

const miLocalStorage = window.localStorage;
miLocalStorage.setItem('regalo', 'calcetines');

Guardar arrays o JSONs

Usaremos JSON.strigify() para codificar la información.

const miLocalStorage = window.localStorage;
miLocalStorage.setItem('regalo', JSON.stringify(['piruleta', 'tren', 'consola']));

Leer

const miLocalStorage = window.localStorage;
const regalo = miLocalStorage.getItem('regalo');

console.log(regalo);
// 'calcetines'

Si estaba almacenado un array o JSON.

const miLocalStorage = window.localStorage;
const regalo = JSON.parse(miLocalStorage.getItem('regalo'));

console.log(regalo);
// ['piruleta', 'tren', 'consola']

Borrar un elemento

const miLocalStorage = window.localStorage;
localStorage.removeItem('regalo');

Borrar todo

const miLocalStorage = window.localStorage;
localStorage.clear();

IndexedDB

Permite guardar grandes cantidades de información en un formato estructurado y ordenado. Además nos deja almacenar archivos o blobs. Su concepto es similar a disponer de una base de datos directamente en el lado del cliente.

Al ser un una implementación de bajo nivel se recomienda usar una biblioteca para aumentar la productividad, además que incorporan abstracciones que ayudan en su aprendizaje.

Entre las más recomendables podemos encontrar:

Dexies.js: Minimalista abstracción de IndexedDB.
LocalForage: Base de datos clave-valor.
ZangoDB: Base de datos NoSQL MongoDB-like.
pouchdb: Base de datos NoSQL CouchDB-like.
lovefield: Base de datos relacionales.

Actividad 1

Diseña un cuadrado con fondo rojo usando el siguiente HTML.

<div data-encendido="true"></div>

Si data-encendido es true, su fondo será rojo. Si data-encendido es false, será negro.

Amplia con data-enchufes.

<div data-encendido="true" data-enchufes="6"></div>

Genera dentro de la etiqueta x circulos dependiendo de data-enchufes. Con un div usando border-radius: 50% será suficiente, aunque puedes usar imágenes.

Actividad 2

Crea una Web donde podamos apuntar nuestro peso diario. Necesitarás 2 campos:

Peso de tipo float.
Fecha de tipo Date.

Los requisitos son que debe recordar los datos, cada vez que entremos estará presente el contenido anterior.

Nivel pesadilla 👹

Debe calcular el peso promedio que se está perdiendo.
Construye una gráfica visualmente atractiva.

Actividad 3

Muestra un cartel que solo se pueda visualizar en la primera ocasión. Si refrescamos, o entramos de nuevo, no volverá a aparecer.

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

Comprame un café — Pulsa sobre la imagen

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}

Escribe el primer comentario