2016-04-21 16 views
2

Ich bin dabei, eine Login- und Registrierungsseite für eine Website zu erstellen. Ich entschied mich, einen Cookie zu verwenden, um die registrierten Daten zu speichern, anstatt PHP zu verwenden. Wie genau würde ich das machen? Ich habe grundlegende Details wie Vorname, Nachname, Geburtstag, Benutzername, E-Mail und Passwort. Ich möchte die Details speichern, wenn sich der Benutzer bei der Site registriert, können sie sich dann mit dem registrieren, bei dem sie sich registriert haben. Dies alles geschieht in einer Form erfolgen, die unten:Verwenden eines Cookies zum Speichern von Daten

<form action="" method="post" name="form1" onsubmit="getdropdownvalue()"> 
 
    <table bgcolor="white" width="700" border="0" align="center"> 
 
    <col width="200"> 
 
     <col width="200"> 
 
     <tr> 
 
      <th colspan="2" align="center" bgcolor="grey">Fill the form to sign up.</th> 
 
     </tr> 
 
     <tr> 
 
      <td>&nbsp;</td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="2" style="font-size:12px">Fields marked with * are mandatory</td> 
 
     </tr> 
 
     <tr> 
 
      <td>&nbsp;</td> 
 
     </tr> 
 
     <tr> 
 
      <td>Name*</td> 
 
      <td>Surname*</td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <label> 
 
       <input type="text" name="txtname" id="txtname" class="info" /> 
 
       <td> 
 
       <label> 
 
        <input type="text" name="txtsurname" id="txtsurname" class="info" /> 
 
       </label> 
 
       </td> 
 
     </tr> 
 
     <tr> 
 
      <td>Create Username*</td> 
 
      <td>Birthday</td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <label> 
 
       <input type="text" name="txtusername" id="txtusername" class="info" /> 
 
      </label> 
 
      </td> 
 
      <td> 
 
      <select name="DOBMonth"> 
 
       <option>Month</option> 
 
       <option value="January">January</option> 
 
       <option value="Febuary">Febuary</option> 
 
       <option value="March">March</option> 
 
       <option value="April">April</option> 
 
       <option value="May">May</option> 
 
       <option value="June">June</option> 
 
       <option value="July">July</option> 
 
       <option value="August">August</option> 
 
       <option value="September">September</option> 
 
       <option value="October">October</option> 
 
       <option value="November">November</option> 
 
       <option value="December">December</option> 
 
      </select> 
 
      <select name="DOBDay"> 
 
       <option>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> 
 
      <select name="DOBYear"> 
 
       <option>Year</option> 
 
       <option value="2016">2016</option> 
 
       <option value="2015">2015</option> 
 
       <option value="2014">2014</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">1998</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> 
 
       <option value="1989">1989</option> 
 
       <option value="1988">1988</option> 
 
       <option value="1987">1987</option> 
 
       <option value="1986">1986</option> 
 
       <option value="1985">1985</option> 
 
       <option value="1984">1984</option> 
 
       <option value="1983">1983</option> 
 
       <option value="1982">1982</option> 
 
       <option value="1981">1981</option> 
 
       <option value="1980">1980</option> 
 
       <option value="1979">1979</option> 
 
       <option value="1978">1978</option> 
 
       <option value="1977">1977</option> 
 
       <option value="1976">1976</option> 
 
       <option value="1975">1975</option> 
 
       <option value="1974">1974</option> 
 
       <option value="1973">1973</option> 
 
       <option value="1972">1972</option> 
 
       <option value="1971">1971</option> 
 
       <option value="1970">1970</option> 
 
       <option value="1969">1969</option> 
 
       <option value="1968">1968</option> 
 
       <option value="1967">1967</option> 
 
       <option value="1966">1966</option> 
 
       <option value="1965">1965</option> 
 
       <option value="1964">1964</option> 
 
       <option value="1963">1963</option> 
 
       <option value="1962">1962</option> 
 
       <option value="1961">1961</option> 
 
       <option value="1960">1960</option> 
 
       <option value="1959">1959</option> 
 
       <option value="1958">1958</option> 
 
       <option value="1957">1957</option> 
 
       <option value="1956">1956</option> 
 
       <option value="1955">1955</option> 
 
       <option value="1954">1954</option> 
 
       <option value="1953">1953</option> 
 
       <option value="1952">1952</option> 
 
       <option value="1951">1951</option> 
 
       <option value="1950">1950</option> 
 
       <option value="1949">1949</option> 
 
       <option value="1948">1948</option> 
 
       <option value="1947">1947</option> 
 
      </select> 
 
      <tr> 
 
       <td>Email*</td> 
 
       <td>Confirm Email*</td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
       <label> 
 
        <input type="text" name="txtemail" id="txtemail" class="info" onchange="ValidateEmail(txtemail)" /> 
 
        <td> 
 
        <label> 
 
         <input type="text" name="txtemail2" id="txtemail2" class="info" onchange="ValidateEmail2(txtemail2)" /> 
 
        </label> 
 
        </td> 
 
      </tr> 
 
      <tr> 
 
       <td>Password*</td> 
 
       <td>Confirm Pasword*</td> 
 
      </tr> 
 
      <tr> 
 
       <td> 
 
       <label> 
 
        <input type="password" name="txtpassword" id="txtpassword" class="info" /> 
 
        <td> 
 
        <label> 
 
         <input type="password" name="txtpassword2" id="txtpassword2" class="info" /> 
 
        </label> 
 
        </td> 
 
      </tr> 
 
      <td colspan="2" style="font-size:12px">**Passwords must be at least 8 characters in lenght.</td> 
 
     </tr> 
 
     <tr> 
 
      <td>&nbsp;</td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="2"> 
 
      <label> 
 
       <input type="radio" name="terms" value="terms" id="terms" />I agree to the Terms and Conditions</label> 
 
      </td> 
 
     </tr> 
 
     <br> 
 
     <br> 
 
     <br> 
 
     <tr> 
 
      <td colspan="2"> 
 
      <label> 
 
       <input type="radio" name="notify" value="notify" id="notify" />I want to receive notifications by text/email about new products in stock.</label> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>&nbsp;</td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <label> 
 
       <input type="submit" name="Login" id="Login" value="Login" onclick="checkdetails()" /> 
 
      </label> 
 
      </td> 
 
      <td> 
 
      <label> 
 
       <input type="reset" name="Reset" id="Reset" value="Reset" /> 
 
      </label> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>&nbsp;</td> 
 
     </tr> 
 
    </table> 
 
