Javascript global variable does not persist when navigate to another page (which also uses same js file)
<p>I have shared js code like this in angus.js</p>

<pre><code>var g_colour;

function getcolour() {
  return g_colour;
}

function setcolour(colour) {
  g_colour = colour;
}
</code></pre>

<p>Which is accessed by html pages 1 and 2 like this:</p>

<p>1.html:</p>

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

<p>2.html:</p>

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

<p>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.</p>

<p>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?</p>
