Almacenar datos en PhoneGap/Cordova usando LocalStorage

Por mucho internet móvil de alta velocidad y muchas nubes que existan, al final casi todas las aplicaciones necesitan guardar información de forma local, aunque sólo sea su configuración o una pequeña cache.

Jugando con PhoneGap/Cordova me ha llegado el momento de guardar datos en local y he podido analizar las distintas alternativas que ofrece para ello. Empezamos con la más simple, localStorage.

LocalStorage

La forma más fácil de almacenar datos en local usando Cordova es utilizar el API de localStorage definida en HTML5.

LocalStorage es un almacenamiento de tipo clave/valor, es decir, podemos asociar un valor a una clave y recuperarlo después utilizando la clave. Su uso es muy sencillo:

<input type="text" name="username" id="username"/>
<button id="save">Save</button>
<button id="load">Load</button>
<button id="clear">Clear</button>

<script type="text/javascript">
$(function() {
   // Save input value to localStorage
   $('#save').on('click', function() {
      var username = $('#username').val();
      localStorage.setItem("username", username);
   });
   // Load input value from localStorage
   $('#load').on('click', function() {
      var username = localStorage.getItem('username') || '<empty>';
      $('#username').val(username);
   });
   // Clear localStorage
   $('#clear').on('click', function() {
      localStorage.clear();
   });
});
</script>

La documentación del uso de localStorage con Cordova contiene todos los detalles, pero básicamente el API está formado los típicos métodos de diccionarios, tablas hash y demás amigos: setItem(key,value), getItem(key), removeItem(key), clear().

¿Dónde se almacena la información?

La información que almacenamos usando localStorage queda guardada en el propio dispositivo y sobrevive a reinicios de la aplicación.

Cada aplicación tiene su propio localStorage, por lo que no es posible compartir información entre varias aplicaciones usando este tipo de almacenamiento. Además está limitado en tamaño (unos 5MB).

El encargado de guardar esta información es el navegador que esté usando Cordova para ejecutar nuestra aplicación HTML y, por tanto, depende de la plataforma concreta que estemos utilizando (Android, iOS, etc.).

La parte positiva es que, al menos en los (pocos) teléfonos Android que he probado, la información no se elimina aunque eliminemos los datos del navegador, sino que sólo se borra si eliminamos los datos de la propia aplicación.

Limitaciones

Además de lo que acabamos sobre el tipo de almacenamiento usado, hay que tener en cuenta algunas limitaciones propias de localStorage:

  • Las claves y los valores han de ser de tipo String. Si el objeto que usamos como clave o valor no es de tipo String, se invocará su método toString y será eso lo que se use como clave o valor almacenado. Podemos almacenar estructuras más complejas o datos binarios, pero para ello tendremos que serializarlas a JSON o codificarlos en base64.
  • Al ser un almacenamiento clave/valor, no podemos lanzar consultas complejas. Lo único que podemos hacer es recuperar un valor a partir de su clave, o recorrer todas las claves.

Resumiendo…

LocalStorage es la forma más sencilla de almacenar datos localmente en una aplicación PhoneGap/Cordova.

Es una buena alternativa cuando el volumen de datos es pequeño y podemos acceder a ellos siempre a partir de una clave, pero si nuestra aplicación tiene necesidades más complejas, será necesario recurrir a otras alternativas como las que veremos en próximos posts.

4 comentarios en “Almacenar datos en PhoneGap/Cordova usando LocalStorage

  1. Hola, sabes que estoy haciendo una aplicacion. En ella necesito sacar una foto, lo cual puedo hacer con «navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
    destinationType: destinationType.DATA_URL });» pero necesito guardarla en la memoria externa. Como lo puedo hacer. He revisado varias paginas y probado codigos y aun no me resulta.
    Ojala em puedas ayudar, saludos

  2. Intenté implementar localStorage en Cordova, pero el gran problema que encontré es que si matas la aplicación de una forma no tradicional, los datos del localStorage no se guardan. Al parecer el browser guarda los datos persistentemente solo al salir de la aplicación de una forma «segura».
    Entiendo que on WebSQL no ocurre este problema.

  3. Hola.
    Necesito que me ayudes, como se crea un formulario en un proyecto Phonegap para capturar, nombre, telefono, email y fecha de cumpleaños?

    Gracias

Comentarios cerrados.