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

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

var snum; 

function savesnum(val){ 
snum =val;}

而且也试过，

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

来源

2013-04-28 user2329318

重新打开。另一个只询问“使用查询字符串”，这里这个不关心如何共享变量 – 2015-12-01 16:17:56

[页面加载之间的持久变量]可能的重复（https://stackoverflow.com/questions/29986657/persist-变量之间的页面加载） – Liam 2017-12-18 15:31:34

当你的窗口中打开一个新页面或重定向到一个新的页面，你是一个新的窗口对象，你是不是能够将第一个窗口对象上定义的“snum”作为全局变量。

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

来源

2013-04-28 15:16:28 Sean

当你写

var snum;

，只是创建了一个JavaScript变量。

它甚至不会将snum添加到同一页面的DOM（文档对象模型）。这是你想要做什么（尽管在不同的页面）有：

document.getElementById('stunb').value;

您可以拨打getElementById()只得到像<p id="mainText">段落节点DOM节点/元素。从一个页面值传递给周围其他的你可以使用：

饼干
网址参数（如google.com/search?q= 参数+值）

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

在你的情况，你可以通过学生人数如下：

<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-28 15:33:57

考虑使用的cookie：

http://www.w3schools.com/js/js_cookies.asp

一C ookie是存储在访客计算机上的变量。每次同一台计算机使用浏览器请求一个页面时，它也会发送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-28 15:40:21 vimist

我如何使用getsnum作为变量的返回 – user2329318 2013-04-28 19:13:26

'myvariable = getsnum（）;' – vimist 2013-04-30 20:57:17

下面是使用window.localStorage之间在相同的域中服务二个html页面传递数据的一个例子。由于Same-origin policy，这将不适用于不同的域。

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

第一页允许用户在textarea元素中输入一些文本。有一个保存button，点击后火click event执行存储处理器（指定的addEventListener的第二属性anonymous function），其获取用户输入的文本，并用钥匙mySharedData

Page 1 on jsfiddle

将其保存在localStorage的

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

第二页回顾从关键mySharedData是在localStorage的，并显示在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，然后我们将其作为名称为global的变量引用。

最后，第一行是注释，但没有任何旧评论;它是由jslint使用的指令;一个用于javascript软件开发的静态代码分析工具，用于检查JavaScript源代码是否符合Douglas Crockford制定的coding conventions。

替代办法是使用：

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

或

URL query-strings这将带你到下一个页面，它可以在JavaScript中读取以获得数据时使用的地址的一部分。

来源

2013-04-28 15:41:00 Xotic750

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

回答

相关问题