Cómo administrar el almacenamiento sin conexión en HTML5

HTML5 introdujo muchas APIs de almacenamiento que te permiten almacenar una gran cantidad de datos localmente en los navegadores de tus usuarios. Sin embargo, la cantidad de espacio asignado a cada app se limita, de forma predeterminada, a unos pocos megabytes. Google Chrome te permite solicitar una cuota de almacenamiento mayor, que supera el límite anterior de solo 5 MB.

En este documento, se presentan los conceptos básicos relacionados con los tipos de almacenamiento que se usan en Chrome y se describe la API experimental de Administración de cuotas, que te permite administrar tu cuota de almacenamiento. En el documento, se supone que ya conoces los conceptos generales del almacenamiento del cliente y que sabes cómo usar las APIs sin conexión.

Contenido

  1. Tipos de almacenamiento
    1. Temporal
    2. Persistente
    3. Ilimitada
    4. Cómo comparar tipos de almacenamiento
  2. Administrar la cuota
    1. Cómo consultar el uso y la disponibilidad del almacenamiento
    2. Cómo solicitar más almacenamiento
    3. Restablece la cuota para pruebas
  3. Referencia de la API
    1. Constantes
    2. Descripción general de los métodos
    3. Métodos
  4. Desarrollo futuro

Tipos de almacenamiento

En Google Chrome, puedes solicitar tres tipos de almacenamiento:

Estos tipos de almacenamiento se describen con más detalle en las siguientes secciones y se comparan entre sí en la tabla que figura a continuación.

Almacenamiento temporal

El almacenamiento temporal es un almacenamiento transitorio que está disponible para cualquier app web. Chrome le otorga almacenamiento temporal automáticamente a tu app, por lo que no necesitas solicitar una asignación.

Comparte el grupo

El almacenamiento temporal se comparte entre todas las apps web que se ejecutan en el navegador. El grupo compartido puede ser hasta 1/3 del espacio disponible en el disco. El almacenamiento que ya usan las apps se incluye en el cálculo del grupo compartido; es decir, el cálculo se basa en (available storage space + storage being used by apps) * .333 .

Cada app puede tener hasta el 20% del grupo compartido. Por ejemplo, si el espacio total en disco disponible es de 60 GB, el grupo compartido es de 20 GB, y la app puede tener hasta 4 GB. Esto se calcula a partir del 20% (hasta 4 GB) de 1/3 (hasta 20 GB) del espacio en disco disponible (60 GB).

Pedir más espacio

Si bien puedes consultar la cantidad de espacio de almacenamiento disponible y de datos para tu app, no puedes solicitar más espacio de almacenamiento temporal. Si una app supera la cuota asignada, se mostrará un error.

El almacenamiento está por agotarse

Una vez que se supera la cuota de almacenamiento para todo el grupo, se borran todos los datos almacenados para el host menos usado recientemente. Sin embargo, el navegador no eliminará definitivamente los datos que se encuentren en LocalStorage y SessionStorage. En el caso de los datos almacenados en otras APIs sin conexión, el navegador borra los datos en su totalidad y no en parte para que los datos de la app no se dañen de manera inesperada.

Como cada app está limitada a un máximo del 20% del grupo de almacenamiento, es probable que la eliminación se realice solo si el usuario ejecuta de forma activa más de cinco apps sin conexión que usen el almacenamiento máximo cada una.

Sin embargo, el espacio de almacenamiento disponible puede reducirse a medida que los usuarios agregan más archivos en sus discos duros. Cuando queda poco espacio disponible en el disco (recuerda que el grupo compartido solo obtiene la mitad del espacio actual disponible), el navegador borra todos los datos almacenados para el host que menos se usó recientemente.

Almacenamiento persistente

El almacenamiento persistente es aquel que permanece en el navegador, a menos que el usuario lo elimine definitivamente. Solo está disponible para apps que usan la API de File System, pero en algún momento estará disponible para otras APIs sin conexión, como IndexedDB y Application Cache.

Una aplicación puede tener una cuota mayor de almacenamiento persistente que de almacenamiento temporal, pero debes solicitar almacenamiento mediante la API de administración de cuotas y el usuario debe otorgarte permiso para usar más espacio. Chrome presenta una barra de información que le solicita al usuario que otorgue más espacio de almacenamiento local a la app.

Almacenamiento ilimitado

El almacenamiento ilimitado es similar al almacenamiento persistente, pero solo está disponible para las apps y extensiones (archivos .crx) de Chrome. El tamaño del almacenamiento ilimitado solo está limitado por la disponibilidad de espacio en el disco duro del usuario. Puedes solicitar el permiso unlimitedStorage en el archivo de manifiesto para una app o extensión. Durante la instalación, se le informa al usuario los permisos que requiere la app o extensión. Cuando se realiza la instalación, el usuario otorga permiso de manera implícita a todas las páginas cuyas URLs se enumeran en el archivo manifest.json.

