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

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

我从示例中改变的唯一方面是在提交时调用saveSettings，这里我调用了unload（之前在输入模糊上）。

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

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

       $(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(); }    
 
 Input Output 
      

Answer 1

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

• 包括jQUery框架。 例：
  
• 更改localStorage.income = $('##monthly-income').val(); 至
  localStorage.income = $('#monthly-income').val(); （=省略一个尖锐的， # ）。

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

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

 $(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(); }