</form>

Wie kann ich das erreichen? Irgendwelche Vorschläge?

+5

Sensible Informationen nicht in einem Cookie gespeichert werden soll, sollte es verschlüsselt und in einer Datenbank gespeichert werden. – APAD1

+0

Ja, Sie sollten eine Datenbank oder ähnliches verwenden. Ein Cookie speichert keine Benutzerdetails für einen längeren Zeitraum, was nicht Ihren Vorstellungen entspricht. –

+0

es ist nur für eine Zuordnung obwohl. danach darf es nicht wieder verwendet werden. –

Antwort

1

Wenn Sie möchten, Formulardaten in einem Cookie gespeichert werden (was empfohlen wird nicht wie in den Kommentaren angegeben), werden Sie JavaScript wie diesen verwenden:

<script type="text/javascript"> 
var today = new Date(); 
var expiry = new Date(today.getTime() + 30 * 24 * 3600 * 1000); // plus 30 days 

function setCookie(name, value) 
{ 
    document.cookie=name + "=" + escape(value) + "; path=/; expires=" + expiry.toGMTString(); 
} 

function storeValues(form) 
{ 
    setCookie("field1", form.field1.value);// replace with your form fields 
    setCookie("field2", form.field2.value); 
    setCookie("field3", form.field3.value); 
    setCookie("field4", form.field4.value); 
    return true; 
} 
</script> 

Außerdem müssen Sie anrufen die setCookie Funktion durch Aufruf, wenn die Schaltfläche geklickt wird vorlegen der Form, wie folgt aus:

<input type="submit" onclick="storeValues(this.form)" value="Submit" /> 
Verwandte Themen