在多个HTML页面之间共享变量

Question

我有一个课程项目需要创建带有JavaScript的HTML页面，但不能使用任何服务器端通信。第一个页面是关于用户输入特定数字的信息。在第一页中，教练必须输入有关他的班级及其学生数量的信息，然后当完成时，单击下一步，就会打开一个新页面，要求输入每个学生的信息和成绩。但是，在从第一页切换到第二页时，学生人数变量变为未定义。 我正在使用以下代码：

var  snum;

function savesnum(val){
snum =val;}

我也尝试过，

var snum;
function savesnum(){
snum = document.getElementById('stunb').value; }

- user2329318

---

重新打开。另一个问题只是询问“如何使用查询字符串”，而这个问题并不关心如何共享变量。 - Shadow The Spring Wizard

可能是在页面加载之间保留变量的重复问题。 - Liam

Answer 1

这是一个使用window.localStorage在同一域名下的两个html页面之间传递数据的示例。由于Same-origin policy的限制，它无法在不同的域名之间工作。

这个示例由两个托管在jsfiddle.net上的页面组成，但您也可以从本地文件系统轻松地提供这些文件。无论哪种方式，此示例中都没有涉及服务器端通信。

第一页允许用户在textarea元素中输入一些文本。有一个保存button，当点击时将触发click event，执行保存处理程序（作为addEventListener的第二个属性指定的anonymous function），获取用户输入的文本并使用键mySharedData将其保存在localStorage中。

在jsfiddle上的第1页

HTML

<textarea id="input"></textarea>
<div>
    <button id="save">Save</button>
</div>

JavaScript

/*jslint sub: true, maxerr: 50, indent: 4, browser: true */

(function (global) {
    document.getElementById("save").addEventListener("click", function () {
        global.localStorage.setItem("mySharedData", document.getElementById("output").value);
    }, false);
}(window));

第二页从localStorage中召回保存的文本，该文本键名为mySharedData，并在文本区域中显示它。

在jsfiddle上的第2页

HTML

<textarea id="output"></textarea>

JavaScript

/*jslint sub: true, maxerr: 50, indent: 4, browser: true */

(function (global) {
    document.getElementById("output").value = global.localStorage.getItem("mySharedData");
}(window));

这两个示例都包含在一个匿名的闭包中，该闭包会立即执行，并将window对象传递给其中，我们将其引用为变量global。

最后，第一行是一条注释，但不是普通的注释；它是jslint使用的指令；这是一种静态代码分析工具，用于检查JavaScript源代码是否符合Douglas Crockford制定的编码规范。

另外的选择是使用：

cookies，同源策略仍然适用。

或者

URL query-strings将成为访问下一页时使用的地址的一部分，可以在Javascript中读取以获取数据。

- Xotic750

Answer 2

查看使用cookies：

http://www.w3schools.com/js/js_cookies.asp

Cookie是存储在访问者计算机上的变量。每次同一台计算机使用浏览器请求页面时，它也会发送cookie。使用JavaScript，您可以创建和检索cookie值。

function savesnum(val) {
    document.cookie = 'snum:'+val; //Set the cookie
}

function getsnum() {
    var start = document.cookie.indexOf('snum:'); //Get the location of the cookie value
    var stop = document.cookie.indexOf(';'); //Get the end of the cookie value

    return document.cookie.substring(start+5, stop); //Return the value of the cookie (+5 because 'snum:' is 5 chars long)
}

- OdinX

---

我该如何将 getsnum 的返回值用作变量？ - user2329318

Answer 3

当你写代码时

var snum;

这只是创建一个Javascript变量。

它甚至没有将snum添加到同一页的DOM（文档对象模型）中。而你正在尝试在另一页上执行此操作：

document.getElementById('stunb').value;

您可以调用getElementById()仅获取DOM节点/元素，例如<p id="mainText">段落节点。要从一个页面传递值到另一个页面，您可以使用以下方法：

• Cookies
• URL参数（如google.com/search?q=parameter+value）

还有其他方法，但它们需要一些服务器端代码。

在您的情况下，您可以按以下方式传递学生人数：

<form action="nextPage.html">
    Number of Students: <input type="text" name="snum" />
    <input type="submit" value="Next" />
</form>

On nextPage.html

<script type="text/script">
<!--
    var snum = location.search.substr(location.search.indexOf("=")+1);
    alert(snum); // assumes snum will be sent as "nextPage.html?snum=10"
//-->
</script>

- Ravi K Thapliyal

Answer 4

当您打开一个新页面或重定向到一个新页面时，您将进入一个新的窗口对象，无法获取在第一个窗口对象中定义为全局变量的"snum"。

在这种情况下，您可以将snum作为“get”参数与URL一起传递，并在新窗口中获取该参数。

- Sean