javascript - Phonegap Jquery Mobile Saving Data to Phone

Im trying something simple below. I want to accept user input for their name click a button save it and when the app loads a second time it displays the name.

Where am I going wrong below?

Do i need to put this code block somewhere else?

 <script type="text/javascript">

$(function(){
$('#saveButton').click(function() {
        window.localStorage.setItem("name", $('#name').val());
});
    $('#newpage').live('pageshow', function() {
        var personName = window.localStorage.getItem("name");
        if(personName.length>0){
                $('#name').val(personName);
        }
    });

});
</script>

Full html file

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.2.0.css" />
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="jquery.mobile-1.2.0.js"></script>


<script type="text/javascript">

$(function(){
$('#saveButton').click(function() {
        window.localStorage.setItem("name", $('#name').val());
});
    $('#newpage').live('pageshow', function() {
        var personName = window.localStorage.getItem("name");
        if(personName.length>0){
                $('#name').val(personName);
        }
    });

});
</script>


<title>Hello World</title>
</head>
<body>
<div id="home" data-role="page">
    <div data-role="header">
        <h1>
            Home Page</h1>
    </div>
    <div data-role="content">
        hello Phone Gap and JQuery Mobile! <a href="#newpage" data-role="button">new page</a>
    </div>
    <div data-role="footer" data-position="fixed">
        <h4>
            footer</h4>
    </div>
</div>


<div id="newpage" data-role="page">
    <div data-role="header">
        <h1>
            new Page</h1>
    </div>
    <div data-role="content">
        <label for="name">what is your name?</label>
        <input id="name" type="text" name="name" value="" />
        <a id="saveButton" href="" data-role="button">Save</a>
    </div>
    <div data-role="footer" data-position="fixed">
        <h4>
            footer</h4>
    </div>
</div>
<script type="text/javascript" src="cordova-2.1.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
    app.initialize();
</script>
</body>
</html>

Im trying something simple below. I want to accept user input for their name click a button save it and when the app loads a second time it displays the name.

Where am I going wrong below?

Do i need to put this code block somewhere else?

 <script type="text/javascript">

$(function(){
$('#saveButton').click(function() {
        window.localStorage.setItem("name", $('#name').val());
});
    $('#newpage').live('pageshow', function() {
        var personName = window.localStorage.getItem("name");
        if(personName.length>0){
                $('#name').val(personName);
        }
    });

});
</script>

Full html file

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.2.0.css" />
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="jquery.mobile-1.2.0.js"></script>


<script type="text/javascript">

$(function(){
$('#saveButton').click(function() {
        window.localStorage.setItem("name", $('#name').val());
});
    $('#newpage').live('pageshow', function() {
        var personName = window.localStorage.getItem("name");
        if(personName.length>0){
                $('#name').val(personName);
        }
    });

});
</script>


<title>Hello World</title>
</head>
<body>
<div id="home" data-role="page">
    <div data-role="header">
        <h1>
            Home Page</h1>
    </div>
    <div data-role="content">
        hello Phone Gap and JQuery Mobile! <a href="#newpage" data-role="button">new page</a>
    </div>
    <div data-role="footer" data-position="fixed">
        <h4>
            footer</h4>
    </div>
</div>


<div id="newpage" data-role="page">
    <div data-role="header">
        <h1>
            new Page</h1>
    </div>
    <div data-role="content">
        <label for="name">what is your name?</label>
        <input id="name" type="text" name="name" value="" />
        <a id="saveButton" href="" data-role="button">Save</a>
    </div>
    <div data-role="footer" data-position="fixed">
        <h4>
            footer</h4>
    </div>
</div>
<script type="text/javascript" src="cordova-2.1.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
    app.initialize();
</script>
</body>
</html>

Share Improve this question edited May 12, 2013 at 15:42 Raffaello 1,70616 silver badges30 bronze badges asked Oct 25, 2012 at 13:36 CsharpBeginner 1,7738 gold badges40 silver badges68 bronze badges

Add a ment |

2 Answers 2

Sorted by: Reset to default 6

Yes, you need to place the button click event hookup in the pageinit event - they even specify this in the docs

$(document).on("pageinit","#newpage",function(){
    $('#saveButton').click(function() {
        localStorage.setItem("name", $('#name').val());
    });
});


$(document).on('pageshow','#newpage', function() {
    var personName = localStorage.getItem("name");
    if(personName.length>0){
            $('#name').val(personName);
    }
});

For iOS device testing: In case your changes do not reflect on your device, make sure to touch your files before you deploy. Phonegap's default project template already does this, but their mand does not work for me. See my answer: https://stackoverflow./a/12707386/561545

Small correction! .val should be .html. Please see the below code.

$('#my_name').html(personName);

add:

div id="my_name"

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1742398259a4436386.html

javascript - Phonegap Jquery Mobile Saving Data to Phone - Stack Overflow

2 Answers 2

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - Phonegap Jquery Mobile Saving Data to Phone - Stack Overflow

2 Answers 2

相关推荐