?模板及PHP代碼都有，主要使用ajax異步請求提交表單，再用$_COOKIE實現記住密碼的功能，js這邊使用的是vue，整體上比較簡單，代碼也比較少。
**login.html**
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登錄</title>
<script src="js/vue.js"></script>
</head>
<body>
<form id="form" action="login.php" method="post">
<div v-if="isremember === 'yes'">
<button type="button" @click="login">登錄</button>
</div>
<div v-else>
<input name="username" type="text" v-model="username" :placeholder="usernameTip">
<input name="password" type="password" v-model="password" :placeholder="passwordTip">
<label><input name="remember" type="checkbox" v-model="remember">記住密碼</label>
<button type="button" @click="login">登錄</button>
</div>
</form>
<script>
var form = new Vue({
el: '#form',
data: {
username: '',
password: '',
remember: false,
isremember: 'no',
usernameTip: '請輸入用戶名',
passwordTip: '請輸入密嗎'
},
methods: {
login: function() {
if(/(password.*username)/.test(document.cookie)) { // 記住密碼
window.location.href = 'index.php';
} else {
var errorTip = '';
if(this.username=='') {
errorTip += '用戶名沒填;';
}
if(this.password=='') {
errorTip += '密碼沒填;';
}
if(errorTip) {
alert(errorTip);
} else {
this.$el.submit();
}
}
}
}
});
if(/(password.*username)/.test(document.cookie)) {
form.$data.isremember = 'yes';
form.$data.username = 'tom';
form.$data.password = '123456';
}
</script>
</body>
</html>
~~~
**login.php**
~~~
<?php
header('Content-type: text/html;charset=utf-8');
$username = $_POST['username'];
$password = md5($_POST['password']);
if(isset($_POST['remember'])) { // 判斷是否設置了remember
$remember = $_POST['remember'];
}
// 判讀用戶名、密碼
if($username=='tom' && $password=='e10adc3949ba59abbe56e057f20f883e') {
// 判斷是否記住密碼，使用的是cookie保存，會暴露給用戶
if(isset($remember)) {
setcookie('password', $password, time()+3600);
}
setcookie('username', $username, time()+3600); // 保存1小時
echo '<script>alert("登錄成功！");window.location.href="index.php";</script>';
// 也可以使用header方式跳轉 header('Location: index.php');
} else {
echo '<script>alert("登錄失敗！");window.history.back();</script>';
}
?>
~~~
**index.php**
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首頁</title>
</head>
<body>
welcome <strong><?php echo $_COOKIE['username']; ?> </strong>
<button type="button" onclick="logout()">退出</button>
<button type="button" onclick="logoff()">注銷</button>
<script>
function logout() {
window.location.href = 'login.html';
}
function logoff() {
if(/(password.*username)/.test(document.cookie)) {
document.cookie = 'username="";expires='+new Date((Date.parse(new Date())-1)).toGMTString();
document.cookie = 'password="";expires='+new Date((Date.parse(new Date())-1)).toGMTString();
}
window.location.href = 'login.html';
}
</script>
</body>
</html>
~~~
