Esta es una publicación de invitado de Baback Rashtizadeh, un diseñador independiente de UI/UX y un desarrollador front-end apasionado por la codificación y la escritura.
Casi todas las aplicaciones de escritorio o móviles necesitan almacenar datos de usuario en algún lugar. Pero ¿qué tal un sitio web? En el pasado, usábamos cookies para ese propósito, pero tienen serias limitaciones. HTML5 nos brinda mejores herramientas para resolver este problema. El primero es IndexedDB, que es una exageración como reemplazo de cookies, y Web Storage, que es una combinación de dos API muy simples y que les mostraré hoy.
¿Qué es el almacenamiento web?
En términos generales, Web Storage (también conocido como Dom Storage) se refiere a un conjunto de API que intenta proporcionar una forma sencilla de almacenar datos del lado del cliente en el navegador. Es más seguro y más rápido que las cookies, sin mencionar que es más poderoso. Los datos se almacenan en el navegador del usuario y no se transfieren a través de la red como lo hacen las cookies. También es posible almacenar mayores cantidades de datos que las cookies sin afectar el rendimiento de su sitio web.
El almacenamiento web proporciona dos objetos increíbles para almacenar datos:
- almacenamiento local: Al utilizar este objeto, almacenará datos sin fecha de caducidad, lo que significa que los datos se almacenarán en el almacenamiento local del usuario para siempre;
- sesiónAlmacenamiento: Al usar este objeto, los datos que almacenó estarán allí hasta que el visitante cierre su navegador (no la pestaña). Un buen caso de uso para esto es guardar datos temporales como el contenido de un formulario que el usuario está completando, en caso de que cierre la pestaña o vuelva a cargar la página accidentalmente.
Cómo empezar
Entonces, ahora que sabemos qué es el almacenamiento web, es hora de tenerlo en nuestras manos.
Almacenamiento local
Es muy sencillo guardar datos en localStorage - solo necesita asignarlo como una propiedad. Leerlo es exactamente igual de sencillo, como puedes ver en el siguiente ejemplo:
localStorage.myText = 'This is some text which have been stored with localStorage object';
document.getElementById("text").innerHTML= localStorage.myText; almacenamiento de sesiones
Almacenamiento y recuperación de datos de sessionStorage se hace de la misma manera:
sessionStorage.myText = 'This is some text which have been stored with sessionStorage object';
document.getElementById("text").innerHTML= sessionStorage.myText;
Ambos objetos tienen setItem() , getItem() y removeItem() métodos que también puedes usar:
localStorage.setItem('username','Johnny');
console.log(localStorage.getItem('username'));
localStorage.removeItem('username'); // Johnny is no more! También puede iterarlos como objetos regulares y verificar su longitud:
console.log(localStorage.length);
for(var i in localStorage){ console.log(localStorage[i]);} Estos son solo los conceptos básicos para usar el almacenamiento web, pero serán suficientes para implementar la API en sus aplicaciones web. Hay más cosas asombrosas que puede hacer con el almacenamiento web, como verá en un momento.
Soporte del navegador
Como suele ser el caso con las increíbles funciones de HTML5, debe consultar la lista de navegadores compatibles antes de utilizarlo. El almacenamiento web es compatible con casi todos los navegadores modernos, incluido IE8+, por lo que está listo para usar. Desafortunadamente, IE7 y las versiones anteriores de Internet Explorer no son compatibles con las API, por lo que tendrá que usar uno de los recursos alternativos que se mencionan a continuación, si desea admitirlas.
Bibliotecas de JavaScript para almacenamiento web
Aquí hay algunas bibliotecas de JavaScript geniales que llevan el almacenamiento web al siguiente nivel:
cesta.js
Un cargador de secuencias de comandos simple (prueba de concepto) que almacena secuencias de comandos con localStorage.
Kizzy
Una utilidad de almacenamiento local de JavaScript liviana, compatible con todos los navegadores.
LocalDB.js
Una herramienta que mapea la estructura de las bases de datos en objetos usando la API localStorage.
Rockstage.js
La biblioteca de JavaScript para usar localStorage y sessionStorage más fácilmente.
tienda.js
store.js expone una API simple para el almacenamiento local entre navegadores.
Conclusión
El almacenamiento web es una característica genial de HTML5 y, aunque ha pasado un tiempo desde su presentación, ahora tenemos muchas bibliotecas geniales para él. Recuerde que esta es solo una guía rápida y que aún hay más cosas que aprender sobre el almacenamiento web, ¡pero espero que este artículo lo ayude a comenzar por el camino correcto!