how to exchange variables between two HTML pages?

Question

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?

Answer 1

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...

Answer 2

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.