我想使用 html5 localStorage 创建一个联系表单. 但没有工作 删除 和 全部删除 按钮? 也不能保存性

Question

我无法save gender data也无法delete particular data or clear all data。

$(document).ready(function () {
contactsNamespace.initialize();
$('#removeAll').on('click', removeAll, false);
});
(function () {
this.contactsNamespace = this.contactsNamespace || {};
var ns = this.contactsNamespace;
var currentRecord;
ns.initialize = function () {
$('#btnSave').on('click', ns.save);
ns.display();
};
function retrieveFromStorage() {
var contactsJSON = localStorage.getItem('contacts');
return contactsJSON ? JSON.parse(contactsJSON) : [];
}
ns.display = function () {
$('#currentAction').html('Add Contact');
currentRecord = { key: null, contact: {} };
displayCurrentRecord();
var results = retrieveFromStorage();
bindToGrid(results);
};
function bindToGrid(results) {
var html = '';
for (var i = 0; i < results.length; i++) {
var contact = results[i];
html += '<tr><td>' + contact.email + '</td>';
html += '<td>' + contact.firstName + ' ' + contact.lastName + '</td>';
html += '<td><a class="edit" href="javascript:void(0)" data-key=' + i + '>Edit</a>' + '|' + '<a class="delete" href="javascript:void(1)" data-key=' + i + '>Delete</a></td></tr>';
}
html = html || '<tr><td colspan="4">No records available</td></tr>';
$('#contacts tbody').html(html);
$('#contacts a.edit').on('click', ns.loadContact);
$('#contacts a.delete').on('click', ns.deleteContact);
}
ns.loadContact = function () {
var key = parseInt($(this).attr('data-key'));
var results = retrieveFromStorage();
$('#currentAction').html('Edit Contact');
currentRecord = { key: key, contact: results[key] }
displayCurrentRecord();
};
function displayCurrentRecord() {
var contact = currentRecord.contact;
$('#studentId').val(contact.studentId);
$('#firstName').val(contact.firstName);
$('#lastName').val(contact.lastName);
$('#email').val(contact.email);
$('.radiobtn').val(contact.radiobtn);
$('#phoneNumber').val(contact.phoneNumber);
}
ns.save = function () {
var contact = currentRecord.contact;
contact.studentId = $('#studentId').val();
contact.firstName = $('#firstName').val();
contact.lastName = $('#lastName').val();
contact.email = $('#email').val();
contact.radiobtn = $('.radiobtn').val();
contact.phoneNumber = $('#phoneNumber').val();
var results = retrieveFromStorage();
if (currentRecord.key != null) {
results[currentRecord.key] = contact;
}
else {
results.push(contact);
}
localStorage.setItem('contacts', JSON.stringify(results));
function removeAll() {
localStorage.clear('contacts');
}
ns.display();
};
})();

* {
margin: 0;
padding: 0;
font-size: 11pt;
font-family: Arial;
}
aside, footer, header, hgroup, nav {
display: block;
}
body {
color: black;
padding: 10px;
}
header {
height: 35px;
background-repeat: no-repeat;
margin-top: 10px;
}
#headerText {
position: absolute;
top: 0px;
width: 100%;
}
h1 {
font-size: 24px;
}
h3 {
font-size: 9pt;
padding-left: 26em;
/*float: right;*/
}
div[role="main"] {
float: left;
width: 60%;
}
#editContact {
background: none repeat scroll 0 0 #F8F8F8;
border: 1px solid #E1E1E1;
width: 400px;
margin-top: 25px;
}
#editContact h2 {
padding-left: 10px;
margin-top: 10px;
font-size: 18px;
width: 200px;
}
#editContact div {
width: 350px;
padding: 10px;
}
#editContact div.buttons {
text-align: center;
}
#editContact label {
width: 150px;
height: 12px;
vertical-align: bottom;
clear: left;
display: block;
float: left;
}
#editContact input {
width: 180px;
padding: 2px;
}
#editContact div.radiobtn input {
width: 16px;
height: 13px;
padding: 2px;
}
button {
width: 200px;
margin-top: 10px;
}
#contacts {
width: 400px;
border: 1px solid #E1E1E1;
margin: 0px;
padding: 0px;
}
#contacts thead {
background-color: #e1e1e1;
color: #7C756D;
font-weight: bold;
text-align: left;
}
#contacts tbody tr:nth-child(even) {
background-color: #eee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<header>
<hgroup id="headerText">
<h1>Contacts</h1>
<h3><a id="removeAll" href="javascript:void(0)">Remove All</a></h3>
</hgroup>
</header>
<div role="main">
<table id="contacts">
<thead>
<tr>
<th>Email</th>
<th>Name</th>
<th></th>
</tr>
</thead>
<tbody></tbody>
</table>
<form>
<div id="editContact">
<h2 id="currentAction"></h2>
<div>
<label for="studentId">Student Id: </label>
<input type="number" id="studentId" name="studentId" required/>
</div>
<div>
<label for="firstName">First Name: </label>
<input type="text" id="firstName" name="firstName" required />
</div>
<div>
<label for="lastName">Last Name: </label>
<input type="text" id="lastName" name="lastName" required />
</div>
<div>
<label for="email">Email Address: </label>
<input type="email" id="email" name="email" required />
</div>
<div class="radiobtn">
<label for="gender">Gender: </label>
<input type="radio" class="gender" name="gender" value="Male" />Male
<input type="radio" class="gender" name="gender" value="Female" />Female
</div>
<div>
<label for="phoneNumber">Contact: </label>
<input type="number" id="phoneNumber" name="phoneNumber" required pattern="{11}"/>
</div>
<div class="buttons">
<button id="btnSave">Save</button>
</div>
</div>
</form>
</div>
</div>

