【问题标题】:retrieve value in last object of localStorage在 localStorage 的最后一个对象中检索值
【发布时间】:2013-05-28 21:33:21
【问题描述】:

我正在尝试检索 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>

应用程序.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 #&lt;Object&gt; ejs_production.js:1 错误。

【问题讨论】:

标签: javascript json string object local-storage


【解决方案1】:

想通了,改了这一行的内容:

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

...但在简单的 SPA 中维护用户数据库方面仍然可以使用一些指导。

【讨论】:

    【解决方案2】:

    当您启动 CHROME 浏览器时,添加命令行选项 --allow-file-access-from-files

    这应该可以解决您的 XMLHttpRequest 错误。

    【讨论】:

    • 我在哪里输入这个?某处的 chrome 偏好?
    • 想通了.../Applications/Google\ Chrome.app/Contents/MacOS/Chrome --allow-file-access-from-files - 我每次启动 chrome 进行测试时都必须这样做吗?
    • 基本上是的。在我的 Ubuntu 上,我可以在 Chrome 的桌面图标中指定命令行选项,这让生活更轻松。我对 Mac 了解的不够多,无法帮助您,但它确实具有该功能。
    • hmmm...我想我可以在我的 .bash_rc 或 .bash_profile 中做一些事情...但我不知道是什么
    • 快速搜索发现:superuser.com/questions/271678/… 不知道是否有帮助。
    猜你喜欢
    • 2013-05-13
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-01-07
    • 1970-01-01
    相关资源
    最近更新 更多