在多个 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 页面之间传递数据的示例。由于Same-origin policy，这将不适用于不同的域。

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

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

Page 1 on jsfiddle

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中调出保存的文本并显示在textarea中

Page 2 on jsfiddle

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

这两个示例都包装在一个匿名的closure 中，该closure 立即执行，我们将window object 传递到其中，然后我们将其作为名为@9​​87654343@ 的变量引用。

最后，第一行是注释，但不是任何旧注释；这是jslint使用的指令；一种用于 JavaScript 软件开发的静态代码分析工具，用于检查 JavaScript 源代码是否符合 Douglas Crockford 提出的coding conventions。

替代方案是使用：

cookies，再次适用同源政策。

或

URL query-strings 这将是带您进入下一页时使用的地址的一部分，可以在 Javascript 中读取该地址以获取数据。

Answer 2

当你写作时

var snum;

这只是创建一个 Javascript 变量。

它甚至没有将snum 添加到同一页面的 DOM（文档对象模型）中。这就是您想要做的事情（尽管在不同的页面上）：

document.getElementById('stunb').value;

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

• Cookie
• 网址参数（如 google.com/search?q=parameter+value）

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

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

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

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

Answer 3

研究使用 cookie：

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

Answer 4

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

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