在多个html页面之间共享一个变量 [英] Sharing a variable between multiple html pages

问题描述

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

  var snum; 
 
函数savednum（val）{
 snum = val;} 
  

<

  var snum; 
函数savednum（）{
 snum = document.getElementById（'stunb'）。value; } 
  

解决方案

这是一个使用 window.localStorage 可以在同一个域上提供的两个html页面之间传递数据。由于同源政策，此功能无法在不同的网域中发挥作用。

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

第一页允许用户在 textarea 元素。有一个保存按钮，点击后会激发一个<执行保存处理程序（ click event ） https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope =nofollow noreferrer>指定为addEventListener的第二个属性的匿名函数），它获取用户输入的文本并使用 mySharedData

Page 1 on jsfiddle

HTML

 < textarea id =input>< / textarea> 
< div> 
< button id =save>储存< /按钮> 
< / 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）; 
 }（窗口））; 
  

第二个页面从 mySharedData 在localStorage中，并显示在textarea中

$ b < 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 ，它立即执行，并将，然后我们将其引用为名为 global 的变量。

最后，第一行是注释，但不是任何旧评论;它是 jslint 使用的指令;一个用于javascript软件开发的静态代码分析工具，用于检查JavaScript源代码是否符合编码惯例由道格拉斯克罗克福德设置。

另一种方法是使用：

cookies ，同样适用同源政策。

或

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

I have a class project to create html page(s) with javascript without using any server side communications, the first is about user input an specially numbers. In the first page an instructor must enter information about his class an its students number, and then when done, he clicks next and a new page opens asking for each student information and grades. But when changing from the first page to the second the variable of the students number becomes undefined. I'm using this part

var  snum;

function savesnum(val){
snum =val;}

And also tried,

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

解决方案

Here is an example of using window.localStorage to pass data between two html pages being served on the same domain. This will not work accross different domains because of the Same-origin policy.

The example consists of two pages hosted on jsfiddle.net but you could just as easily serve these files from your local file system. Either way there is no server side communication involved in this example.

The first page allows the user to enter some text in a textarea element. There is a save button which when clicked will fire a click event that executes the save handler (the anonymous function specified as the second attribute of addEventListener) that gets the user entered text and saves it in localStorage with the key mySharedData

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

The second page recalls the saved text from the key mySharedData that is in localStorage and displays it in the 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));

Both examples are wrapped in an anonymous closure which is executed immediately, and into which we pass the window object which we then reference as the variable named global.

Finally, the first line is a comment, but not any old comment; it is an instruction that is used by jslint; a static code analysis tool used in javascript software development for checking if JavaScript source code complies with coding conventions set out by Douglas Crockford.

Alternatives would be to use:

cookies, once again the Same-origin policy would apply.

or

URL query-strings which would be part of the address used when taking you to the next page, where it can be read in Javascript to obtain data.

这篇关于在多个html页面之间共享一个变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！