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

Question

我有一个类项目用javascript创建html页面而不使用任何服务器端通信,第一个是关于用户输入特殊数字.在第一页中,教师必须输入有关其班级的信息和学生编号,然后完成后,他会点击下一步并打开一个新页面,询问每个学生的信息和成绩.但是当从第一页改为第二页时,学生编号的变量变得不确定.我正在使用这部分

var  snum;

function savesnum(val){
snum =val;}

并试过,

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

Answer 1

下面是使用window.localStorage在同一域上提供的两个html页面之间传递数据的示例.由于同源策略,这不适用于不同的域.

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

第一页允许用户在textarea元素中输入一些文本.有一个保存按钮,当单击时将触发一个执行保存处理程序的click事件(指定为addEventListener的第二个属性的匿名函数),该事件获取用户输入的文本并使用密钥将其保存在localStorage中mySharedData

关于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));

第二页从mySharedDatalocalStorage中的键中调出保存的文本,并将其显示在textarea中

关于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));

这两个示例都包含在一个匿名闭包中,该闭包立即执行,我们将窗口对象传递到该闭包中,然后将其作为变量命名引用global.

最后,第一行是评论,但不是任何旧评论; 它是jslint使用的指令; 用于javascript软件开发的静态代码分析工具,用于检查JavaScript源代码是否符合Douglas Crockford规定的编码约定.

替代方案是使用:

cookies,同样适用同源政策.

要么

URL 查询字符串,它将成为您转到下一页时使用的地址的一部分,可以在Javascript中读取它以获取数据.

Answer 2

当您打开一个新页面或重定向到一个新页面时，您位于一个新的窗口对象上，您无法获取在第一个窗口对象上定义为全局变量的“snum”。

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