creating a variable and 'storing it' when moving between pages, jquery

Question

im pretty new to js/jquery and i was trying to set a varable on one page, store it, move page and then use the varable on the new page.

ive made an a tag like this a id="ex1" href="/example.hmtl">ONE<a>

that on click would take you to the page /example.html and set a varable called 'image' to 1 for this the jquery id use is

$("#ex1").click(function() {
  var image = 1;
});

once your on page example.html id like the value of the varable 'image' to be loaded into the the value of startAtSlide

$('.iosSlider').iosSlider({
    startAtSlide   : //value of var 'image' goes here,
    snapToChildren : true
});

is that possable to do, if so am i going about it in the right way ?

possible duplicate of [Passing javascript variables between pages](http://stackoverflow.com/questions/11581543/passing-javascript-variables-between-pages) — Felix Kling, Aug 10 '12 at 12:56
possible duplicate of [Global Variable usage on document.ready reload](http://stackoverflow.com/questions/29986657/global-variable-usage-on-document-ready-reload) — Stephan Muller, Jun 05 '15 at 09:39

score 7 · Accepted Answer · answered Aug 10 '12 at 12:50

7

I suggest you take a look at localStorage or you try using cookies (for cookies you have a jQuery plugin if you want to use it)

answered Aug 10 '12 at 12:50

nicosantangelo

13,216
3
33
47

would the cookie be instead of var ? so '$.cookie('image', '1');' or would i use the cookie to store the var – sam Aug 10 '12 at 12:54
yup, then `$.cookie('image'); //'1'` just remember, if you're using the plugin, to include it in the pages you need it – nicosantangelo Aug 10 '12 at 12:56

score 2 · Answer 2 · answered Aug 10 '12 at 12:53

Refreshing a page or navigating to another (related) page kills the current JavaScript environment and builds another one.

Passing variables from one page to another is not as straightforward as you might think.

The suggestion @siidheesh gave you is to put the contents of some variables in the location-hash, that part of the URL after the # sign. But that of course is limited with regards to structure - you can't put objects only scalar values, and with regards to aesthetics when adding multiple variables.

Most current websites in which you've seen some behavior that looks like this are created using AJAX; which means they do not refresh the page or navigate to another page (ever) they always request the content of that other page (via JavaScript) and when they receive it they load the data into the areas of interest.

score 1 · Answer 3 · answered Aug 10 '12 at 12:49

1

There is more than two way:

Use cookies to store your variable and then retrieve it in second page
Pass that variable using url parameter a id="ex1" href="/example.hmtl?startat=1">ONE<a>. Then use javascript to parse that parameter (using location.href)

answered Aug 10 '12 at 12:49

James

13,571
6
61
83

This is doable when not using a dynamic page. If you have a dynamic page you may interfere with its parameters which is not advisable. – Mihai Stancu Aug 10 '12 at 12:54

score 1 · Answer 4 · answered Aug 10 '12 at 12:54

1

to write data to localStorage use:

localStorage.setItem.image = 1;

to read it from storage use

localStorage.image

that's all

answered Aug 10 '12 at 12:54

WooCaSh

5,180
5
36
54

score 1 · Answer 5 · answered Aug 10 '12 at 13:00

Many have suggested using localStorage, but I must warn that localStorage is not universally supported by every browser as of yet.

Cookies are a viable solution, however, for your purposes, I feel location.hash would be the best solution. Your link would look as follows:

<a href="index.html#1">ONE</a>

And to get that variable in javascript:

var slideNumber = location.hash.substr(1);

Here we use substr to skip the # provided in the location.hash string

score 0 · Answer 6 · answered Aug 10 '12 at 12:58

You can use a regex on window.location.href to get values of POST variables.

A function to do it :

function getUrlVars()
{
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,
    function(m,key,value)
    {
        vars[key] = value;
    });
    return vars;
}

Then you can get values with getUrlVars()["lang"]; (should return "en")

And simply set them in your url example.html?lang=en

creating a variable and 'storing it' when moving between pages, jquery

6 Answers6