如何在html中为登录页面创建会话

-1

我们正在制作一个基于学生记录的项目，我们想创建一个登录页面，但我们不知道如何在html中创建会话。如何在html中为登录页面创建会话

我们尝试使用表单进行登录页面，然后将该页面导向下一页，现在我们要在项目中实施会话。

任何帮助应是有益的

2017-07-03 pankaj meel

这里看看我过去的小项目中使用的代码使其工作像你想有三个文件的PHP文件的会话，登录页面和登录，检查文件。正如上面在评论中所说的，你不能使用HTML作为会话，你需要PHP，我在下面的代码中使用它。但是，您可以了解我在下面提供的内容。

PHP文件为会话。

<?php 

     //Start session 
     session_start(); 

      //Check whether the session variable SESS_MEMBER_ID is present or not 
      if (!isset($_SESSION['login_ID']) || (trim($_SESSION['login_ID']) == '')) 
       { 
        header("location: login.php"); 
        exit(); 
       } 

      $session_id=$_SESSION['login_ID']; 

?>

登录页面

<?php session_start(); 
include('logincheck.php');?> 

<!DOCTYPE html PUBLIC "-//W3C/DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <link rel="stylesheet" type="text/css" href="css/style.css" /> 
     <title>Login Page</title> 
    </head> 
<body> 
    <div class="form-wrapper"> 

     <form action="" method="post"> 

      <div class="form_title"> 
       <img src="img/form_title.gif" alt="Member Login" /> 
      </div> 

      <div class="form-item"> 
       <input type="text" name="user" required="required" placeholder="Username" autofocus required></input> 
      </div> 

      <div class="form-item"> 
       <input type="password" name="pass" required="required" placeholder="Password" required></input> 
      </div> 

      <div class="button-panel"> 
       <input type="submit" class="button" title="Log In" name="login" value="Login"></input> 
      </div> 

     </form> 
     <!--This is commented out because there is no sign up at the moment and forgot password--> 
     <!-- <div class="reminder"> 
     //<p>Not a member? <a href="#">Sign up now</a></p> 
     //<p><a href="#">Forgot password?</a></p> 
     </div> --> 
    </div> 

</body> 
</html>

登录检查文件

<?php 
    include('dbcon.php'); 

    if (isset($_POST['login'])) 
     { 
      $username = mysqli_real_escape_string($con, $_POST['user']); 
      $password = mysqli_real_escape_string($con, $_POST['pass']); 

       $query = mysqli_query($con, "SELECT * FROM users_login WHERE userName='$username' and password='$password'"); 
       $row = mysqli_fetch_array($query); 
       $num_row = mysqli_num_rows($query); 

        if ($num_row > 0) 
         {   
          $_SESSION['login_ID']=$row['login_ID']; 

           if($_SESSION['login_ID'] == 2 || $_SESSION['login_ID'] == 3 || $_SESSION['login_ID'] == 4 || $_SESSION['login_ID'] == 5) 
           { 
            header('location: Admin_Page.php'); 
           } 
           else 
           { 
            header('location: home.php'); 
           } 
         } 
        else 
         { 
          echo '<h2 style="color:black;">Invalid Username and or Password Combination</h2>'; 
         } 
     } 

    ?>

希望这有助于。

来源

2017-07-03 05:16:09

什么是反对票。 –

这里没有PHP，对吧？这只是纯粹的客户端HTML。 –

是的，有。 :) –

您可能无法创建服务器端会话，但可以执行客户端会话存储，但请注意，它可能很容易被篡改。你应该有一个现代的浏览器：

if (typeof(Storage) !== "undefined") { 
    // Code for localStorage/sessionStorage. 
} else { 
    // Sorry! No Web Storage support.. 
}

现在有了上面的代码，你可以使用会话存储用于存储的登录信息。

if (typeof(Storage) !== "undefined") { 
 
    // Code for localStorage/sessionStorage. 
 
    if (localStorage.getItem("user") != "") { 
 
    document.getElementById("login").style.display = "none"; 
 
    document.getElementById("loggedInUser").innerHTML = localStorage.getItem("user"); 
 
    document.getElementById("welcome").style.display = "none"; 
 
    } 
 
} else { 
 
    // Sorry! No Web Storage support.. 
 
} 
 

 
function login() { 
 
    var user = prompt("Enter Username"); 
 
    var pass = prompt("Enter Password"); 
 
    if (user = "admin" && pass == "letmein") { 
 
    alert("Success"); 
 
    loginUser(user); 
 
    } else { 
 
    alert("Wrong Credentials"); 
 
    logoutUser(); 
 
    } 
 
    return false; 
 
} 
 

 
function loginUser(user) { 
 
    if (typeof(Storage) !== "undefined") { 
 
    // Code for localStorage/sessionStorage. 
 
    localStorage.setItem("user", user); 
 
    document.getElementById("login").style.display = "none"; 
 
    document.getElementById("loggedInUser").innerHTML = user; 
 
    document.getElementById("welcome").style.display = "block"; 
 
    } else { 
 
    // Sorry! No Web Storage support.. 
 
    } 
 
} 
 

 
function logoutUser() { 
 
    if (typeof(Storage) !== "undefined") { 
 
    // Code for localStorage/sessionStorage. 
 
    localStorage.setItem("user", ""); 
 
    document.getElementById("login").style.display = "block"; 
 
    document.getElementById("loggedInUser").innerHTML = ""; 
 
    document.getElementById("welcome").style.display = "none"; 
 
    } else { 
 
    // Sorry! No Web Storage support.. 
 
    } 
 
}

<div id="login"> 
 
    Please login. <a href="#" onclick="return login();">Login</a> 
 
</div> 
 
<div id="welcome"> 
 
    Welcome <span id="loggedInUser"></span> 
 
</div>

由于StackSnippets不允许本地存储，请JSBin。

来源

2017-07-03 05:25:40

创建HTML会话存储之前，请检查浏览器是否支持会话。这是因为不同的浏览器非常重要的具有不同的兼容性

if (typeof(Storage) !== "undefined") { 
    // Code for localStorage/sessionStorage. 
} else { 
    // Sorry! No Web Storage support.. 
}

然后使用HTML存储这样

// Store 
localStorage.setItem("username", "John"); 
// Retrieve 
localStorage.getItem("lastname");

使用此功能可以清除存储

localStorage.clear();

此外，您可以使用jQuery会话存储这也是客户端存储

// Save data to sessionStorage 
sessionStorage.setItem('key', 'value'); 

// Get saved data from sessionStorage 
var data = sessionStorage.getItem('key'); 

// Remove saved data from sessionStorage 
sessionStorage.removeItem('key'); 

// Remove all saved data from sessionStorage 
sessionStorage.clear();

来源

2017-07-03 05:36:44 karthik006

如何在html中为登录页面创建会话

回答

相关问题