javascript - 我在使用 jquery 将数据从 localStorage 获取回表单以进行更新时遇到问题？

Question

我正在创建一个移动应用程序，用于存储员工数据并检索其更新。我找不到使用 jQuery 从 localStorage 调用/填充的方法。

如果有人可以查看我的代码并告诉我我做错了什么或混淆了什么，我会很高兴。

谢谢。

预期行为

单击编辑按钮时，UI 应转到编辑表单页面并使用 localStorage 中的数据填充编辑表单字段。

实际行为

点击编辑进入编辑表单页面。这些字段未填充。

HTML

        <hr style="height:3px; background-color:#ccc; border:0; margin-top:12px; margin-bottom:12px;">
      <form id="edit_employee_form" action="" >
              <div  class="ui-field-contain Employee No" data-controltype="textinput">
                <input name="employeeno" id="employeeno" data-clear-btn="true" value="" type="text" data-mini="true" >
            </div>
            <div class="ui-field-contain Parties" data-controltype="textinput" contenteditable="true">
                <input name="employeename" id="employeename" data-clear-btn="true"  
                value="" type="text" data-mini="true" required/>
            </div>
            <div class="ui-field-contain State" data-controltype="textinput">
                <input name="stateoforigine" id="stateoforigine" data-clear-btn="true" 
                value="" type="text" data-mini="true">
            </div>
            <div class="ui-field-contain Phone Employee" data-controltype="textinput">
                <input name="employeephone" id="employeephone" data-clear-btn="true" 
                value="" type="text" data-mini="true">
            </div>
           <div class="ui-field-contain Date Of Birth" data-controltype="dateinput">
           <input data-name="dateofbirth" data-inline="true" type="text" id="dateofbirth" data-clear-btn="true" value="" type="date" data-mini="true">
            <div  class="ui-field-contain id" data-controltype="textinput">
            <input name="id" input type="hidden" id="id" data-clear-btn="true"  placeholder="case id" value="" type="text" data-mini="true" >
            </div>
            </div>
                <div class="ui-block-a">
                     <input id="update" href="#employee_list_view_page" type="submit" data-inline="true" data-theme="b" value="Update"
                     data-mini="true" class="ui-btn ui-corner-all ui-btn ui-shadow ui-btn  Save">
                </div>
                  <div class="ui-block-b">
                   <div class="ui-block-b">
                    <input id="cancel" type="reset" value="Reset" class="ui-btn ui-corner-all ui-btn ui-shadow ui-btn">

            </div>
        </form>
     <div data-theme="a" data-role="footer" data-position="fixed">
                                <h2 class="ui-title">
                                   Employees Catalog
                               </h2>
                    </div>
                </div>
            </div>
        </body>
    </html>` 

单击编辑按钮时从 localStorage 填充数据的代码:

//Edit Case Function 

function Edit() {
    employees[i] = JSON.stringify({
        id: employees.length + 1,
        employeeno: $('#employeeno').val(),
        employeename: $('#employeename').val(),
        stateoforigine: $('#stateoforigine').val(),
        employeephone: $('#employeephone').val(),
        dateofbirth: $('#dateofbirth').val(),

    }); //Alter the selected item in the form
    localStorage.setItem("employees", JSON.stringify(employees));
    return true;
}
for (var i in employees) {
    var empData = JSON.parse(localStorage.getItem(employees[i]));
};

//register Edit button

$('.edit_button').live('click', function (e) {
    alert('Iwas clicked');
    e.stopPropagation();

    var empData = JSON.parse(localStorage.getItem('employees'));
    $('#employeeno').val('employeeno');
    $('#employeename').val('employeename');
    $("#stateoforigine").val('stateoforigine');
    $('#employeephone').val('employeephone');
    $('#dateofbirth').val('dateofbirth');
    $('#id').val(id);
    $("#id").attr("readonly", "readonly");
    $('#employeeno').focus();

    $.mobile.changePage('#edit_employee_page');
    return false;
});

本地存储文件示例:

[{"id":1,"employeeno":"DEF/234/20014","employeename":"比尔·福尔曼","stateoforigin":"加利福尼亚州","employeephone":"09543765432",“出生日期”:“1965年12月11日”}]

关键是员工。

Answer 1

如果你的 json 是...

[{"id":1,"employeeno":"DEF/234/20014","employeename":"Bill Foreman","stateoforigine":"Califonia","employeephone":"09543765432","dateofbirth":"12/11/1965"}]

然后..

$.each(data, function(a, b) {

    $('#employeeno').val(b.employeeno);
    $('#employeename').val(b.employeename);
    $("#stateoforigine").val(b.stateoforigine);
    $('#employeephone').val(b.employeephone);
    $('#dateofbirth').val(b.dateofbirth);
    $('#id').val(b.id);

});