我正在开发一个用于离线存储数据的应用程序。我的问题是,当我尝试从本地存储检索数据进行更新/编辑时,它只会继续调用第一个项目的 id,而不调用 View 中数据的 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]);
}
};
这是我将员工添加到 ListView 的代码:
//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"}
]
谢谢你帮助我
最佳答案
您将员工存储到 localStorage
的方式是正确的,但将他们取出的方式是不正确的。您通过说明存储了您的员工:
localStorage.setItem("employees", JSON.stringify(employees));
因此,为了检索它们,您必须使用:
var employees = JSON.parse(localStorage.getItem("employees"));
您看,您将数据存储为键为“employees”的字符串;因此,您只能通过该 key 检索它。由于存储在 localStorage 中的所有数据都保存为字符串,因此您必须使用 JSON.parse() 将数据转换回对象(在本例中为数组)。然后您可以迭代您的员工。
更新:
您应该在页面呈现后立即运行此代码(见下文)。我不确定你是如何做到这一点的 - 如果你使用 IIFE 或 jQuery 的 document.ready()
函数。我认为如果最初没有加载空数组,则没有必要将空数组存储到 localStorage 中,因此,我删除了您的 else 子句。
var employees = [];
if (localStorage.getItem('employees') !== null) {
employees = JSON.parse(localStorage.getItem('employees'));
}
在运行时逐行调试它,并确保您的员工变量包含数据。如果它不包含数据,那么就没有什么可编辑的。
但是,如果有数据,则执行 showEmployees()
函数。奇怪的是,我没有在你的代码中看到你实际调用它的地方。它是否绑定(bind)到 UI 中的按钮或操作?另外,在 $('#edit_employee_page')
点击事件函数之后,for
循环在做什么?它试图不正确地从 localStorage 读取数据,但什么也没做。
我认为,如果您只是使用断点一次一行地执行代码并检查您的输入/输出,您就会发现哪里出了问题。
关于javascript - 无法使用jquery从本地存储获取数据的当前ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23911288/