使用cookie，javascript和html将数据从一个页面呈现到另一个页面

时间：2016-08-10 12:46:07

标签： javascript css html5 cookies

我使用Html和JavaScript开发了 Page 1 和 。我尝试从第1页获取数据并使用 Cookie 和 JavaScript 在第2页上显示。您可以看到以下代码：

Page 1:

<!DOCTYPE html>
<html>
<head>



<script>
function Submit(){
var ck_name = /^[A-Za-z0-9 ]{3,20}$/;
//var emailRegex= /^[A-Za-z0-9._]*\@[A-Za-z]*\.[A-Za-z]{2,5}$/;
var ck_email = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i ;
var ck_username = /^[A-Za-z0-9_]{3,20}$/;
var ck_password =  /^[A-Za-z0-9!@#$%^&*()_]{6,20}$/;

var fname=document.form.firstname.value,
    lname=document.form.lastname.value,
    femail=document.form.email.value,
    fuser=document.form.username.value,
    fpassword=document.form.password.value,
    fconpassword=document.form.confirmpassword.value,
    fmonth=document.form.birthday_month.value,
    fday=document.form.birthday_day.value,
    fyear=document.form.birthday_year.value;


if(fname == "")
{
document.form.firstname.focus();
document.getElementById("elmfirstnameError").innerHTML="Enter the First Name ";
return false;
}else if(!ck_name.test(fname)){
document.form.firstname.focus();
document.getElementById("elmfirstnameError").innerHTML=" Enter 3-20 character and no special charater";
return false;
}else {
document.getElementById("elmfirstnameError").innerHTML=" ";
}

if(lname == "")
{
document.form.lastname.focus();
document.getElementById("elmlastnameError").innerHTML="Enter the Last Name ";
return false;
}else if(!ck_name.test(lname)){
document.form.lastname.focus();
document.getElementById("elmlastnameError").innerHTML="Enter 3-20 character and no special charater";
return false;
}else {
document.getElementById("elmlastnameError").innerHTML=" ";
}

if(femail == "")
{
document.form.email.focus();
document.getElementById("elmemailError").innerHTML="Enter the Email Address";
return false;
}else if(!ck_email.test(femail)){
document.form.email.focus();
document.getElementById("elmemailError").innerHTML="You have entered an Invalid Email Address!";
return false;
}else {
document.getElementById("elmemailError").innerHTML=" ";
}

if(fuser == "")
{
document.form.username.focus();
document.getElementById("elmeusernameError").innerHTML="Enter the Username";
return false;
}else if(!ck_username.test(fuser)){
document.form.username.focus();
document.getElementById("elmeusernameError").innerHTML="Enter the Username with 3-20 characters & no special charater";
return false;
}else {
document.getElementById("elmeusernameError").innerHTML=" ";
}

if(fpassword == "")
{
document.form.password.focus();
document.getElementById("elmepasswordError").innerHTML="Enter the Password";
return false;
}else if(!ck_password.test(fpassword)){
document.form.password.focus();
document.getElementById("elmepasswordError").innerHTML="Enter the Password with 6-20 characters";
return false;
}else {
document.getElementById("elmepasswordError").innerHTML=" ";
}

if( fconpassword=="")
{
document.form.confirmpassword.focus();
document.getElementById("elmeconfirmpasswordError").innerHTML="Enter the Confirm Password";
return false;
}else if(!ck_password.test( fconpassword)){
document.form.confirmpassword.focus();
document.getElementById("elmeconfirmpasswordError").innerHTML="Should match with Password";
return false;
}else {
document.getElementById("elmeconfirmpasswordError").innerHTML=" ";
}

if(fconpassword != fpassword )
{

document.form.confirmpassword.focus();
document.getElementById("elmere-enterpasswordError").innerHTML="Passwords are not matching,re-enter again";
return false;
}else {
document.getElementById("elmere-enterpasswordError").innerHTML=" ";
}

if(fmonth=="")
{
document.form.birthday_month.focus();
document.getElementById("elmebirthday_monthError").innerHTML="Select the Birthday of Month";
return false;
}else {
document.getElementById("elmebirthday_monthError").innerHTML=" ";
}

if(fday=="")
{
document.form.birthday_day.focus();
document.getElementById("elmebirthday_dayError").innerHTML="Select the Birthday of Day";
return false;
}else {
document.getElementById("elmebirthday_dayError").innerHTML=" ";
}

if(fyear=="")
{
document.form.birthday_year.focus();
document.getElementById("elmebirthday_yearError").innerHTML="Select the Birthday of Year";
return false;
}else {
document.getElementById("elmebirthday_yearError").innerHTML=" ";
}

if(document.form.radiobutton[0].checked==false && document.form.radiobutton[1].checked == false){
document.getElementById("elmeGenderError").innerHTML="Select Your Gender";
return false;
}else {
document.getElementById("elmeGenderError").innerHTML=" ";
}

if(fname!='' && lname!='' && femail!='' && fuser!='' &&  fpassword!='' && fconpassword!='' && fmonth!='' && fday!='' && fyear!=''){

location.href="Useraccountpage.htm";
return false;
}

}


function Cancel(){
window.location="Loginpage.htm";
return false;
}

</script>
</head>

<body>
<div id="Holder">
<!----------Header---------->
<div id="Header">
</div>

<!----------NAVBAR---------->
        <div id="NavBar">
        <nav>
        <ul>
        <li><a href="Registrationpage.htm">Register</a></li>
        <li><a href ="Useraccountpage.htm"></a></li>
        </ul>
        </div>
<div id="Content">

<div id="PageHeading">

</div>

<div id="ContentLeft">

<br>
</div>

<div id="ContentRight">
    <section class="loginform cf">
    <form name="form"  action="Useraccountpage.htm"  method="post"  id="form_id">

    <table class="center">

        <tr>
          <td><label for="first-name">First Name</label></td>

         <td><label for="last_name">Last Name</label></td>  
            </tr>

        <tr>
        <td>&nbsp;</td>
        </tr>

           <tr >
        <td>
            <input type="text" class="styletxtfields" id="firstname" name="firstname" placeholder="FirstName">
            </td>   
        <td>
        <input type="text" class="styletxtfields" id="lastname" name="lastname" placeholder="LastName">
        </td>
      </tr>

        <tr><td id="elmfirstnameError" colspan="2" class="errorMsg" ></td></tr>
        <tr><td id="elmlastnameError" colspan="2"  class="errorMsg" >&nbsp;</td></tr>


      <tr>
        <td>
        <label for="email">Email Id</label>
        <br>
        <br>

        <input type="email" class="styletxtfields" name="email" id="lastname" placeholder="Enter the Email ID">
        </td>
      </tr>

        <tr>
        <td id="elmemailError"  colspan="2" class="errorMsg" >&nbsp;</td>
        </tr>




    <tr>
        <td>
        <label for="user">User Name</label>
        <br>
        <br>
        <input type="text" class="styletxtfields" name="username" placeholder="UserName">
        </td>
    </tr>
        <tr>
        <td id="elmeusernameError" colspan="2" class="errorMsg">&nbsp;</td>
        </tr>


        <tr>
        <td><label for="password" >Password</label></td><br>
        <td><label for="password" >Confirm Password</label></td><br>
        </tr>

        <tr>
<td>&nbsp;</td>
</tr>
            <tr>
        <td>
        <input type="password" class="styletxtfields" name="password" placeholder="Enter the Password">
        </td>
        <td>
        <input type="password"  class="styletxtfields" name="confirmpassword" placeholder="Enter the Conform Password">
        </td>
            </tr>


        <tr><td id="elmepasswordError" colspan="2" class="errorMsg"></td></tr>
        <tr><td id="elmeconfirmpasswordError"  class="errorMsg"></td></tr>

        <tr>
        <th id="elmere-enterpasswordError" colspan="2" class="errorMsg">&nbsp;</th>
        </tr>

    <tr>
        <td>
        <label for="DOB">Date of Birthday</label>
        </td>
    <td>
      <select name="birthday_month"  class="styleselfield">
          <option value="" selected >Month</option>
          <option value="1">Jan</option>
          <option value="2">Feb</option>
          <option value="3">Mar</option>
          <option value="4">Apr</option>
          <option value="5">May</option>
          <option value="6">Jun</option>
          <option value="7">Jul</option>
          <option value="8">Aug</option>
          <option value="9">Sep</option>
          <option value="10">Oct</option>
          <option value="11">Nov</option>
          <option value="12">Dec</option>
        </select>

        &nbsp;&nbsp;
        <select name="birthday_day" class="styleselfield" >
          <option value="" selected>Day</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          <option value="13">13</option>
          <option value="14">14</option>
          <option value="15">15</option>
          <option value="16">16</option>
          <option value="17">17</option>
          <option value="18">18</option>
          <option value="19">19</option>
          <option value="20">20</option>
          <option value="21">21</option>
          <option value="22">22</option>
          <option value="23">23</option>
          <option value="24">24</option>
          <option value="25">25</option>
          <option value="26">26</option>
          <option value="27">27</option>
          <option value="28">28</option>
          <option value="29">29</option>
          <option value="30">30</option>
          <option value="31">31</option>
        </select>

        &nbsp;&nbsp;
        <select name="birthday_year" class="styleselfield">
          <option value="" selected>Year</option>
          <option value="2013">2013</option>
          <option value="2012">2012</option>
          <option value="2011">2011</option>
          <option value="2010">2010</option>
          <option value="2009">2009</option>
          <option value="2008">2008</option>
          <option value="2007">2007</option>
          <option value="2006">2006</option>
          <option value="2005">2005</option>
          <option value="2004">2004</option>
          <option value="2003">2003</option>
          <option value="2002">2002</option>
          <option value="2001">2001</option>
          <option value="2000">2000</option>
          <option value="1999">1999</option>
          <option value="1998">1998</option>
          <option value="1997">1997</option>
          <option value="1996">1996</option>
          <option value="1995">1995</option>
          <option value="1994">1994</option>
          <option value="1993">1993</option>
          <option value="1992">1992</option>
          <option value="1991">1991</option>
          <option value="1990">1990</option>
        </select>

    </td>
    </tr>

        <tr><td id="elmebirthday_monthError" class="errorMsg"></td></tr>
        <tr><td id="elmebirthday_dayError" class="errorMsg"></td></tr>
        <tr><td id="elmebirthday_yearError"   class="errorMsg">&nbsp;</td></tr>





    <tr>
        <td>
                <label for="gender">Gender</label>
        </td>
        <td>
        <input type="radio" name="radiobutton" value="Male">
        <label>Male</label>
        <input type="radio" name="radiobutton" value="Female">
        <label>Female</label>
        </td>
    </tr>
        <tr>
        <td id="elmeGenderError" class="errorMsg">&nbsp;</td>

        </tr>

    <tr>
        <td  style="text-align:center">
        <input type="button"   value="Register" onClick="Submit()" ><br>

        </td>
        <td style="text-align:center">
        <input type="button" onClick="Cancel()"  value="Cancel">
        </td>
    </tr>
</table>
</form>
</section>
</div>
</div>
<div id="Footer"></div>
</div>
</body>
</html>

这是我希望来自第1页的数据并在javascript中使用Cookie显示的内容：

    Page 2 :

<!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<link rel="stylesheet" href="menu.css">
<link rel="stylesheet" href="layout.css">

<script type="text/javascript">
function getValue(varname)
{  var url = window.location.href;   

   var qparts = url.split("?");       

  if (qparts.length == 0)             
  {
    return "";
  }

   var query = qparts[1];               

   var vars = query.split("&");         

   var value = "";                        

    for (i=0;i<vars.length;i++)              
  {
        var parts = vars[i].split("=");       
        if (parts[0] == varname)               
    {
      value = parts[1];                
      break;                                 
    }
  }
  value = unescape(value);             
  value.replace(/\+/g," ");             
  return value;                        
}
</script>
</head>
<body>
<div id="Holder">
<div id="Header"></div>
<div id="NavBar">
<nav>
<ul>
</ul>
</div>
<div id="Content">
<div id="PageHeading">
<h1>WELCOME TO USER ACCOUNT</h1>
</div>
<div id="ContentLeft">
<h2>Your Message Here</h2><br>
<br>
<h6>
Your Message</h6>
</div>
 <div id="ContentRight">
<form onload="getValue(varname)">
<table align="center">
<tr>
   <td> First Name</td>
   <td><Label id="sfName"></label></td>
</tr>
<tr>
   <td> LastName :</td>
   <td><Label id="slName"></label></td>
</tr>

<tr>
   <td>Email</td>
   <td><Label id="semail"></Label></td>
</tr>
<tabel>
</form>
<script>
var fname=getValue("firstname");
var lname=getValue("lastname");
var email = getValue("email");

document.getElementById("sfName").innerHTML= fname;
document.getElementById("slName").innerHTML= lname;
document.getElementById("semail").innerHTML= email;
</script>
</div>
</div>
<div id="Footer"></div>
</div>
</body>
</html>

2 个答案:

答案 0 :(得分：0)

您提出的实际问题是什么？如果页面位于同一个域中，您可以尝试使用localStorage或sessionStorage来共享数据。

答案 1 :(得分：0)

Cookie是持久性的，会自动包含在每个获取/发布中，而不是您似乎想要完成的最佳选择。

您的示例中的帖子不会通过href属性进行共享。表单帖子将数据发送到服务器。 HTM输出不会直接看到该数据。

最佳选择是在服务器上处理提交的数据，最好是通过https。服务器端脚本语言接收数据，可用于更新数据库。例如，在Lucee中填充了一个名为FORM的结构，在php中填充了一个名为$ _POST的命名数组。

如果失败，如果数据需要浏览器持久化，请将其存储在localStorage或sessionStorage中。如果它只需要在页面之间传递，那么就这样做;但是，在消费时删除条目。

第1页：

<input name="firstname" onchange="localStorage.firstName=this.value;">

第2页：

document.getElementById("firstname").innerHTML=localStorage.firstName;
// - if not persistent: localStorage.removeItem("firstName");
相关问题
最新问题