Question

我正在关注O'Reilly中的example“使用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>

Answer 1

要使代码正常工作，您必须应用两项更改：

包含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);

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

Answer 2

您还可以在此处看到 DEMO ： - JSFIDDLE

如果您使用jQuery一次，请不要使用纯javascript混合它，例如document.getElementById()。并且不要创建height变量来存储$('#height').val()，您可以直接使用它。代码更具可读性。

$(document).ready(function() {
    $(window).unload(saveSettings);
    loadSettings();
});

function loadSettings() {
    $('#height').val(localStorage.height);
    $('#weight').val(localStorage.weight);
    $('#dateOfBirth').val(localStorage.dateOfBirth);
    $('input[value="' + localStorage.gender + '"]').prop('checked', true);
    $("#sportive").val(localStorage.sportive);
}

function saveSettings() {
    localStorage.height = $('#height').val();
    localStorage.weight = $('#weight').val();
    localStorage.dateOfBirth = $('#dateOfBirth').val();
    localStorage.sportive = $("#sportive").val();
    localStorage.gender = $('input[type=radio]:checked').val();
}

将值保存到HTML5 localStorage - ＆gt;填充页面加载

2 个答案: