title: Phonegap Jquery Mobile Saving Data to Phone
body: <p>Im trying something simple below. I want to accept user input for their name click a button save it and when the app loads a second time it displays the name.</p>
  
  <p>Where am I going wrong below?</p>
  
  <p>Do i need to put this code block somewhere else?</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
  
  $(function(){
  $('#saveButton').click(function() {
          window.localStorage.setItem("name", $('#name').val());
  });
      $('#newpage').live('pageshow', function() {
          var personName = window.localStorage.getItem("name");
          if(personName.length&gt;0){
                  $('#name').val(personName);
          }
      });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Full html file</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;meta name="format-detection" content="telephone=no" /&gt;
  &lt;meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /&gt;
  &lt;link rel="stylesheet" type="text/css" href="jquery.mobile-1.2.0.css" /&gt;
  &lt;script type="text/javascript" src="jquery-1.8.2.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="jquery.mobile-1.2.0.js"&gt;&lt;/script&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
  $(function(){
  $('#saveButton').click(function() {
          window.localStorage.setItem("name", $('#name').val());
  });
      $('#newpage').live('pageshow', function() {
          var personName = window.localStorage.getItem("name");
          if(personName.length&gt;0){
                  $('#name').val(personName);
          }
      });
  
  });
  &lt;/script&gt;
  
  
  &lt;title&gt;Hello World&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="home" data-role="page"&gt;
      &lt;div data-role="header"&gt;
          &lt;h1&gt;
              Home Page&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div data-role="content"&gt;
          hello Phone Gap and JQuery Mobile! &lt;a href="#newpage" data-role="button"&gt;new page&lt;/a&gt;
      &lt;/div&gt;
      &lt;div data-role="footer" data-position="fixed"&gt;
          &lt;h4&gt;
              footer&lt;/h4&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div id="newpage" data-role="page"&gt;
      &lt;div data-role="header"&gt;
          &lt;h1&gt;
              new Page&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div data-role="content"&gt;
          &lt;label for="name"&gt;what is your name?&lt;/label&gt;
          &lt;input id="name" type="text" name="name" value="" /&gt;
          &lt;a id="saveButton" href="" data-role="button"&gt;Save&lt;/a&gt;
      &lt;/div&gt;
      &lt;div data-role="footer" data-position="fixed"&gt;
          &lt;h4&gt;
              footer&lt;/h4&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript" src="cordova-2.1.0.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="js/index.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      app.initialize();
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>