1
Ich versuche, eine einfache Adressbuch-App mit einem mehr OOP-Ansatz zu bauen.doppelten Eintrag in localstorage - Javascript
Derzeit fügt es ohne Problem zu local; aber die nächste Aufgabe, die ich erreichen wollte, war eine Funktion, die die Schlüssel => Wert-Paare innerhalb des HTML anzeigt. Ich stecke an der ersten Hürde fest.
Wenn ich die displayContacts() Funktion auf dem Click-Ereignis aufrufen, wird es ein anderes leeres Objekt in der Localstorage zu schaffen. Jedes Mal neu geladen ich die Seite und klicken Sie auf die Schaltfläche ‚findet‘ (und keine zusätzliche Informationen unter der Annahme wurde in das Formular eingefügt), wird ein neuer Eintrag hinzugefügt werden, um local wie:
{ „first_name“:“ “, "last_name": "", "E-Mail": "", "Telefon": ""}
Vielen Dank im Voraus
< - beginnt Schnipsel: js verbirgt: falsche Konsole: true 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>
Bitte, wenn Sie einen Ausschnitt zu erstellen, einen Ausschnitt erstellen. Es sollte eigentlich laufen. Andernfalls müssen Sie nur 4 Leerzeichen einrücken, um Code zu formatieren – mplungjan