Cookies & Co.: opciones de almacenamiento en el navegador
Durante mucho tiempo, las cookies fueron la única opción para almacenar información localmente dentro del navegador. Incluso hoy en día se utilizan principalmente en combinación con sesiones del lado del servidor. Sin embargo, gracias a HTML5, tenemos otra opción para depositar datos localmente en el navegador. Está la «caché de aplicaciones», así como el «almacenamiento web» e IndexedDB. Pero, ¿para qué sirven las diferentes opciones de almacenamiento y qué pueden hacer?
Guardar configuraciones y sesiones usando cookies
Las cookies ya existían durante los días de Netscape. Se utilizan incluso hoy en día para guardar configuraciones para sitios web y servicios web, o para administrar sesiones. Una cookie es un archivo de texto que puede contener hasta 4 KB de texto. Puede configurar cookies a través de JavaScript o del lado del servidor a través de PHP. Son principalmente importantes en combinación con las sesiones. Ya se trate del inicio de sesión en las redes sociales o en las tiendas en línea: una cookie colocada después del inicio de sesión se asegura de que el sitio web lo reconozca como usuario. Lo especial de las cookies es que puede agregarles una fecha de caducidad. Por lo tanto, las cookies suelen tener una vida útil limitada. Si no se establece una vida útil, una cookie caducará al cerrar el navegador. En general, las cookies solo pueden ser leídas por el dominio desde el que se colocan. A menudo, también es posible restringir una cookie a ciertos subdominios o índices.
Guardar a través de «almacenamiento web»
Con la introducción de HTML5, se establecieron otras dos opciones de almacenamiento: el «Almacenamiento web», que consta de «loacalStorage» y «sessionStorage». Ambas versiones le permiten guardar variables y valores en el navegador, simplemente a través de JavaScript.
localStorage.setItem("name", "Manfred"); sessionStorage.setItem("name", "Manfred");
Mientras que el uso de «localStorage» mantendrá los datos depositados en el navegador de forma permanente, «sessionStorage» solo los conserva hasta que se cierra el navegador. A diferencia de las cookies, que son simples archivos de texto, puedes distribuir tantas variables como quieras, permitiéndote guardar y acceder a información diferente.
localStorage.getItem("name");
Si bien las cookies a menudo funcionan junto con las variables de sesión del lado del servidor, «localStorage» y «sessionStorage» solo brindan una opción de almacenamiento local.
Guardar sitios web completos sin conexión usando «Caché de la aplicación»
HTML5 se centró más en dispositivos móviles como teléfonos inteligentes y tabletas. Por lo tanto, «Caché de la aplicación» le permite hacer que un sitio web completo esté disponible sin conexión. Aquí, puede usar un llamado archivo de manifiesto que determina cuáles de los recursos de un sitio web se almacenan y están disponibles en un dispositivo.
CACHE MANIFEST index.html stylesheet.css logo.png
Este archivo inducido a través de «MANIFEST CACHE» contiene toda la información necesaria para la operación fuera de línea. Una vez descargada, no se requiere conexión a Internet para acceder a la página. A diferencia de la memoria caché del navegador, la información se guarda localmente de forma permanente, de forma similar a las aplicaciones móviles nativas. Se debe hacer referencia al archivo de manifiesto en el elemento «» de la página.
<html manifest="http://www.example.com/manifest.mf">
IndexedDB: base de datos dentro del navegador
IndexedDB y WebSQL son dos enfoques para establecer bases de datos configuradas localmente dentro del navegador. Al final, IndexedDB prevaleció. A diferencia del «Almacenamiento web», que solo permite el almacenamiento de variables simples y contenidos basados en texto, IndexedDB proporciona opciones de almacenamiento mucho más complejas. Usando IndexedDB, puede crear una base de datos completa en el navegador, donde no solo puede depositar cadenas de caracteres, sino también números y objetos.
var request = indexedDB.open("example", 1);
En el ejemplo, se configura una base de datos. Posteriormente, crea los llamados «almacenes», en los que coloca conjuntos de datos individuales.
request.onupgradeneeded = function() { var db = request.result; var store = db.createObjectStore("article", {keyPath: "id"}); var titel_index = store.createIndex("by_title", "title", {unique: true}); var autor_index = store.createIndex("by_author", "author"); store.put({title: "HTML5 and CSS3", author: "Denis", id: 123456}); store.put({title: "Mobile Apps", author: "Dieter", id: 234567}); }; request.onsuccess = function() { db = request.result; };
Aquí, se crea una «tienda» con artículos. Posteriormente, se definen dos índices, los cuales clasifican los conjuntos de datos de manera diferente. Al final, los conjuntos de datos se escriben en la base de datos mediante «put()».
Conclusión y herramientas para desarrolladores
Si desea desarrollar aplicaciones web contemporáneas con HTML5, «Caché de aplicaciones», «Almacenamiento web» e IndexedDB son tres opciones para almacenar información localmente en el navegador, así como también hacer que estén disponibles sin conexión. Este es un aspecto especialmente importante cuando se trata de aplicaciones web móviles. No se necesitan soluciones basadas en servidor. Las herramientas de desarrollo de los navegadores recientes también le permiten mostrar el contenido almacenado, así como eliminarlo si es necesario.
(dpe)
#Cookies #opciones #almacenamiento #navegador