suchen

Heim  >  Artikel  >  Web-Frontend  >  JavaScript-Cookie-Basisanwendung (Methode zur Aufzeichnung des Benutzernamens)

JavaScript-Cookie-Basisanwendung (Methode zur Aufzeichnung des Benutzernamens)

亚连
亚连Original
2018-05-19 15:49:241437Durchsuche

In diesem Artikel wird hauptsächlich die Methode zum Aufzeichnen von Benutzernamen in der grundlegenden Anwendung von Javascript-Cookies vorgestellt. Dabei handelt es sich um einfache Anwendungen von Javascript, die auf Cookies zur Datenspeicherung basieren.

Dieser Artikel erklärt die Grundlagen von Javascript-Cookies mit Beispielen Die Methode der Anwendung zum Aufzeichnen von Benutzernamen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Es gibt zuvor einen Artikel über die Grundlagen von Cookies, der cookie.js kapselt. Nachfolgend verwenden wir ein Beispiel, um dieses js anzuwenden.

Die häufigste Methode besteht darin, sich den Benutzernamen zu merken. Nachdem sich der Benutzer einmal angemeldet hat, werden sein Konto und sein Passwort über Cookies aufgezeichnet, sodass der Benutzer dies beim nächsten Öffnen der Seite nicht mehr tun muss Geben Sie das Konto und das Passwort erneut ein. Angehängter Code: 

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title>cookie的应用——记住用户名</title>
</head>
<body>
  <form action="#" id="myform">
    <label for="username">用户名：</label><input type="text" name="username" id="username" />
    <label for="userpass">密码：</label><input type="password" name="userpass" id="userpass" />
    <input type="submit" value="登录" />
    <a href="javascript:;">清除记录</a>
  </form>
</body>
</html>
<script type="text/javascript" src="cookie.js"></script>
<script type="text/javascript">
window.onload = function(){
  var oForm = document.getElementById(&#39;myform&#39;);
  var oTxt1 = document.getElementById(&#39;username&#39;);
  var oTxt2 = document.getElementById(&#39;userpass&#39;);
  var oClear = document.getElementsByTagName(&#39;a&#39;)[0];
  oTxt1.value = getCookie(&#39;username&#39;);
  oTxt2.value = getCookie(&#39;userpass&#39;);
  oForm.onsubmit = function(){
    setCookie(&#39;username&#39;,oTxt1.value,30);
    setCookie(&#39;userpass&#39;,oTxt2.value,30);
  }
  oClear.onclick = function(){
    removeCookie(&#39;username&#39;);
    removeCookie(&#39;userpass&#39;);
    oTxt1.value = &#39;&#39;;
    oTxt2.value = &#39;&#39;;
  }
}
</script>

PS: Posten Sie die cookie.js im vorherigen Artikel hier, damit jeder sie sehen kann: 

function setCookie(name,value,hours){
 var d = new Date();
 d.setTime(d.getTime() + hours * 3600 * 1000);
 document.cookie = name + &#39;=&#39; + value + &#39;; expires=&#39; + d.toGMTString();
}
function getCookie(name){
 var arr = document.cookie.split(&#39;; &#39;);
 for(var i = 0; i < arr.length; i++){
  var temp = arr[i].split(&#39;=&#39;);
  if(temp[0] == name){
   return temp[1];
  }
 }
 return &#39;&#39;;
}
function removeCookie(name){
 var d = new Date();
 d.setTime(d.getTime() - 10000);
 document.cookie = name + &#39;=1; expires=&#39; + d.toGMTString();
}

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Detaillierte Erklärung des JavaScript-Cookies und einfache Beispielanwendung (Bild- und Text-Tutorial)

Verstehen und Verständnis der Verwendung von JavaScript-Cookies

Javascript-CookieNutzung (Konzept, Einstellung, Lesen und Löschen)

Das obige ist der detaillierte Inhalt vonJavaScript-Cookie-Basisanwendung (Methode zur Aufzeichnung des Benutzernamens). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Einführung in den Javascript-Ereignis-Bubbling-Mechanismus (grafisches Tutorial)Nächster Artikel：Detaillierte Einführung in den Javascript-Ereignis-Bubbling-Mechanismus (grafisches Tutorial)

In Verbindung stehende Artikel

Mehr sehen