1
我试图建立一个简单的地址簿应用程序使用更多的面向对象方法。localstorage重复条目 - Javascript
目前它没有问题地添加到localStorage;但是我想要完成的下一个任务是在HTML中显示Key =>值对的函数。我被困在第一个障碍。
当我在click事件上调用displayContacts()函数时，它正在LocalStorage内创建另一个空对象。每次我重新加载页面并点击'查找'按钮（并且假设没有附加信息被添加到表单），一个新条目将被添加到localStorage，例如：
{“first_name”：“ ”， “姓氏”： “”， “电子邮件”： “”， “电话”： “”}
在此先感谢
< - 开头段：JS隐藏：假控制台：真babel：false - >
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>
请，当你创建一个片段，创建一个片段。它应该实际运行。否则，只需要缩进4个空格即可进行代码格式化 – mplungjan