Javascript global variable does not persist when navigate to another page (which also uses same js file)

Question

I have shared js code like this in angus.js

var g_colour;

function getcolour() {
  return g_colour;
}

function setcolour(colour) {
  g_colour = colour;
}

Which is accessed by html pages 1 and 2 like this:

1.html:

<html>
<head>
<title>Global javascript example</title>
</head>
<body>
<a href="2.html">Page2</a>
<script src="angus.js"></script>
<form name="frm">
<input type="button" value="Setblue" onclick="setcolour('blue');" />
<input type="button" value="Setyellow" onclick="setcolour('yellow');" />
<input type="button" value="getcolour" onclick="alert(getcolour());" />
</form>
</body>
</html>

2.html:

<html>
<head>
<title>Global javascript example page 2</title>
</head>
<body>
<a href="1.html">Page1</a>
<script src="angus.js"></script>
<form name="frm">
<input type="button" value="Setblue" onclick="setcolour('blue');" />
<input type="button" value="Setyellow" onclick="setcolour('yellow');" />
<input type="button" value="getcolour" onclick="alert(getcolour());" />
</form>
</body>
</html>

If I set a colour in one page and navigate to page 2, and THEN access the colour, it returns undefined. ie I it seems that a new instance of g_colour is created on loading a new html page.

I want to be able to access a sort of top-level variable which I can set in page 1 and access in page 2. How can I do that in Javascript?

You could pass it in the request sent to page 2 as part of the query string or make it available using a cookie that page 1 writes, and page 2 reads. — Richard Ev, Jan 03 '13 at 12:56
I agree that localStorage is good suggestion but make sure to *check* that is is available as not all older browsers support it and make sure to use fallback if not. http://www.quirksmode.org/dom/html5.html — Peter Pajchl, Jan 03 '13 at 13:02
What a nightmare that would be if pages shared javascript variables... — jbabey, Jan 03 '13 at 13:17

score 11 · Accepted Answer · answered Jan 03 '13 at 12:56

11

JS variables never have been persistent, but there are two ways around this:

Cookies
Storage

Cookies are supported in all but the most ancient browsers, but they can be very unwieldly and difficult to use. On top of that, your browser sends cookies to the server with every pageload, so if it's only used by JavaScript then it's very inefficient.

Instead, you should probably look at the Storage option.

Saving an item is as simple as localStorage.itemname = value; Reading is as easy as localStorage.itemname, and deleting is as literal as delete localStorage.itemname

These values are saved across pageloads, but not sent to the server.

answered Jan 03 '13 at 12:56

Niet the Dark Absol

320,036
81
464
592

i believe `removeItem` is recommended over `delete` as the latter will not work properly with shimmed implementations. [Related](http://stackoverflow.com/questions/6906494/deleting-from-localstorage-should-i-use-delete-or-removeitem). – jbabey Jan 03 '13 at 13:20
I thought cookies was the solution, just wanted to check. I will also investigate localstorage - although being able to run on any browser is an obvious advantage of cookies. – Angus Comber Jan 03 '13 at 13:43

Cerbrus · Answer 2 · 2013-01-03T13:02:19.857

Use localStorage:

localStorage.setItem('name', 'value');
var something = localStorage.getItem('name');

setItem on your first page, then getItem on your second.

The localStorage persists across pageloads, as opposed to "normal" JavaScript variables.

"Normal" variables are initialized as soon as the JS file is loaded (And runs), but are destroyed when the file unloads, so when the user leaves a page.

You could also use Cookies, but they're a bit of a pain to work with in JS, since they're stored in a string like:

'name=value; name1=value1; name2=value2';

Grant Thomas · Answer 3 · 2013-01-03T13:16:53.373

2

Each page request will request the script and execute its copy of it, even if the request stops at the client because of the cache, the current page still executes it from scratch. They are working with the same code, yes, but different instances (i.e. you have two copies of that variable in two different contexts).

edited Jan 03 '13 at 13:16

answered Jan 03 '13 at 12:56

Grant Thomas

44,454
10
85
129

score 0 · Answer 4 · answered Jan 03 '13 at 13:01

The problem is that your page 1 is loading the JavaScript file and your page 2 is loading it again therefore whatever you have set in a variable on that JS file will be lost when page 2 is loaded since page 2 will initialize again the JS file. If you want you can use cookie to store the value or if it simple to you combine page 1 and page 2 but put them in a different div and show/hide the div according to your logic.

Javascript global variable does not persist when navigate to another page (which also uses same js file)

4 Answers4

Linked

Related