【发布时间】：2017-03-19 19:15:52
【问题描述】：
我正在尝试使用更 OOP 的方法构建一个简单的地址簿应用程序。
目前它添加到 localStorage 没有问题；但我想要完成的下一个任务是在 HTML 中显示 Key => 值对的函数。我被困在第一个障碍。
当我在 click 事件上调用 displayContacts() 函数时，它会在 LocalStorage 中创建另一个空对象。每次我重新加载页面并单击“查找”按钮（并假设没有向表单中添加其他信息）时，都会在 localStorage 中添加一个新条目，例如：
{"first_name":"","last_name":"","email":"","telephone":""}
提前致谢
var addressBook = {
people : JSON.parse(localStorage.getItem('contacts')) || [],
cacheDom : function(){
this.$parent = $('.address_book');
this.$display = $('.find_contacts');
},
bindEvent : function(){
this.$parent.on('submit', this.getFormData.bind(this));
this.$display.on('click', this.displayContacts.bind(this));
},
getStorage : function(param){
return localStorage.getItem();
},
setStorage : function(){
var storage = localStorage.getItem("contacts");
localStorage.setItem("contacts", JSON.stringify(this.people));
},
displayContacts : function(){
var contacts = this.people;
console.log(contacts);
},
getFormData : function(e){
var contacts = {};
var target = e.target.length;
for(var i = 0; i < target; i++){
if(e.target[i].nodeName === "INPUT"){
contacts[e.target[i].name] = e.target[i].value;
/*console.log(contacts);*/
}
}
this.people.push(contacts);
this.setStorage();
return false;
},
render: function(){
},
init : function(){
this.cacheDom();
this.bindEvent();
this.setStorage();
}
}
addressBook.init();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
<link href="./bootstrap-3.3.7-dist/css/custom.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="row wrapper">
<div class="col-md-4 input_field">
<form class="address_book" method="post">
<div class="form-group">
<label for="exampleInputEmail1">First Name</label>
<input type="text" class="form-control first_name" id="exampleInputEmail1" placeholder="First Name" name="first_name">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Last Name</label>
<input type="text" class="form-control" id="exampleInputEmail1" placeholder="Last Name" name="last_name">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" name="email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Telephone</label>
<input type="number" class="form-control" id="exampleInputPassword1" placeholder="Phone Number" name="telephone">
</div>
<button type="submit" class="btn btn-default submit_to_storage">Submit</button>
<button type="edit" class="btn btn-default submit_to_storage">edit</button>
<button type="delete" class="btn btn-default submit_to_storage">delete</button>
<button type="find" class="btn btn-default find_contacts">find</button>
</form>
</div>
</div>
<div class="row">
<div class="col-sm-push-10 output">
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script src="./bootstrap-3.3.7-dist/js/localStorage.class.js"></script>
</body>
</html>
【问题讨论】：
标签： javascript jquery html duplicates local-storage