Sharing data between web pages with JavaScript

Question

I'm working on a GPS/mapping app using Node.js, express, Socket.IO, and MongoDB. The tracker page uses HTML5 geolocation and Socket.IO to send coords to the server and store them into MongoDB. I'm now working on creating user pages so a user can view previously recorded data. I'm currently minus a log in page, so index.html just populates a list of user names and I can select one.

My problem is that I am unsure of how to best pass data such as the username of the selected user to the next page. I have been trying to avoid opening a socket connection to the server just to pass one username but if that is the best way then no problem. I am also aware of localStorage as an option. Here is some code snippets to give you an idea of what I'm working on:

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>

The ajax is just hitting an express route that asks the MongoDB for collection names (each user has a collection). Also I'm having trouble getting the data from the specific anchor tag I clicked on. So I need to get the user name I clicked on and send it to the "userpage", which, for now would be almost identical to index.html, it would select the specific user collection and show a list of available objects (arrays of map coords);

tl;dr: get data from anchor tag clicked, make data available to next page.

You should consider a single page JS application. It will increase the complexity of your development, but it will drastically improve your application. Look into something like Angular or Backbone. — Jackson Egan
– Jackson Egan, Commented Feb 13, 2014 at 20:49
Found an example here that shows correct ways to write express routes, specifically a secure login page/system. Several of the problems I was having were solved just by using express properly. — Jake Sellers
– Jake Sellers, Commented Feb 14, 2014 at 0:01

c-smile · Accepted Answer · 2014-02-13 20:55:38Z

3

That's exactly what sessionStorage were designed for - to pass data from one page to another. localStorage can also be used for that but it is more for persistence of some data between sessions.

answered Feb 13, 2014 at 20:55

c-smile

27.6k8 gold badges66 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

joeytwiddle Over a year ago

If the data is only used by that user, and doesn't need to be stored on the server, then localStorage or sessionStorage are great. Until the user switches browser... ;-)

Jake Sellers Over a year ago

Ya after some tinkering and googling I think session storage is the way to go.

Jackson Egan Over a year ago

If you're going to write directly into sessionStorage, keep this in mind: stackoverflow.com/questions/9742395/…

Community · Accepted Answer · 2017-05-23 11:53:52Z

2

If you have to pass data like that between pages the simplest way that comes to my mind is just passing it as a query string.

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

Then you can read those out into variables on the destination page.

You can get and set the query string pretty simple with some simple methods on the window as discussed here:

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

You can also get a little more complex with it by using a function with RegEx to parse the URL, as answered here:

How can I get query string values in JavaScript?

Keep in mind that you should limit your URLs to ~2000 characters.

edited May 23, 2017 at 11:53

CommunityBot

11 silver badge

answered Feb 13, 2014 at 20:51

Jackson Egan

2,7454 gold badges20 silver badges28 bronze badges

6 Comments

Jake Sellers Over a year ago

That was my first idea but after some googleing i found several responses similar to, "You shouldn't be doing this with jquery!" so I went in other directions. Can you explain how to do this?

joeytwiddle Over a year ago

Different queries here. "Query string" is the text that comes after the ? above. It is often used for searches and form submission. "jQuery" is a Javascript library which you may or may not use, regardless of the haters or fanboys.

Jackson Egan Over a year ago

@JakeSellers Updated. Those other people are technically right. The 'correct' method is to write a single page JS application that integrates with your backend as I mentioned in my initial comment on the post. However, if you must do it this way, this method will work.

Jake Sellers Over a year ago

@Sneagan I have to agree. I very much appreciate the post and links but I guess now is a great time to learn angular or backbone and do it right.

Jake Sellers Over a year ago

@Sneagan PS. do you recommend one over the other?

|

Collectives™ on Stack Overflow

Sharing data between web pages with JavaScript

2 Answers 2

3 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related