2013-06-02 4 views
0

Я пытаюсь получить последний объект в localStorage (пользователь с атрибутами «name» и «email»). Я хотел бы получить доступ к значениям «имя» и «электронная почта» отдельно и распечатать их как строку. Это то, что мои шаблонные выходы:получить значение в последнем объекте localStorage

{"name":"eamon","email":"[email protected]"}

Я хотел бы, чтобы выход:

eamon, [email protected]

Вот мой код:

шаблоны/usershow.ejs

<ul> 
    <li><%= localStorage.getItem(localStorage.key(localStorage.length - 1)) %></li> 
</ul> 

application.js

$(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(); 
    }); 
}); 

index.html

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>it IT</title> 
    <link rel="stylesheet" type="text/css" href="application.css" /> 
    <script src="jquery.js"></script> 
    <script src="application.js"></script> 
    <script type="text/javascript" src="ejs_production.js"></script> 
    <!--[if lt IE 9]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
    <![endif]--> 
</head> 
<body> 
    <h1>it IT</h1> 
    <div id="signup"> 
     <form id="signupform"> 
      Name: <input type="text" name="pname" id="pname"><br> 
      Email: <input type="text" name="email" id="email"><br> 
      <input type="submit" value="sign up"> 
     </form> 
    </div> 
    <div id="signin"></div> 
    <div id="content"><h2>Name : Email</h2></div> 
</body> 
</html> 

UPDATE

Я изменил шаблон для этого:

<ul> 
    <li><%= localStorage.getItem(localStorage.key(localStorage.length - 1)).name %></li> 
</ul> 

Кажется, сейчас, если она возвращается пустая строка, их нет ничего рядом с точкой списка на странице рендеринга , Я пытаюсь создать пользовательскую базу данных по существу ... это способ сделать это?

Кроме того, я получаю эту ошибку:

XMLHttpRequest cannot load file://localhost/Users/Eamon/code/templates/usershow.ejs. Cross origin requests are only supported for HTTP. ejs_production.js:1 Uncaught #<Object> ejs_production.js:1

в хромированной консоли ... и ничего не делает ... но все, кажется, работает в Firefox ...

UPDATE

Это избавились от ошибки загрузки файла:

var html = new EJS({url: 'http://localhost/code/templates/usershow.ejs'}).render(user); 

Это правильное решение? Я все еще получаю ошибку Uncaught #<Object> ejs_production.js:1.

+0

Извините за это в комментариях, но откуда вы получили 'ejs_production.js'? Я не мог найти его нигде в Интернете! –

+0

Это было какое-то время, но я думаю, что это ... я не могу точно помнить, что я делал https://code.google.com/archive/p/embeddedjavascript/downloads – ewizard

ответ

0

понял это, изменилось содержимое этой строки:

<%= JSON.parse(localStorage.getItem(localStorage.key(localStorage.length - 1))).name %> 

... но все-таки можно было использовать небольшое направление на ведение базы данных пользователя в простом SPA.

0

При запуске ваш браузер ХРОМ добавить параметр командной строки --allow-file-access-from-files

Это должно исправить вашу ошибку XMLHttpRequest.

+0

где я набираю это? хром предпочтения где-то? – ewizard

+0

им на mac osx ... – ewizard

+0

понял это ...'/ Applications/Google \ Chrome.app/Contents/MacOS/Chrome --allow-file-access-from-files' - мне нужно делать это каждый раз, когда я запускаю хром для тестирования? – ewizard