在html写一个用cookie实现的登录和注册页面
时间: 2024-03-18 21:41:29 浏览: 17
好的,以下是一个简单的使用 Cookie 实现登录和注册的 HTML 页面示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>使用 Cookie 实现登录和注册</title>
</head>
<body>
<h1>登录</h1>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="登录">
</form>
<h1>注册</h1>
<form>
<label for="new_username">用户名:</label>
<input type="text" id="new_username" name="new_username"><br><br>
<label for="new_password">密码:</label>
<input type="password" id="new_password" name="new_password"><br><br>
<input type="submit" value="注册">
</form>
<script>
// 读取 Cookie 中的登录信息
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
// 设置 Cookie 中的登录信息
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+ d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
// 处理登录表单提交
document.forms[0].addEventListener("submit", function(event) {
event.preventDefault();
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// 在这里添加验证用户名和密码的代码
// 设置 Cookie 中的登录信息
setCookie("username", username, 1);
alert("登录成功");
});
// 处理注册表单提交
document.forms[1].addEventListener("submit", function(event) {
event.preventDefault();
var new_username = document.getElementById("new_username").value;
var new_password = document.getElementById("new_password").value;
// 在这里添加将用户名和密码保存到数据库的代码
alert("注册成功");
});
// 页面加载时检查是否已登录
window.onload = function() {
var username = getCookie("username");
if (username != "") {
alert("欢迎您," + username);
}
}
</script>
</body>
</html>
```
在这个示例中,我们使用了两个表单:一个用于登录,一个用于注册。当用户提交登录表单时,我们通过 JavaScript 获取用户名和密码,然后将用户名保存到 Cookie 中。当用户提交注册表单时,我们可以将用户名和密码保存到数据库中。
在页面加载时,我们检查 Cookie 中是否已保存了用户名,如果有,则认为用户已登录,弹出欢迎消息。
请注意,这只是一个示例,实际上,使用 Cookie 进行身份验证还需要考虑安全性等问题。