在多個html頁面之間共享變量

Question

我有一個類項目用javascript創建html頁面而不使用任何服務器端通信，第一個是關於用戶輸入一個特殊數字。 在第一頁中，教師必須輸入關於他的班級的信息和其學生號碼， ，然後完成後，他點擊下一頁，打開一個新頁面，詢問每個學生的信息和成績。但是，當從第一頁變爲第二頁時，學生號碼的變量變得未定義。 我使用這部分

var snum; 

function savesnum(val){ 
snum =val;} 

而且也試過，

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

Answer 1

當你的窗口中打開一個新頁面或重定向到一個新的頁面，你是一個新的窗口對象，你是不是能夠將第一個窗口對象上定義的「snum」作爲全局變量。

在這種情況下，您可以單獨將snum作爲「get」參數與url一起傳遞，並在新窗口中獲取參數。

Answer 2

當你寫

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> 

Answer 3

考慮使用的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) 
} 

Answer 4

下面是使用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，再次同源的政策將適用。

或

URLquery-strings這將帶你到下一個頁面，它可以在JavaScript中讀取以獲得數據時使用的地址的一部分。