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

IT技术 javascript html
2021-01-23 17:39:58

我有一个类项目,可以在不使用任何服务器端通信的情况下使用 javascript 创建 html 页面,第一个是关于用户输入特殊数字。在第一页,教师必须输入关于他的class的信息和学生编号,完成后,他点击下一步,打开一个新页面,询问每个学生的信息和成绩。但是当从第一页更改为第二页时,学生编号的变量变为未定义。我正在使用这部分

var  snum;

function savesnum(val){
snum =val;}

也试过了,

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

下面是使用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中的key调出保存的文本并显示在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 中读取它以获取数据。

考虑使用 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)
}
我如何使用getsnum的返回值作为变量
2021-03-23 17:39:58

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

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

当你写

var snum;

这只是创建一个 Javascript 变量。

它甚至不会添加snum到同一页面的 DOM(文档对象模型)中。这就是你想要做的(虽然在不同的页面上):

document.getElementById('stunb').value;

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

  • 饼干
  • URL 参数(如 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>