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

【问题标题】：Present the data from one page to another page using cookies ,javascript and html使用 cookie、javascript 和 html 将数据从一个页面呈现到另一个页面
【发布时间】：2016-08-10 22:40:38
【问题描述】：

我使用 Html 和 JavaScript 开发了 Page 1 和 Page 2。我正在尝试从第 1 页获取数据并使用 Cookies 和 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>

这是第 2 页，我希望从第 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>

【问题讨论】：

    标签： javascript css html cookies


    【解决方案1】：

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

    【讨论】：

    • 我正在尝试使用 cookie set -cookies 和 get-cookies 从第 1 页显示第 2 页的详细信息
    【解决方案2】：

    Cookie 是持久性的，会自动包含在每个 get/post 中，对于您似乎想要完成的工作而言，它并不是最佳选择。

    您示例中的帖子不会通过 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");

    【讨论】：

    • 对不起，我没听懂你想说什么？我想显示在 page1 上输入的数据，应该使用 cookie 显示在 page2 上，其中我在第 2 页中编写了“getValue(varname)”方法以获取第 1 页的数据表单。
    • 如果你想要做的只是理解cookies，要记住的是设置document.cookie="firstName=John" 添加一个cookie，获取myCookieArray=document.cookie.split(';') 返回一个包含所有cookie 的数组。如果你想要一个包含所有值的对象，循环遍历数组，a=split('=') 每个元素 a[0] 是名称 a[1] 是值。
    • 但如果您的目的是存储名称和密码，请不要这样做。这是安全 101。每个人都可以看到 Cookie。此外，Cookie 通常具有大约 2kb 的组合存储上限。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-02-03
    • 1970-01-01
    • 1970-01-01
    • 2011-11-08
    • 2015-08-30
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode