用于多个html页面的Javascript文件

我是Javascript的初学者。我目前正在使用它开发Phonegap应用程序。我被夹在中间，因为我有4个html页面用于注册过程，我必须将所有html页面输入值传递到单个js文件，因为最终所有数据都必须发布到服务器URL，而且我在许多网站上读到，他们建议对你网站的所有页面使用相同的js文件来加快网站速度。所以我有两个问题要解决。我搜索了很多网站，但没有找到准确的答案

我需要将4个html页面的输入值传递到单个js文件

我必须为登录和注册创建一个js文件

我的JS页面代码是：

var firstName="";
var lastName="";
var email="";
var password="";
var retypePassword="";
var gender="";
var DOB="";
var institute="";
var course="";
var branch="";
var semester="";
var teachers = [];

function signUpStarting() {
    alert(firstName + " "+lastName+" "+email+" "+password+" "+retypePassword+" "+gender+" "+DOB+" "+institute+" "+course+" "+branch+" "+semester+" "+teachers.join(","));

}   

function signUp1() {
    firstName[0] = $("#first_name").val().trim();
    firstName[1] = $("#last_name").val().trim();
    email = $("#email").val().trim();
    password = $("#password").val();
    retypePassword = $("#retype_password").val();   
    alert(firstName + " "+lastName+" "+email+" "+password+" "+retypePassword);
}

function signUp2() {
    gender = $('#gender').find(":selected").text();
    DOB = $('#DOB').val();
    alert(gender+" "+DOB);
}

function signUp3() {
    institute = $('#institute').find(":selected").text();
    course = $('#course').find(":selected").text();
    branch = $('#branch').find(":selected").text();
    semester = $('#semester').find(":selected").text();
    alert(institute+" "+course+" "+branch+" "+semester);
}

function signUp4() {
    $(":checkbox" ).map(function() {
            if($(this).is(':checked')){
                    teachers.push($('label[for="' + this.id + '"]').text());
            }
    });
    signUpStarting();
}

<a onclick="signUp1()" href="register-two.html">continue</a>

<a onclick="signUp2()" href="register-three.html">continue</a>

<a onclick="signUp3()" href="register-four.html">continue</a>

<a onclick="signUp4()">continue</a>

在html页面中，我为每个页面调用JS函数：

var firstName="";
var lastName="";
var email="";
var password="";
var retypePassword="";
var gender="";
var DOB="";
var institute="";
var course="";
var branch="";
var semester="";
var teachers = [];

function signUpStarting() {
    alert(firstName + " "+lastName+" "+email+" "+password+" "+retypePassword+" "+gender+" "+DOB+" "+institute+" "+course+" "+branch+" "+semester+" "+teachers.join(","));

}   

function signUp1() {
    firstName[0] = $("#first_name").val().trim();
    firstName[1] = $("#last_name").val().trim();
    email = $("#email").val().trim();
    password = $("#password").val();
    retypePassword = $("#retype_password").val();   
    alert(firstName + " "+lastName+" "+email+" "+password+" "+retypePassword);
}

function signUp2() {
    gender = $('#gender').find(":selected").text();
    DOB = $('#DOB').val();
    alert(gender+" "+DOB);
}

function signUp3() {
    institute = $('#institute').find(":selected").text();
    course = $('#course').find(":selected").text();
    branch = $('#branch').find(":selected").text();
    semester = $('#semester').find(":selected").text();
    alert(institute+" "+course+" "+branch+" "+semester);
}

function signUp4() {
    $(":checkbox" ).map(function() {
            if($(this).is(':checked')){
                    teachers.push($('label[for="' + this.id + '"]').text());
            }
    });
    signUpStarting();
}

<a onclick="signUp1()" href="register-two.html">continue</a>

<a onclick="signUp2()" href="register-three.html">continue</a>

<a onclick="signUp3()" href="register-four.html">continue</a>

<a onclick="signUp4()">continue</a>

在第一页：

var firstName="";
var lastName="";
var email="";
var password="";
var retypePassword="";
var gender="";
var DOB="";
var institute="";
var course="";
var branch="";
var semester="";
var teachers = [];

function signUpStarting() {
    alert(firstName + " "+lastName+" "+email+" "+password+" "+retypePassword+" "+gender+" "+DOB+" "+institute+" "+course+" "+branch+" "+semester+" "+teachers.join(","));

}   

function signUp1() {
    firstName[0] = $("#first_name").val().trim();
    firstName[1] = $("#last_name").val().trim();
    email = $("#email").val().trim();
    password = $("#password").val();
    retypePassword = $("#retype_password").val();   
    alert(firstName + " "+lastName+" "+email+" "+password+" "+retypePassword);
}

