2014-02-25 55 views
0

我需要爲我的學習做一個網站與餅乾,但我不能讓它工作。 我試圖尋找各種解決方案,但找不到我需要的東西,因爲我的老師想要簡單的代碼他教我的東西。我需要製作一個cookie來記住你的用戶名,所以當你下次登錄時(不需要識別密碼),你會收到消息「Welcome again'user'」。它只能用簡單的Javascript完成!Javascript cookies來記住輸入值

這是我的JavaScript文件(cookies.js):

function setCookie(cname,cvalue,exdays) 
{ 
var d = new Date(); 
d.setTime(d.getTime()+(exdays*24*60*60*1000)); 
var expires = "expires="+d.toGMTString(); 
document.cookie = cname+"="+cvalue+"; "+expires; 
} 

function getCookie(cname) 
{ 
var name = cname + "="; 
var ca = document.cookie.split(';'); 
for(var i=0; i<ca.length; i++) 
    { 
    var c = ca[i].trim(); 
    if (c.indexOf(name)==0) return c.substring(name.length,c.length); 
    } 
return ""; 
} 

function checkCookie() 
{ 
var user = getCookie("username"); 
if (user!="") 
    { 
    alert("Welcome again " + user); 
    } 
else 
    { 
    user = document.getElementById("username").value; 
    if (user!="" && user!=null) 
    { 
    setCookie("username",user,30); 
    } 
    } 
} 

,這是我的登錄頁面(inloggen.html):

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Inloggen</title> 
     <meta charset="iso-8859-1"> 
     <meta name="keywords" content="Javascript"> 
     <meta name="author" content="Arjan Oskam"> 
     <meta name="description" content="Javascript"> 
     <link rel="Stylesheet" href="css/style.css"> 
     <script type="text/javascript"> 
      alert("Deze webpagina maakt gebruik van cookies"); 
     </script> 
     <script type="text/javascript" src="javascript/cookies.js"></script> 
    </head> 
    <body> 
     <script> 
      function checkCookie() 
      { 
       var user = getCookie("username"); 
       if (user != "") 
       { 
        alert("Welcome again " + user); 
       } 
       else 
       { 
        user = document.getElementById("username").value; 
        if (user != "" && user != null) 
        { 
         setCookie("username", user, 30); 
        } 
       } 
      } 
     </script> 
     <div id="wrapper"> 
      <div id="head"> 
       <div><img src="images/logo.gif" id="logo" alt="logo"></div><!-- #Logo --> 
       <div id="banner"><img src="images/banner.jpg" alt="banner"></div> 


      </div><!-- #Head --> 
      <div id="menu"> 
       <nav> 
        <ul> 
         <li><a href="index.html">Home</a></li> 
         <li><a href="id-ontwikkelaar.html">ID-Ontwikkelaar</a></li> 
         <li><a href="quiz.html">Quiz</a></li> 
         <li><a href="formulier.html">Registreren</a></li> 
         <li><a href="inloggen.html">Inloggen</a></li> 
        </ul> 
       </nav> 
      </div><!-- Menu --> 
      <div id="inhoud"> 
       <br> 
       <br> 
       <h2>Inloggen</h2> 
       <div id="tekst"> 
        <form class="uitlijnen" id="form" onsubmit="setCookie(); 
       getCookie(); 
       checkCookie();"> 
         <br> 
         Gebruikersnaam: <input type="text" name="username" id="username" placeholder="Typ hier uw username" required><br><br> 
         Wachtwoord: <input type="password" name="wachtwoord" placeholder="Typ hier uw wachtwoord" required><br><br> 
         <input type="submit" value="inloggen" class="button"> 
        </form> 
       </div><!-- #Tekst --> 
      </div><!-- #Inhoud --> 
     </div><!-- #Wrapper --> 
    </body> 
</html> 

我希望你能幫幫我!

回答

1

在這裏你去,代碼小幅更新,你沒有傳遞參數setCookie函數

