Set javascript global variables across multiple pages
I want to store global variables in javascript array to make them available for multiple pages.
I know that cookies or localstorage can do similar things. But I want to store lots of information therefore it would be better if I can figure out a way to store them in javascript array.
For example, in html 1 file
<head>
<title>Global javascript example</title>
</head>
<body>
<button type="button" onclick="global_var['a']['a']=1;"> a,a set to 1 </button>
<br/>
<button type="button" onclick="global_var['a']['b']=1;"> a,b set to 1 </button>
<br/>
<button type="button" onclick="alert(global_var['a']['b']);"> echo a,b </button>
</body>
Now in another html file or the same page after refresh, I want to access the global variable:
<head>
<title>Global javascript example</title>
</head>
<body>
<button type="button" onclick="alert(global_var['a']['b']);"> echo a,b </button>
</body>
Is there any way to implement this other than using cookies?
Answer
The short answer is:
localStorage.setItem("bar", foo);
and then:
var foo = localStorage.getItem("bar");
The long answer is http://diveintohtml5.info/storage.html