function signUp2() {
    gender = $('#gender').find(":selected").text();
    DOB = $('#DOB').val();
    alert(gender+" "+DOB);
}

function signUp3() {
    institute = $('#institute').find(":selected").text();
    course = $('#course').find(":selected").text();
    branch = $('#branch').find(":selected").text();
    semester = $('#semester').find(":selected").text();
    alert(institute+" "+course+" "+branch+" "+semester);
}

function signUp4() {
    $(":checkbox" ).map(function() {
            if($(this).is(':checked')){
                    teachers.push($('label[for="' + this.id + '"]').text());
            }
    });
    signUpStarting();
}

<a onclick="signUp1()" href="register-two.html">continue</a>

<a onclick="signUp2()" href="register-three.html">continue</a>

<a onclick="signUp3()" href="register-four.html">continue</a>

<a onclick="signUp4()">continue</a>

第二页：

var firstName="";
var lastName="";
var email="";
var password="";
var retypePassword="";
var gender="";
var DOB="";
var institute="";
var course="";
var branch="";
var semester="";
var teachers = [];

function signUpStarting() {
    alert(firstName + " "+lastName+" "+email+" "+password+" "+retypePassword+" "+gender+" "+DOB+" "+institute+" "+course+" "+branch+" "+semester+" "+teachers.join(","));

}   

function signUp1() {
    firstName[0] = $("#first_name").val().trim();
    firstName[1] = $("#last_name").val().trim();
    email = $("#email").val().trim();
    password = $("#password").val();
    retypePassword = $("#retype_password").val();   
    alert(firstName + " "+lastName+" "+email+" "+password+" "+retypePassword);
}

function signUp2() {
    gender = $('#gender').find(":selected").text();
    DOB = $('#DOB').val();
    alert(gender+" "+DOB);
}

function signUp3() {
    institute = $('#institute').find(":selected").text();
    course = $('#course').find(":selected").text();
    branch = $('#branch').find(":selected").text();
    semester = $('#semester').find(":selected").text();
    alert(institute+" "+course+" "+branch+" "+semester);
}

function signUp4() {
    $(":checkbox" ).map(function() {
            if($(this).is(':checked')){
                    teachers.push($('label[for="' + this.id + '"]').text());
            }
    });
    signUpStarting();
}

<a onclick="signUp1()" href="register-two.html">continue</a>

<a onclick="signUp2()" href="register-three.html">continue</a>

<a onclick="signUp3()" href="register-four.html">continue</a>

<a onclick="signUp4()">continue</a>

第三页：

var firstName="";
var lastName="";
var email="";
var password="";
var retypePassword="";
var gender="";
var DOB="";
var institute="";
var course="";
var branch="";
var semester="";
var teachers = [];

function signUpStarting() {
    alert(firstName + " "+lastName+" "+email+" "+password+" "+retypePassword+" "+gender+" "+DOB+" "+institute+" "+course+" "+branch+" "+semester+" "+teachers.join(","));

}   

function signUp1() {
    firstName[0] = $("#first_name").val().trim();
    firstName[1] = $("#last_name").val().trim();
    email = $("#email").val().trim();
    password = $("#password").val();
    retypePassword = $("#retype_password").val();   
    alert(firstName + " "+lastName+" "+email+" "+password+" "+retypePassword);
}

function signUp2() {
    gender = $('#gender').find(":selected").text();
    DOB = $('#DOB').val();
    alert(gender+" "+DOB);
}

function signUp3() {
    institute = $('#institute').find(":selected").text();
    course = $('#course').find(":selected").text();
    branch = $('#branch').find(":selected").text();
    semester = $('#semester').find(":selected").text();
    alert(institute+" "+course+" "+branch+" "+semester);
}

function signUp4() {
    $(":checkbox" ).map(function() {
            if($(this).is(':checked')){
                    teachers.push($('label[for="' + this.id + '"]').text());
            }
    });
    signUpStarting();
}

<a onclick="signUp1()" href="register-two.html">continue</a>

<a onclick="signUp2()" href="register-three.html">continue</a>

<a onclick="signUp3()" href="register-four.html">continue</a>

<a onclick="signUp4()">continue</a>

第四页：

var firstName="";
var lastName="";
var email="";
var password="";
var retypePassword="";
var gender="";
var DOB="";
var institute="";
var course="";
var branch="";
var semester="";
var teachers = [];

