在localStorage的最后一個對象中檢索值

Question

我正在嘗試檢索localStorage中的最后一個對象（具有“名稱”和“電子郵件”屬性的用戶）。 我想分別訪問“名稱”和“電子郵件”值，並將它們打印為字符串。 這是我的模板輸出：

{"name":"eamon","email":"eamon.white@yahoo.com"}

我希望它輸出：

eamon, eamon.white@yahoo.com

這是我的代碼：

模板/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>

更新

我將模板更改為此：

<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

在chrome控制台中...什么都沒有呈現...但是一切似乎都在Firefox中正常工作...

更新

這擺脫了加載文件錯誤：

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

那是正確的解決方案嗎？ 我仍然收到Uncaught #<Object> ejs_production.js:1錯誤。

Answer 1

啟動CHROME瀏覽器時，添加命令行選項--allow-file-access-from-files

那應該修復您的XMLHttpRequest錯誤。

Answer 2

弄清楚了，更改了這一行的內容：

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

...但仍然可以在簡單的SPA中維護用戶數據庫時使用一些指導。

在localStorage的最后一個對象中檢索值

問題描述

2 個解決方案

解決方案1
0 2013-06-02 17:07:11

解決方案2
0 已采納 2013-06-02 18:42:58

在localStorage的最后一個對象中檢索值

問題描述

2 個解決方案

解決方案1 0 2013-06-02 17:07:11

解決方案2 0 已采納 2013-06-02 18:42:58

解決方案1
0 2013-06-02 17:07:11

解決方案2
0 已采納 2013-06-02 18:42:58