title: retrieve value in last object of localStorage
body: <p>I am trying to retrieve the last object in localStorage (a user with "name" and "email" attributes). I would like to access the "name" and "email" values individually, and print them out as a string. This is what my template outputs:</p>
  
  <p><code>{"name":"eamon","email":"eamon.white@yahoo.com"}</code></p>
  
  <p>I would like it to output:</p>
  
  <p><code>eamon, eamon.white@yahoo.com</code></p>
  
  <p>Here is my code:</p>
  
  <p>templates/usershow.ejs</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;%= localStorage.getItem(localStorage.key(localStorage.length - 1)) %&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>application.js</p>
  
  <pre><code>$(document).ready(function() {
      $("#signupform").submit(function(e) {
          e.preventDefault();
          var user = {
              name: $('#pname').val(),
              email: $('#email').val()
          };
          localStorage.setItem('user', JSON.stringify(user));
          //console.log(JSON.parse(localStorage.getItem('user')));
          var html = new EJS({url: 'templates/usershow.ejs'}).render(user);
          var content = document.getElementById('content');
          content.innerHTML = content.innerHTML + html;
          $("#signupform").remove();   
      });
  });
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;it IT&lt;/title&gt;
    &lt;link rel="stylesheet" type="text/css" href="application.css" /&gt;
    &lt;script src="jquery.js"&gt;&lt;/script&gt; 
    &lt;script src="application.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="ejs_production.js"&gt;&lt;/script&gt;
    &lt;!--[if lt IE 9]&gt;
    &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
    &lt;![endif]--&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;it IT&lt;/h1&gt;
      &lt;div id="signup"&gt;
          &lt;form id="signupform"&gt;
              Name: &lt;input type="text" name="pname" id="pname"&gt;&lt;br&gt;
              Email: &lt;input type="text" name="email" id="email"&gt;&lt;br&gt;
              &lt;input type="submit" value="sign up"&gt;
          &lt;/form&gt;
      &lt;/div&gt;
      &lt;div id="signin"&gt;&lt;/div&gt;
      &lt;div id="content"&gt;&lt;h2&gt;Name : Email&lt;/h2&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I changed the template to this:</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;%= localStorage.getItem(localStorage.key(localStorage.length - 1)).name %&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>It seems now as if it is returning an empty string, their is nothing next to the list bullet point on the rendered page. I'm trying to create a user database essentially...is this the way to go about it?</p>
  
  <p>Also, I get this error: </p>
  
  <p><code>XMLHttpRequest cannot load file://localhost/Users/Eamon/code/templates/usershow.ejs. Cross origin requests are only supported for HTTP. ejs_production.js:1
  Uncaught #&lt;Object&gt; ejs_production.js:1</code></p>
  
  <p>in the chrome console...and nothing renders...but everything seems to work in firefox...</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>This got rid of the load file error:</p>
  
  <pre><code>var html = new EJS({url: 'http://localhost/code/templates/usershow.ejs'}).render(user);
  </code></pre>
  
  <p>Is that a correct solution? I am still getting the <code>Uncaught #&lt;Object&gt; ejs_production.js:1</code> error.</p>