title: Cannot store JSON data to local storage from dynamic list, Jquery Mobile
body: <p>I am trying to save into localstorage data that have been populated from an external json file as "favorites".
  Specifically,</p>
  
  <p>I have a listview in Jquery mobile 1.4.5 that when clicked each item creates a dynamic page.
  Now I want that page to be able to be saved as a favorite for later use.</p>
  
  <p>My code so far:</p>
  
  <p><strong>HTML:</strong>  </p>
  
  <pre><code>&lt;div data-role="page" id="ccc"&gt;
   &lt;div data-role="header"&gt;
      &lt;h1&gt;My page&lt;/h1&gt; 
  &lt;/div&gt;  
  &lt;div role="main" class="ui-content"&gt;
      &lt;ul id="mylist" data-role="listview" data-inset="true"&gt;
  
      &lt;/ul&gt;
  
  &lt;/div&gt; 
  </code></pre>
  
  <p>  </p>
  
  <p><strong>JAVASCRIPT:</strong></p>
  
  <pre><code>    $(document).on("pagebeforeshow", "#ccc", function () {    
  
  $.getJSON('https://api.myjson.com/bins/4khhg', function(data) {
          var output="";
          var newpage="";
          for (var i in data.mydata) {
              output+="&lt;li&gt;" + 
              "&lt;a href=\"#page" + data.mydata[i].myId + "\"&gt;" + 
              "&lt;h3&gt;" + data.mydata[i].thename + "&lt;/h3&gt;" +
              "&lt;p&gt;" + data.mydata[i].desciption + "&lt;/p&gt;" + "&lt;/a&gt;" +
              "&lt;/li&gt;";
  
              //see if page already exists in DOM
              if ($("#page" + data.mydata[i].myId).length == 0) {
                  newpage+="&lt;div data-role=\"page\" id=\"page" + data.mydata[i].myId + "\"&gt;";
                  newpage+="&lt;div data-role=\"header\"&gt;"+
                  "&lt;a data-role=\"button\"  data-rel=\"back\" data-icon=\"back\"&gt;Back&lt;/a&gt;" +"&lt;h3&gt;" +
                  data.mydata[i].thename +  "&lt;/h3&gt;" + 
  "&lt;a data-role=\"button\"  data-icon=\"star\"   class=\"saveit\"  data-saveid=\"" +     data.mydata[i].myId +
                      "\"&gt;Save it button&lt;/a&gt;" + "&lt;/div&gt;";
            newpage+="&lt;div role=\"main\" class=\"ui-content\"&gt;" + 
            data.mydata[i].desciption +  "&lt;/div&gt; &lt;/div&gt;";
              }
  
          }
  
        output+="";
        newpage += "";
        $('body').append(newpage);
        $("#mylist").html(output).listview('refresh');
  ////////////////// start save function ///////////////    
  $(".saveit").click(function (){
  var saveditems = [];
  saveditems[0] = "&lt;h3&gt;  " + data.mydata[i].thename + "&lt;/h3&gt;  " +  data.mydata[i].desciption ;
  localStorage["saveditems"] = JSON.stringify(saveditems);
  var storeditemss = JSON.parse(localStorage["saveditems"]);
      alert(saveditems);
  
  });
  ////////////////// end save function ///////////////
  
  });
  });
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/twjjL53r/9/" rel="nofollow">A fiddle code is here</a></strong></p>
  
  <p>My main problems are:</p>
  
  <ol>
  <li>The function is called as it seems many times ( I have an alert) as
  we click three - four times the button "Save it". The more times we
  go back to the list and then re-open the dynamic pages, the more
  times the function is called.</li>
  <li>The main problem is that the current item in the loop is not saved in localstorage. Only the last item of the loop.</li>
  </ol>
  
  <p>Any help or hints?</p>
  
  <p>thank you !</p>