使用JavaScript在网页之间共享数据

时间:2014-02-13 20:46:02

标签: javascript jquery node.js express

我正在使用Node.js,express,Socket.IO和MongoDB开发GPS /地图应用程序。 跟踪器页面使用HTML5地理定位和Socket.IO将coords发送到服务器并将它们存储到MongoDB中。 我现在正致力于创建用户页面,以便用户可以查看以前记录的数据。我目前正在减去登录页面,因此index.html只填充用户名列表,我可以选择一个。

我的问题是我不确定如何最好地将所选用户的用户名等数据传递到下一页。我一直试图避免打开到服务器的套接字连接只是为了传递一个用户名,但如果这是最好的方式,那么没问题。我也知道localStorage是一个选项。 以下是一些代码片段,可以让您了解我正在做的工作:

的index.html:

<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script>
        $(document).ready(function() {
            $.ajax({
              dataType: "json",
              url: "/getusers"
            }).done(function(data) {
                console.log("--->", data);
                for(var i=1; i<data.length; i++) {
                    $('#list').append("<li><a href=http://localhost:3000/mapPage.html>" + data[i].name + "</a></li>");
                }
                $("a").click(function(e) {
                    alert("--->", $(this).html());
                    //alert("--->", $(e).html());
                    //alert("--->", $(e).getVal());
                    //window.localStorage.setItem("username", )
                });
            });
        });
    </script>
</head>
<body>
    <ul id='list'>
    </ul>
</body>
</html>

ajax正在点击一条明确的路线,询问MongoDB的集合名称(每个用户都有一个集合)。此外,我无法从我点击的特定锚标记中获取数据。所以我需要获取我点击的用户名并将其发送到“userpage”,现在它与index.html几乎相同,它将选择特定的用户集合并显示可用对象的列表(数组) map coords);

tl; dr:点击锚标记中的数据,使数据可用于下一页。

2 个答案:

答案 0 :(得分:3)

这正是sessionStorage的设计目标 - 将数据从一个页面传递到另一个页面。 localStorage也可以用于此,但更多的是在会话之间持久保存一些数据。

答案 1 :(得分:2)

如果你必须在页面之间传递这样的数据,我想到的最简单的方法就是将它作为查询字符串传递。

http://localhost:3000/userPage.html?username=jim&user=jdawg149

然后你可以在目的地页面上阅读这些变量。

您可以使用window上的一些简单方法来获取和设置查询字符串,如下所述:

http://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/

通过使用带有RegEx的函数来解析URL,您也可以使用它变得更复杂一些,如下所示:

How can I get query string values in JavaScript?

请注意,您应将网址限制为约2000个字符。