Uso de localStorage en Phonegap

En el siguiente ejemplo mostraremos el username y email en el caso de que hayan sido guardados en el dispositivo anteriormente. El formulario guardará los datos, con los que si ya los teníamos serán sustituidos.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>El meu test</title>
        <link rel="stylesheet" href="css/jquery.mobile-1.4.5.css" />
    </head>
    <body>
        <div data-role="page" id="page1">
            <div data-role="header">
                <h1>FORM</h1>
            </div>
            <div data-role="content">
                <form method="post" id="form">
                    <label class="ui-hidden-accessible">Username</label>
                    <input name="username" type="text" placeholder="Username">
                    <input name="email" type="email" placeholder="Email">
                    <input type="submit" value="Enviar">
                </form>
                <div id="oldResult"></div>
            </div>
        </div>
        <div data-role="page" id="page2">
            <div data-role="header" data-add-back-btn="true">
                <h1>Page Two</h1>
            </div>
            <div data-role="content">
                <div id="output"></div>
                <ul id="list"></ul>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
    </body>
</html>

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady(){

    var storage = window.localStorage;

    var _username = storage.getItem("username");
    var _email = storage.getItem("email");
    if(_username !=undefined){
        $("#oldResult").html("<u>Datos en localStorage</u><br>" + _username + '<br>' + _email);
    }

    $("#form").submit(function(e){
        e.preventDefault();
        storage.setItem("username", $("input[name='username']").val());
        storage.setItem("email", $("input[name='email']").val());
        
        $.mobile.changePage("#page2", { reverse: false, transition: "slide"});
        $("#output").html("Username: " + storage.getItem("username") + "<br>" + "Email: " + storage.getItem("email"));
    });
};

Podemos eliminar en cualquier momento datos usando el siguiente método:

storage.removeItem(key);

Uso de localStorage en Phonegap

Entrades relacionades:

Deixa un comentari