将值保存到HTML5 localStorage - >填充页面加载 [英] Save Values to HTML5 localStorage -> populate on page load
问题描述
我正在关注O'Reilly构建iPhone应用程序中的示例使用HTML，CSS和Javascript，我希望在应用程序关闭并重新加载后从表单输入的值填充，类似于php'粘性表单。'
I am following the example in the O'Reilly "Building iPhone Apps with HTML, CSS and Javascript," I want the values entered from a form to populate after the app closes and reloads, similar to a php 'sticky form.'
我从示例中改变的唯一方面是在提交时调用saveSettings，这里我调用了unload（之前在输入模糊上）。
The only aspects I changed from the example is that saveSettings is called on submit, and here I have it called on unload (previously on input blur).
调用加载设置准备就绪而不是提交。
Load settings is called on document ready rather than submit.
编辑我删除了额外的哈希标志，我显示了包含jquery的代码（之前已包含）
我将saveSettings绑定到卸载。这些值仍然没有粘性。当我关闭窗口并再次打开它们时它们就消失了
EDIT I deleted the extra hash sign, i showed code with jquery included (it was included before) I bound saveSettings to unload. The values are still not sticky. When I close the window and open it again they are gone
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script>
<script>
$(document).ready(function(){
$('#current-age').blur(saveSettings);
loadSettings();
});
function loadSettings() {
$('#monthly-income').val(localStorage.income);
$('#saving-per-month').val(localStorage.saving);
$('#current-age').val(localStorage.age);
}
function saveSettings() {
localStorage.age = $('#current-age').val();
localStorage.saving = $('#saving-per-month').val();
localStorage.income = $('##monthly-income').val();
}
</script>
</head>
<body>
<div data-role="content">
<div data-type="horizontal" data-role="controlgroup">
<a href="#foo" data-role="button">Input</a>
<a href="#foo1" id="output-button" data-role="button">Output</a>
</div>
<input type="number" min="500" max="10000" step="100" name="monthly-income" id="monthly-income" value=""/>
<input type="number" min="500" max="10000" step="100" name="saving-per-month" id="saving-per-month" value=""/>
<input type="number" min="16" max="75" step="1" name="current-age" id="current-age" value=""/>
</body>
</html>
推荐答案
为了让你的代码有效，你必须申请两个更改：
To get your code work, you have to apply two changes:
- 包含jQUery框架。示例：
< script src =http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.css>< / script> - 更改
localStorage.income = $（'## monthly-income'）。val（）;to
localStorage.income = $（'＃monthly-income'）。val（）;（=省略一个锐利，＃）。
- Include the jQUery framework. Example:
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.css"></script> - Change
localStorage.income = $('##monthly-income').val();to
localStorage.income = $('#monthly-income').val();(=omit one sharp,#).
小提琴： http://jsfiddle.net/fE7pC/
Fiddle: http://jsfiddle.net/fE7pC/
注意：我建议将它绑定到 onload blur 。 $ c>，以便在离开页面时自动保存设置：
Note: Instead of binding an event listener to blur, I recommend to bind it to onload, so that the settings are automatically saved when leaving the page:
$(window).unload(saveSettings);
另一个注意事项：jQuery mobile推荐 pageInit ，而不是 $（）。ready 。请参阅： http://jquerymobile.com/test/docs/api/events.html
Another note: jQuery mobile recommends pageInit, rather than $().ready. See: http://jquerymobile.com/test/docs/api/events.html
这篇关于将值保存到HTML5 localStorage - >填充页面加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
