将值保存到HTML5 localStorage - >在页面加载时填充

Question

将值保存到HTML5 localStorage - >在页面加载时填充

alb*_*lbo 7 iphone jquery html5 local-storage

我正在关注O'Reilly"用HTML,CSS和Javascript构建iPhone应用程序"中的示例,我希望在应用程序关闭并重新加载后从表单输入的值填充,类似于php的"粘性表单".

我从示例中改变的唯一方面是在提交时调用saveSettings,这里我调用了unload(之前在输入模糊上).

在文档就绪而不是提交时调用加载设置.

编辑我删除了额外的哈希标志,我显示包含jquery的代码(它之前包含)我绑定saveSettings卸载.这些值仍然没有粘性.当我关上窗户再打开窗户时,它们就消失了

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Rob*_*b W 5

要使代码正常工作,您必须应用两个更改:

包括jQUery框架.例:
<script src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.css"></script>
改变localStorage.income = $('##monthly-income').val();到
localStorage.income = $('#monthly-income').val();(=省略一个尖锐,#).

小提琴:http://jsfiddle.net/fE7pC/

注意:blur我建议将其绑定到onload,而不是绑定事件侦听器,以便在离开页面时自动保存设置:

$(window).unload(saveSettings);

Run Code Online (Sandbox Code Playgroud)

另一个注意事项:jQuery mobile建议pageInit,而不是$().ready.请参阅:http://jquerymobile.com/test/docs/api/events.html

归档时间：	14 年，6 月前
查看次数：	17249 次
最近记录：	9 年，2 月前