JAVASCRIPT使用本地存储登录重定向

Question

我正在做一个关于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 { float: left; } .nav-item { display:inline-block; padding:15px 20px; height: 40px; line-height:40px; color:white; text-decoration: none; } .nav-item:hover { background-color:#444 } .nav-content { position:absolute; top: 70px; overflow:hidden; background-color:#222; max-height:0; } .nav-content a { color:white; text-decoration: none; } .nav-content a:hover { text-decoration:underline; } .nav-sub { padding:20px; } .nav-sub ul { padding: 0; margin: 0; list-style-type:none; } .nav-sub ul li a { display:inline-block; padding:5px 0; } .nav-item:focus { background-color:#444; } .nav-item:focus ~ .nav-content { max-height:400px; -webkit-transition:max-height 0.4s ease-in; -moz-transition:max-height 0.4s ease-in; 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> <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> 

单曲。

Answer 1

当登录不再有效时，您可以使用javascript位置对象将用户发送到另一个页面。 location.assign（“ http：//homepage/home.com ”）;