11

I have two HTML pages, example1.html and example2.html.

How do I pass variables from example1.html to example2.html using the query string, and retrieve that variable in example2.html without using any serverside code?

the Tin Man
  • 158,662
  • 42
  • 215
  • 303
mahesh
  • 3,067
  • 16
  • 69
  • 127
  • Possible duplicate of [How to pass javascript object from one page to other](http://stackoverflow.com/questions/7709289/how-to-pass-javascript-object-from-one-page-to-other) – jherax Feb 04 '16 at 18:24
  • Possible duplicate of [Persist javascript variables across pages?](https://stackoverflow.com/questions/1981673/persist-javascript-variables-across-pages) – jherax Feb 04 '16 at 18:30
  • 1
    Possible duplicate of [Global Variable usage on page reload](http://stackoverflow.com/q/29986657/2247494) – jherax Feb 04 '16 at 18:32
  • Possible duplicate of [How to send variables from one file to another in Javascript?](http://stackoverflow.com/q/17309199/2247494) – jherax Feb 04 '16 at 18:34
  • Possible duplicate of [Passing javascript variables between pages](http://stackoverflow.com/q/11581543/2247494) – jherax Feb 04 '16 at 18:40

3 Answers3

17

In example1.html:

<a href='example2.html?myVar1=42'>a link</a>
<a href='example2.html?myVar1=43'>another link</a>

or generate the links with Javascript as desired. Just make sure the ?varName=value gets onto the end of example2.html somehow.

Then, in example2.html, you use Javascript to parse the query string that example2 came with.

To do this, you could try Querystring. 

// Adapted from examples on the Querystring homepage.
var qs = new Querystring();
var v1 = qs.get("myVar1");

Alternatively, parent.document.URL contains the complete URI for the page you're on. You could extract that:

parent.document.URL.substring(parent.document.URL.indexOf('?'), parent.document.URL.length);

and parse it manually to pull the variables you encoded into the URI.

EDIT: Forgot the 'new' part of 'new Querystring()'. Oops...

Dan Sebastian
  • 519
  • 5
  • 19
cubic1271
  • 1,118
  • 8
  • 14
  • Thanks for the reply i tried the second method what you suggested its working fine , i have writtten like var a=parent.document.URL.substring(parent.document.URL.indexOf('myVar1='), parent.document.URL.length); alert(a); – mahesh Sep 16 '10 at 07:03
  • But the problem is i have to store only 42 into variable a ,when i write alert(a); it displays myVar1=42 ,but how will i display only 42 – mahesh Sep 16 '10 at 07:05
  • From a quick glance (I'm a beginner trying to figure this out also), the example code has the index of 0 is just before the '?'. save the index it finds to a variable. Set a string variable to the name of the variable so you can measure the length property. Then when calling the value of your case it would be var myString = "?myVar1="; then alert(a + myString.Length); to shift to the right the number of characters needed. – DavidG Jan 11 '18 at 18:45
7

HTML / HTTP is stateless, this means that, what you did / saw on the previous page, is completely disconnected with the current page.Question is How to pass variable between two pages in front end. (As HTTP is stateless, every time you load the page it will use the initial values of whatever you set in JavaScript. You can't set a global variable in JS and simply make that value stay after loading the page again.

There are a couple of ways you could store the value in another place so that you can initialize it on load using JavaScript)

1) - Simple using Front End Storages, which equips any Browser (Cookie, Session Storage, Local Storage - which for security reasons available throughout one domain -> it means you can save data on this storage only for one domain, another domain can't access this data ) and put value in one page and get value in others. Considering that:

Cookie saves data until what time you have determined,

Session Storage saves data until the browser default tab closed.

Local Storage saves data until Browser completely closed and shares data between tabs (pages) It stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser Cache / Locally Stored Data - unlike cookie expiry.

2) – Add attributes to the element when it generated via Ajax render function 

<a href='example2.html?action=getAll&element=product&id=1'>a link</a>
<a href='example2.html?action=getAll&element=product&id=2'>another link</a>

-> and after click this element construct “ URL / ? action=getAll & element=product & id=1 “ and in second page which will be gone action you can parse this URL and call appropriate Ajax with appropriate parameters.

Musa
  • 2,596
  • 26
  • 25
2

You can make use of cookies and Querystring to exchange values.

Undo
  • 25,519
  • 37
  • 106
  • 129
Pranay Rana
  • 175,020
  • 35
  • 237
  • 263