Java前端 1. 做一个登陆表单,如果登录成功(假如用户名为“zs”,密码为“123”是正确的账户和密码),则通过cookie记录存储的账户和密码;下次打开,直接即可显示出账户和密码 提示:cookie的存储: "userpass=zs-123", 获取cookie时,拆用户名和密码
时间: 2024-03-03 20:49:06 浏览: 61
使用Cookie记录用户名和密码.
好的,这是一个很经典的前端登录操作,以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录表单</title>
</head>
<body>
<form id="loginForm">
<label>用户名:</label>
<input type="text" name="username"><br><br>
<label>密码:</label>
<input type="password" name="password"><br><br>
<input type="submit" value="登录">
</form>
<script>
// 首先检查cookie是否存在,如果存在则直接填充表单
var userpass = getCookie("userpass");
if (userpass) {
var arr = userpass.split("-");
document.getElementsByName("username")[0].value = arr[0];
document.getElementsByName("password")[0].value = arr[1];
}
// 监听表单提交事件
document.getElementById("loginForm").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表单默认提交行为
// 获取表单数据
var username = document.getElementsByName("username")[0].value;
var password = document.getElementsByName("password")[0].value;
// 验证用户名和密码是否正确
if (username === "zs" && password === "123") {
// 存储cookie
setCookie("userpass", username + "-" + password, 7); // 保存7天
// 跳转到首页或其他页面
alert("登录成功!");
} else {
alert("用户名或密码错误!");
}
});
// 设置cookie
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + value + expires + "; path=/";
}
// 获取cookie
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
</script>
</body>
</html>
```
这段代码中,我们使用了 JavaScript 来实现 cookie 的存储和读取,以及表单的验证和提交。具体来说,我们使用了 `document.cookie` 来存储和读取 cookie,使用了表单的 `submit` 事件来监听表单提交,使用了 `preventDefault()` 方法来阻止表单的默认提交行为。在登录成功后,我们将用户名和密码拼接成一个字符串,并将其存储在 cookie 中,以便下次打开页面时使用。当然,这只是一个简单的示例,实际中可能还需要考虑更多的安全性和用户体验问题。
阅读全文