Phonegap Jquery Mobile将数据保存到电话
[英]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 完整的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>
2 个解决方案
解决方案1
6 已采纳 2012-10-25 13:42:50
Yes, you need to place the button click event hookup in the pageinit event - they even specify this in the docs 是的，您需要将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);
}
});
For iOS device testing: In case your changes do not reflect on your device, make sure to touch your files before you deploy. 对于iOS设备测试：如果所做的更改未反映在设备上，请确保在部署之前先touch文件。 Phonegap's default project template already does this, but their command does not work for me. Phonegap的默认项目模板已经做到了，但是他们的命令对我不起作用。 See my answer: https://stackoverflow.com/a/12707386/561545 看到我的答案： https : //stackoverflow.com/a/12707386/561545
解决方案2
0 2013-05-21 12:50:24
Small correction! 小改正！ .val should be .html . .val应该是.html 。 Please see the below code. 请参见下面的代码。
$('#my_name').html(personName);
add: 加：
div id="my_name"
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.