Set javascript global variables across multiple pages

Question

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?

I think only with frames, and set you global vars to your 'top' — ale, May 05 '14 at 16:02
cookies, localstorage, iframe, ajax, any method that persists data across a page refresh. — Kevin B, May 05 '14 at 16:04

score 24 · Answer 1 · answered May 05 '14 at 16:01

24

The short answer is:

localStorage.setItem("bar", foo);

and then:

var foo = localStorage.getItem("bar");

The long answer is http://diveintohtml5.info/storage.html

answered May 05 '14 at 16:01

nicholas

14,184
22
82
138

Thanks for the info. What about on browser that does not support html5? – user2818066 May 05 '14 at 16:15
1

That's what servers are for. – nicholas May 05 '14 at 16:57
3

@user2818066 browsers down to IE8 support localstorage. If you need to go lower than IE8 - you've got problem. – Yuriy Galanter May 05 '14 at 17:23

score 4 · Answer 2 · answered May 05 '14 at 16:04

You can store array (or any other object) into local storage. All you need is JSON.stringify to convert any object (including array) into string to place into the storage and JSON.parse to convert it back into the object after retrieving it from the storage.

Here's quick reference: http://samcroft.co.uk/2013/using-localstorage-to-store-json/

score 2 · Answer 3 · edited May 23 '17 at 12:25

2

Consider using localStorage as nicholas mentioned which holds your comfortable amount of memory like 5MB to unlimited depending on browser capabilities.

If you are still not convinced with cookies or localStorage which are straightforward methods try using libraries like sessvarsJS

A detailed tutorial & demo can be found at Session variables without cookies

edited May 23 '17 at 12:25

Community

1
1

answered May 05 '14 at 16:43

nehem

12,775
6
58
84

pretty cool tool that yes! – Pierre Sep 07 '16 at 12:56

Set javascript global variables across multiple pages

3 Answers3