Ad

Node JS Project Where Client Side Javascript Variables Persist?

- 1 answer

I come from a PHP background and I'm new to Node JS development. I decided to try a basic Meteor JS + Iron Router + React project. The following behaviour caught me off guard:

  1. I'm on a page like http://192.168.0.110:3000/dashboard/john and it has a link like <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/dashboard/john/111222">. When the page first loads, a client side javascript variable myvariable has the value undefined but I set it to myvariable="hello world" as the page loads.

  2. When I click on the <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="/dashboard/john/111222"> link, the page loads up, but to my surprise, the myvariable already has the value hello world instead of undefined.

So even though I went to a totally new url, in which I expected a full page refresh, the myvariable maintained the value of the previous page. Because of my PHP background, I was expecting the value undefined.

This is a completely new behaviour to me because if this were a PHP project, I would have had to explicitly write code to give the illusion that client side javascript variables persist across different page urls (or I use ajax to redraw the screen). But with my NodeJS project, I didn't have to do any of that, and the client side variable maintained it's value.

So my question is, what is this behaviour called? And is it Node JS, Meteor, Iron Router or React that's responsible for this behaviour? Once I know the name of this behaviour, then I can google and read up on details.

Here's the code for my project:

myproject.jsx

var myvariable;
var configAppRoute = {action:applicationController};
Router.route('/dashboard/:username',configAppRoute);
Router.route('/dashboard/:username/:appid',configAppRoute);
function applicationController()
{
  console.log(myvariable);
  myvariable='hello world';
  console.log(myvariable);

  Meteor.startup(function () {
  ReactDOM.render(<App />, document.getElementById("render-target"));
  });
}

App.jsx

App = React.createClass({

  render() {
    return (
      <div>
        <a href={'/dashboard/john/111222'}>click me</a>
      </div>
    );
  }
});

myproject.html

<head>
  <title>My Project</title>
</head>

<body>
  <div id="render-target"></div>
</body>
Ad

Answer

I have never used Iron Router, but I can still confidently tell you that this is where the behavior is coming from.

Iron Router includes a client-side router. This means that your app is actually a single-page app that behaves like a multi-page app.

Since you are writing a single-page app, variables are never "reset," as your context persists for the entire duration of user interaction -- new "pages" are written to the SAME instance of the Document Object. So, unless the user navigates away from the app, you'll get to keep the context.

Ad
source: stackoverflow.com
Ad