Si deseas obtener más información, consulta las respectivas guías para desarrolladores sobre aplicaciones y extensiones.

Comparación de tipos de almacenamiento

En la siguiente tabla, se describen las diferencias entre los tres tipos de almacenamiento.

 Almacenamiento temporalAlmacenamiento persistenteAlmacenamiento ilimitado
Descripción básica

Almacenamiento transitorio que está disponible para cualquier app web.

Es automático y no necesita solicitarse.

Almacenamiento permanente que los usuarios deben solicitar mediante la API de administración de cuotas y otorgarlo.

Almacenamiento permanente para extensiones y apps de Chrome.

Se establece en el archivo de manifiesto y se lo deben otorgar los usuarios.

Disponibilidad

Todas las apps web.

Todas las apps web.Único para las extensiones de Chrome y para las aplicaciones web alojadas e instaladas
PermisoNingún contenido de este tipo Puedes usarlo sin solicitarlo explícitamente.

Debes solicitar más almacenamiento con la API de administración de cuotas.

Puedes solicitar el permiso unlimitedStorage en el archivo de manifiesto para la app o la extensión.
Experiencia del usuario en el primer usoInvisible para el usuario. La app simplemente se ejecuta.

Chrome muestra una barra de información que le indica al usuario que acepte o rechace la solicitud de almacenamiento.

Sin embargo, si la cantidad de cuota que solicitas es en realidad menor que la asignación actual de la app, no se mostrará ningún mensaje. Se conserva la cuota mayor.

Durante la instalación, se informa al usuario sobre los permisos que requiere la app o extensión. Cuando se realiza la instalación, el usuario otorga permiso implícitamente a todas las páginas cuyas URLs se enumeran en el archivo manifest.json para app o extension.

Experiencia del usuario en solicitudes posteriores de mayor almacenamientoNo aplicable. No puedes solicitar más almacenamiento temporal.

Chrome le vuelve a preguntar al usuario.

 

Chrome no le pregunta al usuario después de la instalación, independientemente de las solicitudes de aumento de cuota por parte de la app o extensión.
Persistencia de datos

Transitorios. El navegador puede borrar los datos.

Permanente. El navegador no borra los datos, a menos que el usuario se lo indique. Los datos están disponibles en accesos posteriores.

No des por sentado que los datos son permanentes, ya que el usuario puede borrarlos.

Igual que el almacenamiento persistente.

 

Espacio de almacenamiento predeterminado

Hasta el 20% del grupo compartido.

0 MB. Tienes que pedir explícitamente un espacio de almacenamiento específico.

0 MB. Debes solicitar unlimitedStorage de manera explícita en el archivo de manifiesto.

Si no especificas tus requisitos de almacenamiento, Chrome asigna almacenamiento a la app desde el conjunto compartido de almacenamiento temporal.

Espacio máximo de almacenamientoHasta el 20% del grupo compartido.Tan grande como el espacio disponible en el disco duro. No tiene un conjunto fijo de almacenamiento.Tan grande como el espacio disponible en el disco duro.
Caso de uso recomendadoAlmacenamiento en caché.Aplicaciones que funcionan sin conexión o que tienen una gran cantidad de activos.Aplicaciones diseñadas para ejecutarse en Google Chrome.
APIs que pueden usarlo

APIs sin conexión

  • Caché de la app
  • Sistema de archivos
  • IndexedDB
  • WebSQL (obsoleto desde el 18 de noviembre de 2010)

Nota: Las APIs de almacenamiento web, como LocalStorage y SessionStorage, permanecen fijas en 5 MB.

API de File System

APIs sin conexión

  • Caché de la app
  • Sistema de archivos
  • IndexedDB
  • WebSQL (obsoleto)

Nota: Las APIs de almacenamiento web, como LocalStorage y SessionStorage, permanecen fijas en 5 MB.

Administra tu cuota

Con la API de administración de cuotas, que se presentó en Chrome 13, puedes hacer lo siguiente:

La API se implementa con el objeto global window.webkitStorageInfo.

Para obtener la documentación de referencia, consulta la siguiente sección.

Consulta el uso y la disponibilidad del almacenamiento

A fin de consultar el tamaño de almacenamiento que se usa y el espacio disponible para el host, llama a queryUsageAndQuota() con lo siguiente:

  • Tipo de almacenamiento que quieres verificar
  • Devolución de llamada de éxito

Es posible que el uso que informa la API no coincida con el tamaño real de los datos del usuario, ya que cada almacenamiento puede necesitar algunos bytes adicionales para almacenar sus metadatos. Además, las actualizaciones de estado pueden retrasarse, lo que hace que la API no refleje el estado de almacenamiento más reciente.

