Phonegap Jquery Mobile將數據保存到電話

Question

我在下面嘗試一些簡單的東西。 我要接受用戶輸入的名稱，請單擊按鈕將其保存，然后在應用程序第二次加載時顯示名稱。

我在下面哪里出問題了？

我是否需要將此代碼塊放置在其他位置？

 <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>

完整的html文件

<!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>

Answer 1

是的，您需要將button click事件pageinit放置在pageinit事件中-他們甚至在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);
    }
});

對於iOS設備測試：如果所做的更改未反映在設備上，請確保在部署之前先touch文件。 Phonegap的默認項目模板已經做到了，但是他們的命令對我不起作用。 看到我的答案： https : //stackoverflow.com/a/12707386/561545

Answer 2

小改正！ .val應該是.html 。 請參見下面的代碼。

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

加：

div id="my_name"

Phonegap Jquery Mobile將數據保存到電話

問題描述

2 個解決方案

解決方案1
6 已采納 2012-10-25 13:42:50

解決方案2
0 2013-05-21 12:50:24

Phonegap Jquery Mobile將數據保存到電話

問題描述

2 個解決方案

解決方案1 6 已采納 2012-10-25 13:42:50

解決方案2 0 2013-05-21 12:50:24

解決方案1
6 已采納 2012-10-25 13:42:50

解決方案2
0 2013-05-21 12:50:24