Javascript : Global variables become null after using location.assign

Question

I have 2 html and 3 js files in this manner

globals.js --> 
    testIndex = 1;

login.html
    //includes global.js and login.js. Fires event() function on a button click

login.js
    function event()
    { 
         window.testIndex = 2;
         window.location.assign('index.html')
    }

index.html
    //includes globals.js and index.js
    fires init() function onLoad

index.js
    function init()
    {
         alert(window.testIndex);
    }

The assigning works fine, but the alert box in index.html always reads 1. My global variables are getting reinitialized when i use window.location.assign. I need to pass some variables (some of them are not plain text strings so cant use the url). What should i do ?

I have tried this : Used window.testIndex = 1 in global.js Tried removing inclusion of global.js in index.html (thought including the file again in the same window might be creating problems) — sidg_hrdwre, May 25 '14 at 11:56
Some browsers already have a *window.event* property that references the last created *event* object. Usually. So creating a function called *event* isn't such a good idea. ;-) — RobG, May 25 '14 at 11:59
You set a global property, then load a different document, which will create a new global (window) object. — RobG, May 25 '14 at 12:02
Yes exactly. So how do i maintain some variables accross different documents ? BTW, event() is only an example. Those are not real function names. — sidg_hrdwre, May 25 '14 at 12:10

Joshua Bemenderfer · Accepted Answer · 2014-05-25T12:47:29.193

3

The simplest way to persist a variable across multiple pages would be to use HTML5 sessionStorage. However, this feature is available only in modern browsers (IE8+). See here (html5polyfill.com) for polyfills for older browsers.

More information on sessionStorage can be found here (MDN).

sessionStorage example:

globals.js --> 
    sessionStorage['testIndex'] = 1;

login.html
    //includes global.js and login.js. Fires event() function on a button click

login.js
    function event()
    { 
         sessionStorage['testIndex'] = 2;
         window.location.assign('index.html')
    }

index.html
    //includes globals.js and index.js
    fires init() function onLoad

index.js
    function init()
    {
        alert(sessionStorage['testIndex']);
    }

If you need to store non-string objects, first convert them to their string representation using JSON.stringify(), and read them back using JSON.parse().

edited May 25 '14 at 12:47

answered May 25 '14 at 12:41

Joshua Bemenderfer

71
1
3

Hi Tribex, Thanks for the answer. This is similar to localStorage which i just found and its kind of what i am looking for. However i do need to pass objects. So i used stringify and parse. However in the second html file, after parsing, when i try to call a fuunction of that object, firebug says no such function. – sidg_hrdwre May 25 '14 at 13:17
No problem! I was just working on a project that uses localStorage. And I am sorry to say, JSON is a data interchange format, and is therefore unable to store functions. With that in mind, you should never have to store functions, just data. If you really MUST, write the function as a string (which you can then store and retrieve) and parse it using [eval()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval). – Joshua Bemenderfer May 25 '14 at 13:26
Ok. Understood. No function Storage. But then i am nowhere again. The problem is i have websocket object that establishes a connection with server in login.html. Once the websocket cconnection is opened, i want to pass this websocket object to my index.html and use it to send data (tokens) to the server. Now if i cant pass the function defintions and all to index.html, then how do i use its methods to send data. – sidg_hrdwre May 25 '14 at 13:35
I haven't done much with WebSockets, but can't you just create a new connection? (I assume you have a good reason not to) [Here](http://stackoverflow.com/questions/10886910/how-to-maintain-a-websockets-connection-between-pages) is a SO question that deals with your issue. – Joshua Bemenderfer May 25 '14 at 13:38
creating a new authenticate connection means sending login credentials again. This wont be optimal. There is no point of login.html in that. I may as well pass the username and password to index.html and create a connetion there only... – sidg_hrdwre May 25 '14 at 13:54
Well its confirmed. I just modified my server and check the debug log. It seems using anything... assign() or replace() or whatever, will always refresh the page and the server closes connection in such an event. so a reconnection is the only way. I guess i will resort to using iframes and have a hidden i frame for my connection. That should work. Thanks a lot for your help. It made me understand a lot of subtle points. – sidg_hrdwre May 25 '14 at 14:36
No problem! I learned a thing or too two trying to figure this out. Hope it goes well! – Joshua Bemenderfer May 26 '14 at 00:27

Javascript : Global variables become null after using location.assign

1 Answers1