2017-02-02 7 views
1

私はjavascriptでプロジェクトをやっているので、ログインして特定のバージョンのWebサイトに誘導する方法はわかりません。たとえば、ログインしていない場合は、ショッピングウェブサイトで商品を購入するオプションを使用できません。しかし、ログインするとそのオプションが利用可能になります。私の仕事は、すべてログインのためにローカルストレージを使ってこれを行うことです。私はこのためにのみJavaScriptを使用することができます これについての助けに感謝します!JAVASCRIPTログインはローカルストレージにリダイレクト

function store() { 
 
    var name = document.getElementById('name'); 
 
    var pw = document.getElementById('pw'); 
 
    var telefon = document.getElementById('telefon') 
 
    var email = document.getElementById('email') 
 
    var adresa = document.getElementById('adresa') 
 
    var drzava = document.getElementById('drzava') 
 
    var mrod = document.getElementById('mrod') 
 
    var zrod = document.getElementById('zrod') 
 

 
    localStorage.setItem('name', name.value); 
 
    localStorage.setItem('pw', pw.value); 
 
    localStorage.setItem('telefon', telefon.value); 
 
    localStorage.setItem('email', email.value); 
 
    localStorage.setItem('adresa', adresa.value); 
 
    
 
} 
 

 
function check() { 
 

 
    var storedName = localStorage.getItem('name'); 
 
    var storedPw = localStorage.getItem('pw'); 
 

 
    var userName = document.getElementById('userName'); 
 
    var userPw = document.getElementById('userPw'); 
 

 
    if(userName.value == storedName && userPw.value == storedPw) { 
 
     alert('You are loged in.'); 
 
    }else { 
 
     alert('ERROR.'); 
 
    } 
 
}
body{ 
 
    margin:0px; 
 
    font:1em "Open sans", sans-serif; 
 
} 
 
    
 
.content { 
 
    padding:30px; 
 
} 
 
    
 
.nav-main{ 
 
    background-color:#222; 
 
    width:100%; 
 
    color:#fff; 
 
    height: 70px; 
 
} 
 
    
 
.nav-main .logo { 
 
    float:left; 
 
    height:40px; 
 
    padding:15px 30px; 
 
    font-size:2.4em; 
 
    line-height:40px; 
 
} 
 
    
 
.nav-main > ul { 
 
    margin:0px; 
 
    padding:0px; 
 
    float:left; 
 
    list-style:none; 
 
} 
 

 
.nav-main > ul > li { 
 
\t float: left; 
 
} 
 
.nav-item { 
 
\t display:inline-block; 
 
\t padding:15px 20px; 
 
\t height: 40px; 
 
\t line-height:40px; 
 
\t color:white; 
 
\t text-decoration: none; 
 

 
} 
 

 
.nav-item:hover { 
 
\t background-color:#444 
 
} 
 

 
.nav-content { 
 
\t position:absolute; 
 
\t top: 70px; 
 
\t overflow:hidden; 
 
\t background-color:#222; 
 
\t max-height:0; 
 
} 
 

 
.nav-content a { 
 
\t color:white; 
 
\t text-decoration: none; 
 
} 
 

 
.nav-content a:hover { 
 
\t text-decoration:underline; 
 
} 
 

 
.nav-sub { 
 
\t padding:20px; 
 
} 
 

 
.nav-sub ul { 
 
\t padding: 0; 
 
\t margin: 0; 
 
\t list-style-type:none; 
 
} 
 

 
.nav-sub ul li a { 
 
\t display:inline-block; 
 
\t padding:5px 0; 
 

 
} 
 

 
.nav-item:focus { 
 
\t background-color:#444; 
 
} 
 

 
.nav-item:focus ~ .nav-content { 
 
\t max-height:400px; 
 
\t -webkit-transition:max-height 0.4s ease-in; 
 
\t -moz-transition:max-height 0.4s ease-in; 
 
\t transition:max-height 0.4s ease-in; 
 
} 
 
h1 { 
 
margin-left: 70px; 
 
} 
 
form li { 
 
list-style: none; 
 
margin-bottom: 5px; 
 
} 
 

 
form ul li label{ 
 
float: left; 
 
clear: left; 
 
width: 100px; 
 
text-align: right; 
 
margin-right: 10px; 
 
font-family:Verdana, Arial, Helvetica, sans-serif; 
 
font-size:14px; 
 
} 
 

 
form ul li input, select, span { 
 
float: left; 
 
margin-bottom: 10px; 
 
} 
 

 
form textarea { 
 
float: left; 
 
width: 350px; 
 
height: 150px; 
 
} 
 

 
[id="rgstr_btn"] { 
 
margin: none; 
 
margin: 230px -120px; 
 
font-size:12px 
 
} 
 

 
[id="login_btn"] { 
 
margin: none; 
 
margin: 58px -100px; 
 
font-size:12px 
 
} 
 
p { 
 
margin-left: 70px; 
 
font-weight: bold; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Registruj se</title> 
 
    <link rel="stylesheet" href="style2.css"> 
 
    <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans"> 
 
</head> 
 
<body> 
 
    <nav class="nav-main"> 
 
    <div class="logo"><b>Oglasi</b></div> 
 
    <ul> 
 
    <li> 
 
     <a href="Pocetna.html" class="nav-item">Pocetna</a> 
 
    </li> 
 
    <li> 
 
     <a href="Kupovina.html" class="nav-item">Kupovina</a> 
 
    </li> 
 
    <li> 
 
     <a href="Prodaja.html" class="nav-item">Prodaja</a> 
 
    </li> 
 
    <li> 
 
     <a href="#" class="nav-item">Kategorije</a> 
 
    <div class="nav-content"> 
 
     <div class="nav-sub"> 
 
        <ul> 
 
         <li><a href="IPhone.html">IPhone</a></li> 
 
         <li><a href="#">Samsung</a></li> 
 
         <li><a href="#">Sony</a></li> 
 
        </ul> 
 
     </div> 
 
     </div> 
 

 
    </li> 
 
    <li> 
 
     <a href="Registruj_se.html" class="nav-item">Registruj se</a> 
 
    </li> 
 
    <li> 
 
     <a href="Uloguj_se.html" class="nav-item">Uloguj se</a> 
 
    </li> 
 
    <li> 
 
     <a href="Moj_profil.html" class="nav-item">Moj profil</a> 
 
    </li> 
 
    </ul> 
 
     
 
    </nav> 
 
    \t 
 
<form id="login-form"> 
 
     <ul> 
 
      <li><label for="Enter Username">Korisnicki ID:</label></li> 
 
      <li><input id="userName" type="text" placeholder="Enter Username" value=""/></li> 
 
      <li><label for="Enter Password">Sifra:</label></li> 
 
      <li><input id="userPw" type="password" placeholder="Enter Password" value=""/></li> 
 
      <li><button id="login_btn" type="button" value="Login" onClick="check()"/>Login</button></li> 
 
     </ul> 
 
</form> 
 
<script type="text/javascript" language="javascript" src="1.js"></script> 
 
</body> 
 
</html>

`sの。

答えて

0

ログインが有効でなくなったときに、javascriptの場所オブジェクトを使用して別のページにユーザーを送信できます。 location.assign( "http://homepage/home.com");

関連する問題