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

Javascript 在多个html页面之间共享变量,javascript,html,Javascript,Html,我有一个类项目,用javascript创建html页面,而不使用任何服务器端通信,第一个是关于用户输入一个特定的数字。 在第一页中,讲师必须输入有关其班级的信息及其学生编号, 完成后,他点击“下一步”,打开一个新页面,询问每个学生的信息和成绩。但是,当从第一页更改到第二页时,学生人数的变量变得未定义。 我在用这个零件 var snum; function savesnum(val){ snum =val;} 也试过, var snum; function savesnum(){ snum

我有一个类项目,用javascript创建html页面,而不使用任何服务器端通信,第一个是关于用户输入一个特定的数字。 在第一页中,讲师必须输入有关其班级的信息及其学生编号, 完成后,他点击“下一步”,打开一个新页面,询问每个学生的信息和成绩。但是,当从第一页更改到第二页时,学生人数的变量变得未定义。 我在用这个零件

var  snum;

function savesnum(val){
snum =val;}
也试过,

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

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

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

当您编写

var snum;
这只是创建了一个Javascript变量

它甚至不向同一页面的DOM(文档对象模型)添加
snum
。这正是您试图使用的(尽管在不同的页面上):

您可以调用
getElementById()
仅获取类似于

段落节点的DOM节点/元素。要将值从一页传递到另一页,可以使用:

  • 饼干
  • URL参数(如google.com/search?q=参数+值)
还有其他方法,但它们需要一些服务器端代码

在您的情况下,您可以按如下方式传递学生人数:

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

研究如何使用cookies:

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


下面是一个使用在同一域上提供服务的两个html页面之间传递数据的示例。这在不同的域中不起作用,因为

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

第一个页面允许用户在元素中输入一些文本。有一个save,单击该save将触发一个save处理程序,执行save处理程序(指定为addEventListener的第二个属性),该处理程序获取用户输入的文本,并使用键
mySharedData

HTML

第二个页面从localStorage中的键
mySharedData
中调用保存的文本,并将其显示在文本区域中

HTML

这两个示例都包装在一个匿名文件中,该文件立即执行,并将我们引用为名为
global
的变量传递到其中

最后,第一行是注释,但不是任何旧注释;它是一种由用户使用的指令;javascript软件开发中使用的静态代码分析工具,用于检查javascript源代码是否符合Douglas Crockford的规定

替代办法是:

,同一原产地政策将再次适用


这将是引导您进入下一页时使用的地址的一部分,可以在Javascript中读取该地址以获取数据。

如何使用getsnum的返回作为变量重新打开。另一个只询问“使用查询字符串”,这里的这个不关心如何共享
<form action="nextPage.html">
    Number of Students: <input type="text" name="snum" />
    <input type="submit" value="Next" />
</form>
<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>
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)
}
<textarea id="input"></textarea>
<div>
    <button id="save">Save</button>
</div>
/*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));
<textarea id="output"></textarea>
/*jslint sub: true, maxerr: 50, indent: 4, browser: true */

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