<!DOCTYPE html> 
<html> 
<head> 
<title>Inloggen</title> 
<meta charset="iso-8859-1"> 
<meta name="keywords" content="Javascript"> 
<meta name="author" content="Arjan Oskam"> 
<meta name="description" content="Javascript"> 
<link rel="Stylesheet" href="css/style.css"> 
<script language="javascript"> 
function setCookie() 
{ 
    checkCookie(); 
    var cname = "username"; 
    var cvalue = document.getElementById("username").value; 
    var exdays = 7; 
    var d = new Date(); 
    d.setTime(d.getTime()+(exdays*24*60*60*1000)); 
    var expires = "expires="+d.toGMTString(); 
    document.cookie = cname+"="+cvalue+"; "+expires; 
} 

function getCookie(cname) 
{ 
    var name = cname + "="; 
    var ca = document.cookie.split(';'); 
    for(var i=0; i<ca.length; i++) 
     { 
     var c = ca[i].trim(); 
     if (c.indexOf(name)==0) return c.substring(name.length,c.length); 
     } 
    return ""; 
} 

function checkCookie() 
{ 
    var user = getCookie("username"); 
    if (user != "") 
    { 
     alert("Welcome again " + user); 
    } 
} 
</script> 
</head> 
<body> 
<div id="wrapper"> 
    <div id="head"> 
    <div><img src="images/logo.gif" id="logo" alt="logo"></div> 
    <!-- #Logo --> 
    <div id="banner"><img src="images/banner.jpg" alt="banner"></div> 
    </div> 
    <!-- #Head --> 
    <div id="menu"> 
    <nav> 
     <ul> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="id-ontwikkelaar.html">ID-Ontwikkelaar</a></li> 
     <li><a href="quiz.html">Quiz</a></li> 
     <li><a href="formulier.html">Registreren</a></li> 
     <li><a href="inloggen.html">Inloggen</a></li> 
     </ul> 
    </nav> 
    </div> 
    <!-- Menu --> 
    <div id="inhoud"> <br> 
    <br> 
    <h2>Inloggen</h2> 
    <div id="tekst"> 
     <form class="uitlijnen" id="form" onsubmit="setCookie();" method="post"> 
     <br> 
     Gebruikersnaam: 
     <input type="text" name="username" id="username" placeholder="Typ hier uw username" required> 
     <br> 
     <br> 
     Wachtwoord: 
     <input type="password" name="wachtwoord" placeholder="Typ hier uw wachtwoord" required> 
     <br> 
     <br> 
     <input type="submit" value="inloggen" class="button"> 
     </form> 
    </div> 
    <!-- #Tekst --> 
    </div> 
    <!-- #Inhoud --> 
</div> 
<!-- #Wrapper --> 
</body> 
</html> 
+0

那麼..現在它確實檢查用戶名,但現在它說,即使你第一次填寫你的名字,哈梅德,再次歡迎。它需要像:我填寫名字Arjan。它什麼也沒做。每次我填寫阿爾揚後,它說再次歡迎。所以也爲其他名稱 –

+0

希望更新的代碼是你正在尋找:),清除緩存後嘗試 –

+0

它的工作原理並不完全或它是我的瀏覽器設置..當我第一次輸入Arjan時它什麼也沒說,第二次它說歡迎回來。當我輸入例如Corné時,它再次表示歡迎Arjan。並且在我第二次填補了Corné之後,歡迎回來Corné?任何想法,如果這是可以解決的? –

1

我認爲你正在設置cookies錯誤。我建議您在設置cookie後,在函數setCookie中嘗試console.log(document.cookie),然後在Chrome控制檯中檢查顯示的內容。

此外,您可以嘗試寫入document.cookie,並直接在chrome控制檯中按Enter鍵,看看你得到了什麼。

基本上,我認爲錯誤是:

document.cookie = cname+"="+cvalue+"; "+expires; 

應該

document.cookie = cname+'="'+cvalue+';'+expires+'"'; 

因爲餅乾必須

userName="test; expires...";