hunger-413685_1280-768x512

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 «almacenamiento local» y «almacenamiento de sesión». 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 aplicaciones»

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.

El archivo de manifiesto debe estar referenciado 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 contenido basado en texto, IndexedDB ofrece 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 a través de «put()».

Conclusión y herramientas para desarrolladores

chrome_entwicklertools_speicher

Herramientas para desarrolladores en Chrome

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

Publicaciones Similares

Deja una respuesta

Tu dirección de correo electrónico no será publicada.