7

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

var  snum;

function savesnum(val){
snum =val;}

也试过了，

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

4 回答 4

19

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

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

第一个页面允许用户在textarea元素中输入一些文本。有一个保存按钮，单击该按钮将触发单击事件，该事件执行保存处理程序（指定为 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));

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

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

替代方法是使用：

cookies，将再次适用同源政策。

或者

URL 查询字符串，它是带您进入下一页时使用的地址的一部分，可以在 Javascript 中读取以获取数据。

于 2013-04-28T15:41:00.153 回答
1

研究使用 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)
}
于 2013-04-28T15:40:21.613 回答
0

当你写

var snum;

这只是创建一个 Javascript 变量。

它甚至不会添加snum到同一页面的 DOM（文档对象模型）中。您正在尝试执行以下操作（尽管在不同的页面上）：

document.getElementById('stunb').value;

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

  • 饼干
  • 网址参数（如 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>
于 2013-04-28T15:33:57.530 回答
0

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

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

于 2013-04-28T15:16:28.297 回答