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

这是我知道我最初应该问的问题，在这里：

我的问题是-我有一个设置面板，允许用户选择年龄、性别和公制或英制单位。我将设置存储在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>

多亏了另一个线程中的杰克

问题是我不知道如何将这些更改放回表单中。我唯一能工作的就是年龄，就像这样

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

我两个都试过了

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

及

两人都没有做任何事

我不知道从性别开始

我不是在要求使用我的表单设置来解决问题。滑块输入显然适用于这个年龄段。我的问题有两个：

有没有办法轻松插入保存的值？及

如果没有，是否有其他方法可以在表单中捕获这些设置？是否有其他更易于操作的控件

这里有一个

---

在flipswitch上，将checked属性设置为true或false，然后在小部件上调用refresh。对于单选按钮，您为相应的按钮设置checked属性，然后在这两个按钮上调用小部件刷新。

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

您需要将所有数据保存到一个数组中，使用

JSON.stringfy（array）

将数组转换为JSON字符串，以便能够将其存储在localStorage中

为了检索存储数据，应该将JSON字符串解析为JSON数组，以便使用

JSON.parse（localStorage）

读取存储的值

第一步：

循环表单元素，检索它们的类型、值和id。将每个属性推送到数组中。识别类型是一个关键步骤，在此基础上检索元素的值。此外，switch语句中将使用type来更新表单

第二步：

要读取存储在localStorage中的数据，首先需要对其进行解析。然后循环遍历值并使用switch语句更新表单

为什么要切换语句？jQuery Mobile中的每个小部件都有自己的增强/更新方法。i、 e.更新复选框/单选按钮的值，

。应使用复选框单选（“刷新”）

在该元素上重新应用样式

请注意，我使用了

.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;
    }
});

（1）

---

（1） 更改表单->保存->下一页->加载->瞧

谢谢各位的反馈。我一直在尝试引用我正在使用的select中的选项，如下所示

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

就这样

两天的斗争：(

---

但是如果没有你们，我不可能做到这一点。非常感谢。

回答得好！我从问题中假设OP已经解决了localStorage部分，只是不知道如何设置flipswitch和单选按钮……是的，ezanker，我确实解决了localStorage部分。我已经使用了JSON.stringify和parse。有no有问题，我可以控制台。记录字符串化前后的所有值，并对它们进行良好的分析。年龄变量很好，您是正确的-如果TWA只知道如何设置flipswitch和单选按钮，而我不知道如何设置。我对flipswitch使用select，因为它更容易从中获取值。@subjectiveeffect在ca中如果您的表单元素与我的回答中提到的表单元素不同，那么您只需要添加更多的案例，当然还需要检索它们的类型和值。@Omar我实际上使用了ezanker的版本，因为它与我的其余代码相适应（我已经有了一个函数，可以将本地存储存储存储在JSON中或从JSON中检索）它对单位有效。但是我把我的flipswitch换成了一个带有两个选项的select，它只是我没有得到的引用。我可以得到选项的值，但我还不能把它放回去。实际上，我以为它有效。似乎我不知道如何引用表单中的元素。

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

/* 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;
    }
});

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

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