Share variables between html pages

Question

In first, I know this topic is yet in StackOverflow, but I don't finish to understand how it works exactly reading the existing answers. So, I'm sorry, I hope understand it now.

I don't know if my appoach is incorrect and why it would be incorrect.

I've an html page that acts like a "visor" of another few ones, so from this "main" page, I can watch the other ones embedding them in an area of the visor page (with iframe).

At the same time, I have a common .js file for all the pages (including visor).

So for example, if I have a variable declared with a valor of "hello world" (string type) in .js, I am able to access this variable from visor, or embedded page, and still haves its original valor. But if I change its valor from visor (or embedded), the other page is unable to read the new valor changed from the other page.

Its possible make a global-between-pages variable?.

I make a try with localStorage, but it only works for the particular page where it is used.

So, let's see, more or less:

.JS FILE

var Example = "Hello world";

function TellMe()
{
    alert(Example);
}

function ChangeVar()
{
    Example = "Goodbye world";
}

---

PAGE 1 (with referenced .js file in the head section, of course)

<div onclick="ChangeVar();">click!</div>

---

PAGE 2 (with referenced .js file in the head section, of course), but AFTER div of page 1 have been clicked

<div onclick="TellMe();">click!</div>

this would alert "Hello World", in place of "Goodbye World".

So I understand every page haves its own version of .js variables, even when all are using the same .js, and even when one html in being accessed from another one (embedded with iframe).

How can I get this example resulting after click in the div of page 2 with the message "Goodbye World"?.

---

I'll be more explanatory, seeing the amount of answers telling about hacks, waste other pages, and inflate bank accounts.

It's just about a documentation page (from a software), I have a "visor" page, and from it, I can access the other ones pages. Actually I have "visor" page in the root folder, and the other pages, inside a folder in this root directory, all would be in the same domain, isn't it?.

I want "next" and "previus" buttons on pages, for avoid the user back to visor and choose the new page, but I need to know the number of the page the user is watching for know what page show at next or previus.

Answer 1

I am sharing you the very simple example on localstorage that should fix your requirement. Consider you have two file page1.html and page2.html.

Inside of page1.html add following lines

<div id="notes">
</div>

<script>
if(typeof(Storage)!=="undefined")
  {
  localStorage.lastname="Smith";
  document.getElementById("notes").innerHTML="Last name: " + localStorage.lastname;
  }
else
  {
  document.getElementById("notes").innerHTML="Sorry, your browser does not support web storage...";
  }
</script>

Inside of page2.html

<div id="notes">
</div>

<script>
if(typeof(Storage)!=="undefined" && localStorage.lastname)
  {
  document.getElementById("notes").innerHTML="Last name: " + localStorage.lastname;
  }
else
  {
  document.getElementById("notes").innerHTML="Sorry, your browser does not support web storage...";
  }
</script>

You can access values from localstorage in any page now.

Another option

You can pass values from one page to another through querystring parameter. For eg. <a href='page2.html?index=someValue'>goto next page</a> Now in page2.html you can fetch this index value and set the required field, all through javascript.

Hope that answers your query.

Answer 2

HTML Local Storage should be what you are looking for . Here is a link to know more - http://diveintohtml5.info/storage.html

Also you could use window.name known as JavaScript session. But it only works as long as the same window/tab is used. Link - http://www.thomasfrank.se/sessionvars.html

Plus there are cookies obviously.

My order of preference would be the order in which I have stated my solutions.