如何在第二页中使用 localStorage 显示第一页的内容
Posted
技术标签:
【中文标题】如何在第二页中使用 localStorage 显示第一页的内容【英文标题】：How to display contents of first page using localStorage in second page 【发布时间】：2014-08-09 19:56:00 【问题描述】：我是 phonegap 的新手。我仅在有效用户登录第二页时才尝试显示第一页的内容。我正在使用下面的脚本来实现这一点。但是我没有得到如何在使用 localStorage 调用 changepage 后显示第一页内容？
<html>
<head>
<title>Submit a form via AJAX</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
</head>
<body>
<script>
function onSuccess(data, status)
data = $.trim(data);
//$("#notification").text(data);
alert(data);
if(data=="SUCCESS")
// store some data
storeObject.username = $("#username").val();
storeObject.email = $("#email").val();
//change page
$.mobile.changePage("#secondPage");
function onError(data, status)
// handle an error
$(document).ready(function()
$("#submit").click(function()
var formData = $("#callAjaxForm").serialize();
$.ajax(
type: "POST",
url: “myURL”,
cache: false,
data: formData,
success: onSuccess,
error: onError
);
return false;
);
);
// Store object
var storeObject =
username : '',
email : ''
//not getting below alert when second page loads
$(document).on('pageaftershow', '#secondPage', function()
alert("Second page"); <--- **NOT DISPLAYING WHEN SECONDPAGE LOADS**
alert('My name is ' + storeObject.username + ' ' + storeObject.email);
);
</script>
<!-- call first page -->
<div data-role="page" id="firstPage">
<div data-role="header">
<h1>Call Ajax</h1>
</div>
<div data-role="content">
<form id="callAjaxForm">
<div data-role="fieldcontain">
<label for="username">User Name</label>
<input type="text" name="username" id="username" value="" />
<label for="lastName">Last Name</label>
<input type="text" name="lastName" id="lastName" value="" />
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" />
<label for="lastName">Password</label>
<input type="password" name="password" id="password" value="" />
<button data-theme="b" id="submit" type="submit">Submit</button>
</div>
</form>
</div>
<div data-role="footer">
<h1>footer</h1>
</div>
</div>
<!-- call secondPage page -->
<div data-role="page" id="secondPage">
<div data-role="header">
<h1>Second page</h1>
</div>
<div data-role="content">
</div>
<div data-role="footer">
<h1>footer</h1>
</div>
</div>
</body>
【问题讨论】：
【参考方案1】：你可以这样设置和获取localstorage数据
设置您的内容
if(data=="SUCCESS")
// store some data
localStorage.setItem('username',$("#username").val());
localStorage.setItem('email',$("#email").val());
//change page
$.mobile.changePage("#secondPage");
获取第二页的内容
localStorage.getItem('username');
localStorage.getItem('email');
【讨论】：
甚至没有收到警报消息“第二页” 请检查您的页面，看看有没有错误？以上是关于如何在第二页中使用 localStorage 显示第一页的内容的主要内容，如果未能解决你的问题，请参考以下文章
如何使用localstorage / ajax jquery从第一页到第二页获取单选按钮值