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（指定为addEventListener的第二个属性的anonymous function），它将获取用户输入的文本并将其保存在使用密钥mySharedData

的localStorage

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中，该匿名window object会立即执行，然后我们将jslint传递给我们，然后我们将其引用为名为global的变量。

最后，第一行是评论，但不是任何旧评论;它是coding conventions使用的指令;用于javascript软件开发的静态代码分析工具，用于检查JavaScript源代码是否符合道格拉斯·克罗克福德提出的cookies。

替代方案是使用：

URL，同样适用同源政策。

或

query-strings {{3}}，它将成为您转到下一页时使用的地址的一部分，可以在Javascript中读取该地址以获取数据。

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

Answer 3

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

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

Answer 4

写作时

var snum;

只是创建一个Javascript变量。

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

document.getElementById('stunb').value;

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

缓存
网址参数（例如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>

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

4 个答案: