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.

Answer 3

The problem here is a security concern with Javascript .

Even doing simple event such as jQuery .load() the additional scripts on the page won't load, due to CORS issues.

Variables are not passable among pages, especially with iframes , as there could be all sorts of malicious activity going on.

My advice is to load the same JS doc within each iframe you have going on (if you're able to do so.).

You will not be able to load js files into sites that are not on your domain.

Answer 4

Yes, basically, all of you are right.

It's enough with just store the variable you want manipulate between pages inside a localStorage.variableToManipulate. Directly if we want.

So is enough with something like (I'll repeat my first example corrected):

.JS FILE

localStorage["Example"] = "Hello world";

function TellMe()
{
    alert(localStorage["Example"]);
}

function ChangeVar()
{
    localStorage["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>

BUT, just a thing, when you make this kind of test, remember to have opened just ONE html page. I was testing with the two ones opened (Visor and PageN), and I think every one was using its own instance of the localStorage variable (modified by the own page itself).

Just a rookie stupid error!. I'm sorry, and many thanks for be there lending a hand!.

Answer 5

我知道现在已经晚了，但是无论谁想在同一域下的页面之间共享数据，他们都可以使用SharedWorker