Persist javascript variables across pages?

Question

Is there a way we can persist javascript variables across various pages? Suppose in Page A I am setting window.someVar = 5. Then I move to Page B, via clicking a hyperlink in A, and do something like alert(window.someVar) -- I should get a message box displaying 5. Is there a technique to persist someVar as such...?

Take a look a this answer: **[How to send variables from one file to another in Javascript?](http://stackoverflow.com/a/17309679/2247494)** — jherax, Feb 04 '16 at 18:03
Also you can find a complete answer here: **http://stackoverflow.com/a/30070207/2247494** — jherax, Feb 04 '16 at 18:13
The accepted answer definitely should be changed. Currently the Storage API is the standard for persisting values. The `window.name` approach is obsolete. — Sebastian Simon, Jun 04 '18 at 14:27
Yes there are, these are called [javascript cookies](https://www.w3schools.com/js/js_cookies.asp) — lofihelsinki, Nov 16 '18 at 10:07

Gumbo · Accepted Answer · 2009-12-30T18:33:23.640

124

You could use the window’s name window.name to store the information. This is known as JavaScript session. But it only works as long as the same window/tab is used.

edited Dec 30 '09 at 18:33

answered Dec 30 '09 at 18:28

Gumbo

643,351
109
780
844

Would it be possible to create a permanent link to a session using this technique, so that the session data could be stored in the page's URL? – Anderson Green Mar 13 '13 at 21:42
@AndersonGreen The storage is bound to the actual window/tab. If the window/tab is closed, the data is lost. If you’re looking for a more persistent solution, have a look at [CMS’ answer](http://stackoverflow.com/a/1981736/53114). Techniques like [Web storage](http://en.wikipedia.org/wiki/Web_storage) have a different scope. – Gumbo Mar 13 '13 at 21:47
@Gumbo Yes, but I'm wondering if it would be possible to save and load the session data from the page's URL, like this: `myPage.html#sessionDataGoesHere`. – Anderson Green Mar 13 '13 at 21:51
1

@AndersonGreen Yes, that would be possible. The URI’s fragment is accessible via `location.hash`. – Gumbo Mar 13 '13 at 21:52
@Gumbo I found out that it's possible to store a JavaScript object in a page's URL. http://stackoverflow.com/a/15399819/975097 – Anderson Green Mar 14 '13 at 02:57
1

It doesn't work with me. The browser issues `sessvars.newObj` is undefined – Feb 15 '14 at 12:15
I feel like when I look for my keys and then I realize I got them in my hand. Thank you for this trick! – Claudi Oct 14 '14 at 11:22
It doesn't work with me either. Even I see this page http://www.thomasfrank.se/sessvarsTestPage1.html working fine and with same js file as I'm using. Don't know why. – Jack Mar 05 '15 at 15:28
@ThangamaniPalanisamy I glanced at this and when you said "Superb Gumbo" I was thinking maybe "Gumbo" was a coder's word for a hack of a particularly specific kind... in fact I think every hack specifically about JS should henceforth be called a "Gumbo" in honour of Gumbo's answer... – mike rodent Mar 12 '15 at 14:56
There's some discussion that window.name will be depreciated in Firefox at least due to the security risk that any website can read the window.name set by any other website. Is there a more secure way I wonder? – Edge Mar 13 '15 at 08:08
Some examples using *url* and *web storage*: **[How to send variables from one file to another in Javascript?](http://stackoverflow.com/a/17309679/2247494)** and a complete answer here: **http://stackoverflow.com/a/30070207/2247494** – jherax Feb 04 '16 at 18:15

score 58 · Answer 2 · edited Jun 21 '18 at 17:08

58

For completeness, also look into the local storage capabilities & sessionStorage of HTML5. These are supported in the latest versions of all modern browsers, and are much easier to use and less fiddly than cookies.

http://www.w3.org/TR/2009/WD-webstorage-20091222/

https://www.w3.org/TR/webstorage/. (second edition)

Here are some sample code for setting and getting the values using sessionStorage and localStorage :

 // HTML5 session Storage
 sessionStorage.setItem("variableName","test");
 sessionStorage.getItem("variableName");


//HTML5 local storage 
localStorage.setItem("variableName","Text");
// Receiving the data:
localStorage.getItem("variableName");

edited Jun 21 '18 at 17:08

ObjectMatrix

325
1
3
9

answered Dec 30 '09 at 18:33

Andy Hume

40,474
10
47
58

4

Ref for implementation: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage – 0xc0de Feb 26 '14 at 13:24
4

Browser support: http://caniuse.com/#search=sessionStorage – Chris Martin Aug 03 '14 at 19:32
Hmm [MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage) Claims IE8 is ok for sessionStorage, [caniuse](http://caniuse.com/#search=sessionStorage) claims that IE11 is required. – icc97 Mar 10 '17 at 13:49

score 28 · Answer 3 · edited Oct 10 '18 at 02:36

28

I would recommend you to give a look to this library:

PersistJS

I really like it, it supports a variety of storage backends (from cookies to HTML5 storage, Gears, Flash, and more...), its usage is really transparent, you don't have to know or care which backend is used the library will choose the right storage backend depending on the browser capabilities.

edited Oct 10 '18 at 02:36

Cam

921
7
13

answered Dec 30 '09 at 18:42

Christian C. Salvadó

807,428
183
922
838

1

can it store large objects aswell? For Example window objects – Mohsin Sheikh Khalid Jul 27 '11 at 08:02
1

Can it store objects having circular / cyclic reference? Like popup `window` object? Or, native objects like HTML5 File API File object? – Prakhar Mishra Jan 05 '16 at 05:45
@MohsinSheikhKhalid http://pablotron.org/?cid=1557 this link is outdated for migrated... please can update the link – Mirko Cianfarani Mar 22 '18 at 10:14
The link is outdated.. because it is migrating.. you can update it? @CMS – Mirko Cianfarani Mar 23 '18 at 10:31

Pekka · Answer 4 · 2009-12-30T18:46:08.720

14

Yes, using Cookies. But be careful, don't put too much in them (I think there is a limit at 4kb). But a few variables are ok.

If you need to store considerably more than that, check out @Annie's great tips in the other answer. For small time data storage, I would say Cookies are the easiest thing.

Note that cookies are stored client side.

edited Dec 30 '09 at 18:46

answered Dec 30 '09 at 18:28

Pekka

442,112
142
972
1,088

8

Other downside of cookies is that they are sent along with every HTTP request within the domain which were created, even with *static* content like images... – Christian C. Salvadó Dec 30 '09 at 18:46

score 9 · Answer 5 · answered Dec 30 '09 at 18:32

9

You can persist values using HTML5 storage, Flash Storage, or Gears. The dojo storage library provides a nice wrapper for this.

answered Dec 30 '09 at 18:32

Annie

6,621
22
27

updated link - https://dojotoolkit.org/reference-guide/1.10/dojo/store.html – roshnet May 31 '20 at 02:38

score 7 · Answer 6 · answered Aug 03 '14 at 19:23

7

I recommend web storage. Example:

// Storing the data: localStorage.setItem("variableName","Text"); // Receiving the data: localStorage.getItem("variableName");

Just replace variable with your variable name and text with what you want to store. According to W3Schools, it's better than cookies.

answered Aug 03 '14 at 19:23

ElectroBit

1,152
11
16

1

This works for a single domain, not across multiple domains. Not much useful in my case. – Masud Rahman May 06 '16 at 01:31
@MasudRahman You can also persist variables across domains using [using `postMessage()`](https://stackoverflow.com/a/33957989/975097) with an embedded iframe. – Anderson Green Jun 09 '21 at 22:23

Persist javascript variables across pages?

6 Answers6

Linked

Related