在html页面之间共享变量 [英] Share variables between html pages

问题描述

首先，我知道这个主题还在StackOverflow中，但我还没有完全理解它是如何工作的，正好阅读现有的答案。所以，对不起，我希望现在明白。

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.

我不知道我的appoach是不正确的以及为什么它不正确。

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

我有一个html页面就像是另外几个的遮阳板，因此从这个主页面，我可以看到其他嵌入遮阳板区域的页面页面（使用iframe）。

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

同时，我有一个共同的.js文件用于所有页面（包括遮阳板）。

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

例如，如果我在.js中使用hello world（字符串类型）的valor声明变量，我可以从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.

创建一个global-between-pages变量？。

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

我尝试使用localStorage，但它只适用于使用它的特定页面。

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";
}

---

第1页（带引用）当然，头部的.js文件）

---

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

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

---

第2页（带有引用的.js文件）当然是head section，但是点击了第1页的AF之后

---

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>

这会提醒Hello World，代替Goodbye World。

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

所以我理解每个页面都有自己的.js变量版本，即使所有页面都使用相同的.js，甚至当一个html从另一个页面访问时（嵌入iframe） 。

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

如果点击第2页的div并显示Goodbye World消息后，如何获得此示例？

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.

这只是一个文档页面（来自软件），我有一个遮阳页面，从中我可以访问其他页面。实际上我在根文件夹中有visor页面，而这个根目录下的文件夹内的其他页面都在同一个域中，不是吗？

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

我想要页面上的next和previus按钮，以避免用户回到遮阳板并选择新页面，但我需要知道用户正在观看的页面的编号，知道在哪个页面显示next或previus。

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.

推荐答案

我将在localstorage上分享一个非常简单的例子来解决你的需求。
考虑你有两个文件page1.html和page2.html。

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.

在page1.html内添加以下行

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

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>

您现在可以在任何页面中访问localstorage中的值。

You can access values from localstorage in any page now.

另一个选项

您可以通过querystring参数将值从一个页面传递到另一个页面。
例如。 < a href ='page2.html？index = someValue'>转到下一页< / a>
现在在page2.html中，您可以获取此索引值和设置必填字段，全部通过javascript。

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.

希望能回答你的问题。

这篇关于在html页面之间共享变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！