LocalStorage - CGastrell/phonegap GitHub Wiki

Persistencia de datos: guardar datos localmente de manera que la aplicacion recuerde el ultimo estado en que la dejamos.

LocalStorage

Los navegadores incorporaron una API simple de persistencia de datos: localStorage

localStorage casi no posee metodos, al punto que casi no se gradua de API. Para almacenar un dato, lo unico que debemos hacer es:

localStorage.mi_variable = "hola";

Y a partir de ese momento, el navegador guardara esta variable hasta que los datos asociados a la pagina (o aplicacion) sean borrados por el usuario o hasta que la aplicacion sobreescriba o borre la variable.

El problema (o principal caracteristica) de localStorage es que solo puede guardar variables primitivas de Javascript. Esto es, una variable que puede expresarse como texto.

En pos de mantener su estructura y funcionalidad simples, localStorage almacena el resultado de la llamada a toString() en la variable. Esto puede verse usando la consola:

var texto = "esto es texto";
texto // muestra "esto es un texto"
texto.toString() // muestra "esto es un texto"
texto == texto.toString() // muestra true

var numero = 1;
numero // muestra 1
numero.toString() // muestra "1"

var objeto = {a: "b"};
objeto.toString() // muestra el odioso "[object Object]"

Esta propiedad hace que guardar objetos o arrays en localStorage sea, a simple vista, imposible.

JSON

Para sobrellevar las limitaciones de localStorage los navegadores proveen la API de JSON (JavaScript Object Notation). Principalmente, JSON, da acceso a dos funciones: JSON.parse(string) y JSON.stringify(var).

JSON es un objeto javascript traducido a texto que luego pueda ser interpretado para volverlo a su valor original.

JSON.stringify(var)

Convierte cualquier variable a una representacion en texto. Las reglas son bastante sencillas:

• Todas las keys se expresan entre comillas dobles (")
• Todos los valores que pueden ser expresados como texto se convierten a texto entre comillas dobles (")
• Todo valor que no pueda ser convertido sera eliminado (funciones, arrays, objetos anidados) o generara una excepcion y elevara un error.

Ejemplo

var obj = {
    a: "texto",
    b: 2,
    c: {
        saludo: "Mr",
        nombre: "Jones"
    },
    d: function(){
        console.log("Hola!");
    },
    e: [
        "un",
        "array"
    ]
};

JSON.stringify(obj);
// mostrara:
// "{"a":"texto","b":2,"c":{"saludo":"Mr","nombre":"Jones"},"e":["un","array"]}"

Notar que la propiedad d fue eliminada por ser una funcion, la cual no puede expresarse convirtiendola a String

JSON.parse(string)

Parse es la inversa de stringify: tomara un texto que representa un objeto y lo devolvera como objeto. Cabe destacar que es en este paso donde la mayor cantidad de errores puede suscitarse, dado que cualquier error en la expresion puede generar una excepcion. Mismo ejemplo anterior:

var obj = {
    a: "texto",
    b: 2,
    c: {
        saludo: "Mr",
        nombre: "Jones"
    },
    d: function(){
        console.log("Hola!");
    },
    e: [
        "un",
        "array"
    ]
};

//esta vez asignamos el resultado de stringify a una variable
var textificado = JSON.stringify(obj);
// textificado = "{"a":"texto","b":2,"c":{"saludo":"Mr","nombre":"Jones"},"e":["un","array"]}"

JSON.parse(textificado);
//(ver resultado en consola)

Como practica, implementamos persistencia a la aplicacion ToDo