En el siguiente fragmento de código, se muestra cómo consultar el espacio de almacenamiento:

// Request storage usage and capacity left
// Choose either Temporary or Persistent
navigator.webkitTemporaryStorage.queryUsageAndQuota (
    function(usedBytes, grantedBytes) {
        console.log('we are using ', usedBytes, ' of ', grantedBytes, 'bytes');
    },
    function(e) { console.log('Error', e);  }
);

Si quieres solicitar el estado del almacenamiento persistente, solo reemplaza webkitStorageInfo.TEMPORARY por webkitStorageInfo.PERSISTENT. La enumeración también se encuentra en el objeto window (espacio de nombres global), por lo que también puedes usar window.PERSISTENT y window.TEMPORARY.

Pedir más almacenamiento

No es necesario que solicites más almacenamiento temporal, ya que la asignación es automática y no puedes superar el límite máximo (como se describe en la tabla).

En el caso del almacenamiento persistente para la API de File System, la cuota predeterminada es 0, por lo que deberás solicitar almacenamiento de forma explícita para tu aplicación. Llama a requestQuota() con lo siguiente:

  • Tipo de almacenamiento
  • Tamaño
  • Devolución de llamada de éxito

Según lo que solicites, sucederá lo siguiente:

  • Si solicitas una cuota mayor, el navegador le mostrará al usuario una barra de información que le pedirá que otorgue o rechace el permiso para aumentar la cuota. En algunos casos, la solicitud se puede rechazar en silencio y mostrar la cuota actual o la cuota inferior.
  • Si la cantidad de cuota que solicitas es menor que la asignación actual de la app, no se mostrará ningún mensaje.
  • Si solicitas más almacenamiento del permitido, recibirás un mensaje de error (QUOTA_EXCEEDED_ERR).
  • Si vuelves a llamar a requestQuota() después de que el usuario ya haya otorgado permiso, no sucede nada. Así que no te molestes en volver a llamar al método.

A continuación, se muestra cómo solicitar más espacio de almacenamiento:

// Request Quota (only for File System API)
var requestedBytes = 1024*1024*10; // 10MB

navigator.webkitPersistentStorage.requestQuota (
    requestedBytes, function(grantedBytes) {
        window.requestFileSystem(PERSISTENT, grantedBytes, onInitFs, errorHandler);

    }, function(e) { console.log('Error', e); }
);
});

Restablece la cuota para pruebas

Cuando pruebes el almacenamiento en tu app, te recomendamos que borres los datos almacenados para poder probar la administración de cuotas desde cero en la app. Para ello, haz lo siguiente:

  1. Ingresa chrome://settings/cookies en el cuadro multifunción (la barra de direcciones).
  2. Busca tu app.
  3. Selecciona tu app.
  4. Haz clic en la X del lado derecho de la selección destacada.

Referencia de la API

En esta sección, se documentan los métodos de la API de Quota Management.

Constantes

Las siguientes son constantes webkitStorageInfo, que indican el tipo de almacenamiento.

ConstanteValorDescripción
TEMPORARY0Almacenamiento temporal.
PERSISTENT1Almacenamiento persistente

Descripción general de los métodos

queryUsageAndQuota
requestQuota

Métodos

queryUsageAndQuota

Verifica el tamaño de almacenamiento que se está usando y el espacio disponible para el host.

 // you could also use it from webkitPersistentStorage
navigator.webkitTemporaryStorage.queryUsageAndQuota(
      successCallback,
      errorCallback);
  • successCallback: Es la devolución de llamada opcional con dos parámetros:

    • La cantidad actual de bytes que usa la app.
    • La cantidad de bytes restantes en la cuota.
  • errorCallback: Es la devolución de llamada de error opcional.

requestQuota

Pide más almacenamiento. El navegador presenta una barra de información en la que se le solicita al usuario que otorgue o rechace el permiso para tener más almacenamiento a la app.

 // you could also use it from webkitTemporaryStorage
navigator.webkitPersistentStorage.requestQuota (
      newQuotaInBytes,
      quotaCallback,
      errorCallback);
Parámetros
  • newQuotaInBytes: La cantidad de bytes que deseas incluir en tu cuota de almacenamiento.
  • successCallback: Es la devolución de llamada opcional que pasa la cantidad de bytes otorgados.
  • errorCallback: Es la devolución de llamada de error opcional.

Desarrollo futuro

El plan es colocar todas las APIs de almacenamiento sin conexión de HTML5, incluidas IndexedDB, Application Cache, File System y otras APIs que puedan especificarse, en la API de Quota Management. Podrás administrar toda la asignación de almacenamiento con él.