function signUpStarting() {
    alert(firstName + " "+lastName+" "+email+" "+password+" "+retypePassword+" "+gender+" "+DOB+" "+institute+" "+course+" "+branch+" "+semester+" "+teachers.join(","));

}   

function signUp1() {
    firstName[0] = $("#first_name").val().trim();
    firstName[1] = $("#last_name").val().trim();
    email = $("#email").val().trim();
    password = $("#password").val();
    retypePassword = $("#retype_password").val();   
    alert(firstName + " "+lastName+" "+email+" "+password+" "+retypePassword);
}

function signUp2() {
    gender = $('#gender').find(":selected").text();
    DOB = $('#DOB').val();
    alert(gender+" "+DOB);
}

function signUp3() {
    institute = $('#institute').find(":selected").text();
    course = $('#course').find(":selected").text();
    branch = $('#branch').find(":selected").text();
    semester = $('#semester').find(":selected").text();
    alert(institute+" "+course+" "+branch+" "+semester);
}

function signUp4() {
    $(":checkbox" ).map(function() {
            if($(this).is(':checked')){
                    teachers.push($('label[for="' + this.id + '"]').text());
            }
    });
    signUpStarting();
}

<a onclick="signUp1()" href="register-two.html">continue</a>

<a onclick="signUp2()" href="register-three.html">continue</a>

<a onclick="signUp3()" href="register-four.html">continue</a>

<a onclick="signUp4()">continue</a>

继续

在从一个页面到下一个页面的每个事务上，我都在JS中设置了警报，并且我也得到了带有准确值的警报。但在点击html第四页的continue按钮后，我将代码转移到主注册函数。我试图在signUpStarting（）函数中看到警报，但在那里我只得到第四页值的响应，其他值没有显示任何内容，因为变量为null

我不知道如何在不使用localStorage或Cookie并将所有数据发布到服务器的情况下为always保存变量值。我认为，如果我知道将我的站点的所有html页面编码为单个JS文件，这会更容易

请帮帮我

我不知道如何在不使用localStorage或Cookie并将所有数据发布到服务器的情况下为always保存变量值。我认为，如果我知道将我的站点的所有html页面编码为单个JS文件，这会更容易

这是完全正确的。在web浏览器环境中，不能在页面加载之间将数据存储在内存中，因为当浏览器从页面导航到新页面时，所有javascript变量都会自然地被销毁（即使它们在两个页面上使用相同的javascript）。因此，您必须将其保存在更持久的地方：本地存储、cookie或通过POST或GET保存在服务器上

---

我建议取消四个不同的html页面，只使用一个html页面，随着用户填写数据而动态变化。这样，在您准备将数据发布到服务器之前，浏览器不会删除数据。

如果您在页面之间切换，我会在服务器端执行此操作，否则，我将加载使用ajax的下一步ajax变量在传输到不同页面时不删除或更改？如果使用ajax，实际上不会更改页面-ajax会加载新内容，而无需离开当前页面。读一读：是的！在同一个文件中合并html文件会很好，但问题是，我不能为所有html页面使用一个简单的js文件吗？如果是，那么怎么做？我不知道你的意思，但在不同html页面之间共享状态的唯一方法是将值存储在页面之外的存储中：cookies、sessiondata或服务器上。在每个HTML页面上使用相同的JS文件，这还不是您正在做的吗？类似于

？我的意思是“如何在多个页面上使用相同的js文件”是我想对不同的文件使用不同的函数，在这个文件中（对于4个html页面），我遇到了冲突，所以我想可能有其他方法，这样即使在反复调用同一个文件后，变量也不会改变。这就是问题所在。有什么专业的方法可以做到这一点吗？例如$（document）.ready（function（））正在使用或其他函数？？或者我可以使用ajax变量来实现这一点？因为我不想一次又一次地向服务器发送数据。Ajax将查询服务器以存储其数据。将其存储在Cookie或sessionStorage中会将其保存在用户的浏览器中，因此，如果您坚持保留单独的HTML页面，并且希望避免过多地访问服务器，那么我建议采用这种方式。没有其他方法可以在HTML页面之间保持数据的活动性，因为浏览器的设计目的是在每次导航到另一个HTML文档时将其全部丢弃。iframes是个例外，但这与合并html文件非常相似。非常感谢！我使用localStorage保存所有数据，并从最后一页将所有数据发送到服务器。这不会造成任何冲突，对吗？我的意思是这可以用来做一个大项目？在应用程序运行之前，数据不会丢失吗？或者与之有任何其他冲突@用户2005218