将值（设置）从 jQuery Mobile 1.4 表单中取出并返回到 jQuery Mobile 1.4 表单中。怎么做？

Question

所以这是我知道我最初应该问的问题，在这里： How do I get these jQM 1.4 values out of a form with jQuery?

我的问题是 - 我有一个设置面板，允许用户选择年龄、性别和公制或英制单位。我将设置存储在 localStorage 中，每当用户重新打开应用程序时，我都想将它们从 localStorage 中提取出来，以便在应用程序中实现它们。

这是表格

<form style="margin:0;padding:0;width:">                   
  <b>Age</b><br>        
  <input type="range" data-mini="true" data-highlight="true" name="ageview" id="ageview" min="0" max="99" value="30" >
  <p>                                                      
    <b>Gender</b><br>        
    <input type="checkbox" data-role="flipswitch" name="genderview" id="genderview" checked="" data-on-text="f" data-off-text="m" data-wrapper-class="custom-label-flipswitch" data-mini="true">                   
  <p>
    <b>Units</b><br>            
  <fieldset data-role="controlgroup" data-mini="true">        
    <input type="radio" name="unitsview" id="metric_units" value="metric" checked="">
    <label for="metric_units">cm &amp; kg</label>
    <input type="radio" name="unitsview" id="imp_units" value="imp">
    <label for="imp_units">inches &amp; lbs</label>          
  </fieldset>
</form>

当用户点击保存按钮时，id="newsettings" 这个脚本运行

$("#newsettings").click(function(){
    age_set = $("#ageview").val();
    gender_set = $("#genderview:checked").length > 0 ? 'f' : 'm';
    units_set = $("input[name=unitsview]:checked").val();
    settingsObject = { "ageset" : age_set, "genderset" : gender_set, "unitset" : units_set} //put settings in an object
    localStorage.setItem('settings', JSON.stringify(settingsObject)); //store string in localSettings}
);

感谢 Jack 在另一个帖子中的帮助。

问题是我不知道如何将这些更改返回到表单中。我唯一能得到工作的就是时代，像这样

$("#ageview").val(age_set);

我都试过了

$("input[name=unitsview]").val(units_set);

和

$("input[name=unitsview]:checked").val(units_set);

什么都不做。

而且我不知道从哪里开始讨论性别。

我不只是要求使用我的表单设置的解决方案。滑块输入显然适用于时代。我的问题是双重的：

1. 有没有办法轻松插入保存的值？和
2. 如果没有，是否有其他方法可以捕获表单中的这些设置？还有其他更容易操作的控件吗？

Answer 1

这是一个DEMO

$("#setVals").on("click", function(){
    var age = 32,
        gender = 'male',
        units = 'imp_units';

    $("#ageview").val(age);
    $("#genderview").prop("checked", gender == 'female').flipswitch( "refresh" );
    if (units == 'metric_units'){
        $("#unit_choice1").prop("checked", true).checkboxradio( "refresh" );
        $("#unit_choice2").checkboxradio( "refresh" );
    } else {            
        $("#unit_choice2").prop("checked", true).checkboxradio( "refresh" );
        $("#unit_choice1").checkboxradio( "refresh" );
    }
});

在翻转开关上，您将选中的属性设置为 true 或 false，然后在小部件上调用 refresh。对于单选按钮，您为相应的单选按钮设置选中的属性，然后在两者上调用小部件刷新。

Answer 2

如果值存储在变量中，@ezanker 的答案是正确的。但是，当您使用 localStorage 保存数据并在以后检索它们时，您不能使用该方法。

您需要将所有数据保存到一个 array 中，使用JSON.stringfy(array) 将 array 转换为 JSON 字符串 以便能够将其存储在本地存储。

要检索存储数据，JSON 字符串 应解析为 JSON 数组，以便读取存储的值，使用 JSON.parse(localStorage)。

1. 第一步：

   遍历 form 元素，检索它们的 type、value 和 id。将每个属性推入一个数组。识别type是一个关键步骤，在此基础上，元素的value被检索出来。此外，type 将用于 switch 语句 以更新 form。

   var elements = []; /* array of data */
   
   $("#form_ID input").each(function () {
   
       /* type is either [type] or [data-role] */
       var elm_type = !! $(this).jqmData("role") ? $(this).jqmData("role") : $(this).prop("type");
   
       /* value is "string" or "boolean" */
       var elm_val = $(this).prop("type") === "checkbox" || $(this).prop("type") === "radio" ? $(this).prop("checked") : $(this).val();
   
       /* value will updated based on element's ID */
       var elm_id = "#" + $(this).prop("id");
   
       /* push data into elements array */
       elements.push({
           "type": elm_type,
               "value": elm_val,
               "id": elm_id
       });
   });
   /* array to string and save it */
   localStorage["info"] = JSON.stringify(elements);
   

2. 第二步：

   要读取存储在localStorage中的数据，需要先解析。然后遍历值并使用 switch 语句更新 form。

   为什么要switch 语句？ jQuery Mobile 中的每个小部件都有自己的 enhancement/update 方法。即更新复选框/单选按钮的值，.checkboxradio("refresh") 应该用于在该元素上重新应用样式。

   请注意，我使用.ui-page-active 选择器通过活动页面中的id 来定位元素。这是一种预防措施，因为它不针对任何其他页面中的元素。您可以在两个条件下使用相同的 id； 1）不要在同一页面上使用它们。 2) 使用 页面的 id 选择器来定位它们。

   /* string to array */
   var load_info = JSON.parse(localStorage["info"]);
   
   $.each(load_info, function (i, data) {
       switch (data.type) {
         case "number": /* slider */
             $(".ui-page-active").find(data.id).val(data.value).slider("refresh");
             break;
         case "flipswitch": /* flipswitch */
             $(".ui-page-active").find(data.id).prop("checked", data.value).flipswitch("refresh");
             break;
         case "radio": /* radio button */
             $(".ui-page-active").find(data.id).prop("checked", data.value).checkboxradio("refresh");
             break;
       }
   });
   

Demo ⁽¹⁾

⁽¹⁾ 修改表单 -> 保存 -> 下一页 -> 加载 -> 瞧！

Answer 3

感谢您的反馈。我一直在尝试在我正在使用的选择中引用我的选项，就像这样。

$("#ageview").val(age);
if(gender == "f"){
    $("#genderview option[value='f_gender']").prop("selected", true).flipswitch( "refresh");
    $("#genderview option[value='m_gender']").flipswitch( "refresh");
} else{             
    $("#genderview option[value='m_gender']").prop("selected", true).flipswitch( "refresh");
    $("#genderview option[value='f_gender']").flipswitch( "refresh");
}   
if (units == "metric"){
    $("#metric_units").prop("checked", true).checkboxradio( "refresh" );
    $("#imp_units").checkboxradio( "refresh" );
} else {            
    $("#imp_units").prop("checked", true).checkboxradio( "refresh" );
    $("#metric_units").checkboxradio( "refresh" );
}

我只是不知道如何在 jQuery Mobile 中引用这些东西，官方文档让我很困惑:(

编辑：对于编辑，这里是。这太容易了。

$("#genderview").val(gender).flipswitch("refresh"); 

就是这样。

2天的奋斗。 :(

但如果没有你们，我是做不到的。非常感谢。