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.

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

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

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

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

Acepto la política de Protección de Datos.

Publicar ¡Publicado! ¡Ups! Algo ha fallado, ¿Reintentamos? Enviando...

Escribe el primer comentario