無法使用jQuery從本地存儲獲取數據的當前ID

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

在運行時逐行調試該調試，並確定您的雇員變量包含數據。 如果它不包含數據，那么就沒什么可編輯的。

但是，如果有數據，請執行showEmployees()函數。 奇怪的是，我沒有在您的代碼中看到您實際調用的位置。 它綁定到用戶界面中的按鈕或操作嗎？ 另外，在$('#edit_employee_page') click事件函數之后， for循環會做什么？ 它試圖從localStorage中不正確地讀取數據，並且它什么也不做。

我認為，如果您只是簡單地使用斷點單步執行代碼，並在桌面檢查您的輸入/輸出，就會發現您出了問題。

Answer 2

似乎您的代碼中也存在斷開連接。 可能是您遺漏了一些線； 您定義了一個字符串editEmployee但出於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');

其余代碼相同。