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, Feb 13 '14 at 20:49
Found an example [here](https://gist.github.com/smebberson/1581536) 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, Feb 14 '14 at 00:01

score 3 · Answer 1 · answered Feb 13 '14 at 20:55

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 '14 at 20:55

c-smile

26,734
7
59
86

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... ;-) – joeytwiddle Feb 13 '14 at 21:16
Ya after some tinkering and googling I think session storage is the way to go. – Jake Sellers Feb 13 '14 at 21:17
1

If you're going to write directly into sessionStorage, keep this in mind: http://stackoverflow.com/questions/9742395/scope-of-sessionstorage-and-localstorage – Jackson Egan Feb 13 '14 at 21:29

score 2 · Answer 2 · edited May 23 '17 at 11:53

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 '17 at 11:53

Community

1
1

answered Feb 13 '14 at 20:51

Jackson Egan

2,715
4
18
26

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? – Jake Sellers Feb 13 '14 at 20:56
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. – joeytwiddle Feb 13 '14 at 21:15
@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. – Jackson Egan Feb 13 '14 at 21:18
@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 Feb 13 '14 at 21:39
@Sneagan PS. do you recommend one over the other? – Jake Sellers Feb 13 '14 at 21:41
@JakeSellers I've only ever worked with Backbone myself, but I'm giving Angular a try on a personal project right now so that I can answer that very question! What I will say is that Backbone is more bare bones (hue hue), where Angular tries to be a full-featured development framework. There are much more experienced people than I talking about it all over so read up a bit before diving in. :) – Jackson Egan Feb 13 '14 at 21:54

Sharing data between web pages with JavaScript

2 Answers2