Question

我正在开发一款可离线存储数据的应用。我的问题是当我尝试从本地存储中检索数据以进行更新/编辑时，它一直只调用第一项的id，而不是调用视图中的数据的id。

请问我做错了什么？

以下是我加载员工的代码：

// load cases from localStorage
var employees;

if (localStorage.getItem('employees')) {
  employees = JSON.parse(localStorage.getItem('employees'));
} else {
  // If no cases, create and save them
  employees = [];
  // offling storing of our cases
  localStorage.setItem('employees', JSON.stringify(employees));
}

// show case listing in list view page
var showEmployees = function () { 
  //erase existing content
  $('#employee_list').html('');

  //insert each employee
  for (var i = 0; i<employees.length; i++) {
    addEmployees(employees[i]);       
  }
};

以下是我将员工添加到列表视图的代码：

//add an eliment to list view
var addEmployees = function (empData) {
  //HTML content of one list element
  var listElementHTML = '<li><a class="employee_list" ui-btn ui-btn-e ui-btn-icon-right ui-icon-carat-r" data-transition="fade" data-split-icon="delete"  href="#item'+empData.id+'">' + empData.employeename + '<br> ' + empData.dateofbirth + '</br></a></li>';

  //appending the HTML code to list view
  $('#employee_list').append(listElementHTML);
};

以下是编辑功能的代码：

//User input to edit form
$('#edit_employee_page').on('click' , function () {
  var editEmployee = JSON.stringify({
  id: employees.length+1,
  employeeno: $('#employeeno').val(),
  employeename:$('#employeename').val(),
  stateoforigine:$('#stateoforigine').val(),
  employeephone: $('#employeephone').val(),
  dateofbirth:$('#dateofbirth').val()
  });

  //Alter the slected data
  localStorage.setItem("employees", JSON.stringify(employees));   
  return true;
});

for (var i in employees) {
  var id = JSON.parse(localStorage.getItem(employees[i]));
}

以下是编辑按钮的代码：

//register Edit button 
$('.edit_button').live('click', function (e) {
  alert('I was Cliked!');
  e.stopPropagation();

  $.each(employees, function(a, b) {
    //if(b.id == employees[i]){ 
    $('#id').val(b.id);
    $('#employeeno').val(b.employeeno);
    $('#employeename').val(b.employeename);
    $("#stateoforigine").val(i.stateoforigine);
    $('#employeephone').val(b.employeephone);
    $('#dateofbirth').val(b.dateofbirth);
    $("#id").attr("readonly","readonly");
    $('#employeeno').focus();
    $.mobile.changePage('#edit_employee_page');

    return false;
    //}
  });
});

这是我的本地存储：

[
   {"id":1,
           "employeeno":"DEF/234/20014",
           "employeename":"Bill Gates",
           "stateoforigine":"Osun",
           "employeephone":"080765432",
           "dateofbirth":"12/11/1965"},

   {"id":2,
           "employeeno":"DEF/234/20014",
           "employeename":"Bill Gates",
           "stateoforigine":"Osun",
           "employeephone":"080765432",
           "dateofbirth":"12/11/1966"},

   {"id":3,
           "employeeno":"DEF/234/20014",
           "employeename":"Bill Gates",
           "stateoforigine":"Osun",
           "employeephone":"080765432",
           "dateofbirth":"12/11/1966"},

   {"id":4,
           "employeeno":"DAST/003/2003",
           "employeename":"Gold Base",
           "stateoforigine":"",
           "employeephone":"",
           "dateofbirth":"12/03/1986"}
]

感谢您帮助我

Answer 1

您将员工存储到localStorage的方式是正确的，但您解决问题的方式不正确。您通过声明：

存储了您的员工

localStorage.setItem("employees", JSON.stringify(employees));

因此，为了检索它们，您必须使用：

var employees = JSON.parse(localStorage.getItem("employees"));

您看，您将数据存储为带有“员工”键的字符串;因此，您只能通过该密钥检索它。由于存储在localStorage中的所有数据都保存为字符串，因此必须使用JSON.parse()将数据转换回对象 - 在这种情况下为数组。然后你可以迭代你的员工。

<强>更新：您应该在呈现页面后立即运行此代码（请参阅下文）。我不确定你是怎么做的 - 如果你正在使用IIFE或jQuery的document.ready()功能。如果没有最初加载的话，我认为没有必要将空数组存储到localStorage中，所以，我把你的else子句删除了。

var employees = [];

if (localStorage.getItem('employees') !== null) {
  employees = JSON.parse(localStorage.getItem('employees'));
}

在运行时逐行调试，并使您的employees变量包含数据。如果它不包含数据，那么就没有什么可编辑的了。

但是，如果有数据，则执行showEmployees()功能。奇怪的是，我没有在你的代码中看到你实际上称之为。它是否与UI中的按钮或操作绑定？此外，在for点击事件功能之后，$('#edit_employee_page')循环是做什么的？它试图从localStorage中不正确地读取数据而它什么也没做。

我认为如果您只是使用断点一步一步地执行代码，并检查输入/输出，您就会发现出错的地方。

Answer 2

您的代码似乎也存在断开连接。可能是你遗漏了一些台词;你定义了一个字符串editEmployee，但是你存储JSON.stringify(employees)的蓝色，而你的代码中没有定义employees：

$('#edit_employee_page').on('click' , function(){ 

    var editEmployee = JSON.stringify({
        id: employees.length+1,
        //........
    });

    //Alter the slected data
    localStorage.setItem("employees", JSON.stringify(employees));     
    return true;
});

Answer 3

我有类似的任务要做。我是这样做的。我传递了动态ID作为id属性传递

    id="'+empData.id+'"

然后在

内

 $('.edit_button').live('click', function (e) {
    alert('I was Cliked!');
    var empId=$(this).attr('id');

其余代码是一样的。

无法使用jquery从本地存储获取数据的当前id

3 个答案: