title: duplicate entry in localstorage - Javascript
body: <p>I'm attempting to build a simple address book app using a more OOP approach.</p>
  
  <p>Currently it adds to localStorage without problem; but the next task I wanted to accomplish was a function that displays the Key => value pairs within the HTML. I'm stuck at the first hurdle. </p>
  
  <p>When I call the <code>displayContacts()</code> function on the click event, it is creating another empty object within the LocalStorage. Every time I reload the page and click the 'find' button (and assuming no additional information has been added to the form), a new entry will be added to localStorage such as:</p>
  
  <blockquote>
    <p>{"first_name":"","last_name":"","email":"","telephone":""}</p>
  </blockquote>
  
  <p>Thanks in advance</p>
  
  <p>&lt; !-- begin snippet: js hide: false console: true babel: false --></p>
  
  <pre class="lang-js prettyprint-override"><code> 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 &lt; 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();
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --&gt;
      &lt;title&gt;Bootstrap 101 Template&lt;/title&gt;
  
      &lt;!-- Bootstrap --&gt;
      &lt;link href="./bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet"&gt;
      &lt;link href="./bootstrap-3.3.7-dist/css/custom.css" rel="stylesheet"&gt;
  
      &lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;
      &lt;!-- WARNING: Respond.js doesn't work if you view the page via file:// --&gt;
      &lt;!--[if lt IE 9]&gt;
        &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="row wrapper"&gt;
          &lt;div class="col-md-4 input_field"&gt;
  
              &lt;form class="address_book" method="post"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="exampleInputEmail1"&gt;First Name&lt;/label&gt;
                      &lt;input type="text" class="form-control first_name" id="exampleInputEmail1" placeholder="First Name" name="first_name"&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="exampleInputEmail1"&gt;Last Name&lt;/label&gt;
                      &lt;input type="text" class="form-control" id="exampleInputEmail1" placeholder="Last Name" name="last_name"&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="exampleInputEmail1"&gt;Email address&lt;/label&gt;
                      &lt;input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" name="email"&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="exampleInputPassword1"&gt;Telephone&lt;/label&gt;
                      &lt;input type="number" class="form-control" id="exampleInputPassword1" placeholder="Phone Number" name="telephone"&gt;
                  &lt;/div&gt;
  
  
                  &lt;button type="submit" class="btn btn-default submit_to_storage"&gt;Submit&lt;/button&gt;
                  &lt;button type="edit" class="btn btn-default submit_to_storage"&gt;edit&lt;/button&gt;
                  &lt;button type="delete" class="btn btn-default submit_to_storage"&gt;delete&lt;/button&gt;
                  &lt;button type="find" class="btn btn-default find_contacts"&gt;find&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-sm-push-10 output"&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  
  
      &lt;!-- jQuery (necessary for Bootstrap's JavaScript plugins) --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
      &lt;!-- Include all compiled plugins (below), or include individual files as needed --&gt;
      &lt;script src="./bootstrap-3.3.7-dist/js/bootstrap.js"&gt;&lt;/script&gt;
      &lt;script src="./bootstrap-3.3.7-dist/js/localStorage.class.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>