提前谢谢。

Answer 1

代码工作正常，性别和所有字段都是可编辑和可保存的，我用一些测试用例检查了这一点，你能检查一下下面的 JSFiddle 吗，我修复了removeAll功能，通过删除.click()函数中的第三个参数并将.Click()函数放在初始化块中。 此外，removeAll()函数被放置在另一个函数中，调用函数找不到。

JSFiddle Demo

.JS：

$(document).ready(function() {
contactsNamespace.initialize();
});
(function() {
this.contactsNamespace = this.contactsNamespace || {};
var ns = this.contactsNamespace;
var currentRecord;
ns.initialize = function() {
$('#btnSave').on('click', ns.save);
$('#removeAll').on('click', ns.removeAll);
ns.display();
};
ns.removeAll = function() {
console.log("revmoing");
localStorage.clear('contacts');
ns.display();
}
function retrieveFromStorage() {
var contactsJSON = localStorage.getItem('contacts');
return contactsJSON ? JSON.parse(contactsJSON) : [];
}
ns.display = function() {
$('#currentAction').html('Add Contact');
currentRecord = {
key: null,
contact: {}
};
displayCurrentRecord();
var results = retrieveFromStorage();
bindToGrid(results);
};
function bindToGrid(results) {
var html = '';
for (var i = 0; i < results.length; i++) {
var contact = results[i];
html += '<tr><td>' + contact.email + '</td>';
html += '<td>' + contact.firstName + ' ' + contact.lastName + '</td>';
html += '<td><a class="edit" href="javascript:void(0)" data-key=' + i + '>Edit</a>' + '|' + '<a class="delete" href="javascript:void(1)" data-key=' + i + '>Delete</a></td></tr>';
}
html = html || '<tr><td colspan="4">No records available</td></tr>';
$('#contacts tbody').html(html);
$('#contacts a.edit').on('click', ns.loadContact);
$('#contacts a.delete').on('click', ns.deleteContact);
}
ns.loadContact = function() {
var key = parseInt($(this).attr('data-key'));
var results = retrieveFromStorage();
$('#currentAction').html('Edit Contact');
currentRecord = {
key: key,
contact: results[key]
}
displayCurrentRecord();
};
function displayCurrentRecord() {
var contact = currentRecord.contact;
$('#studentId').val(contact.studentId);
$('#firstName').val(contact.firstName);
$('#lastName').val(contact.lastName);
$('#email').val(contact.email);
$('.radiobtn').val(contact.radiobtn);
$('#phoneNumber').val(contact.phoneNumber);
}
ns.save = function() {
var contact = currentRecord.contact;
contact.studentId = $('#studentId').val();
contact.firstName = $('#firstName').val();
contact.lastName = $('#lastName').val();
contact.email = $('#email').val();
contact.radiobtn = $('.radiobtn').val();
contact.phoneNumber = $('#phoneNumber').val();
var results = retrieveFromStorage();
if (currentRecord.key != null) {
results[currentRecord.key] = contact;
} else {
results.push(contact);
}
localStorage.setItem('contacts', JSON.stringify(results));
ns.display();
};
})();