クッキー、javascript、htmlを使用して1ページから別のページにデータを提示

私はを開発しました。Page 1とPage 2 HtmlとJavaScriptを使用しています。私はページ1からデータを取得し、それをクッキーとJavaScriptを使って表示しようとしています。これは私がJavaScriptでクッキーを使用して1ページとディスプレイからのデータが欲しい2ページでクッキー、javascript、htmlを使用して1ページから別のページにデータを提示

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 = /^[[email protected]#$%^&*()_]{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>

：あなたは以下のコードを見ることができます

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>

出典

2016-08-10 user3172464

あなたが求めている実際の問題とは何ですか？ページが同じドメイン上にある場合は、localStorageまたはsessionStorageを使用してデータを共有してみてください。

出典

2016-08-10 12:56:02

私はクッキーを使用して、1ページから2ページの詳細を表示しようとしています-cookiesを設定し、私はなっておりません – user3172464

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

出典

2016-08-10 13:25:00

申し訳ありませんが、クッキーを取得何を言おうとしているのですか？ 1ページに入っているデータを表示したいのですが、2ページ目に「getValue（varname）」メソッドを書いて、データフォームページ1を取得したクッキーを使って、page2に表示する必要があります。 – user3172464

あなたがしようとしていることがすべてクッキーを理解している場合、覚えておくべきことは 'document.cookie =" firstName = John "を設定してクッキーを追加し、' myCookieArray = document.cookie.split（ ';'） 'を返すと、配列内にすべてのクッキーが含まれています。すべての値を持つオブジェクトが必要な場合は、配列をループし、 'a = split（ '='）'各要素 'a [0]'は名前であり、 'a [1]'は値です。 –

しかし、あなたの目的が名前とパスワードの記憶であれば、それはしないでください。これはセキュリティ101です。クッキーはすべての人に見えます。また、クッキーには通常、組み合わせたストレージの上限が約2kbあります。 –

クッキー、javascript、htmlを使用して1ページから別のページにデータを提示

答えて

関連する問題