用本地存储写一个登录页面
时间: 2023-01-28 08:31:02 浏览: 71
好的,以下是使用本地存储写一个登录页面的简单示例:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面</title>
</head>
<body>
<form id="login-form">
<label for="username">用户名:</label><br>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="登录">
</form>
<script>
// 监听表单的提交事件
document.querySelector('#login-form').addEventListener('submit', e => {
// 阻止默认提交行为
e.preventDefault();
// 获取表单数据
const formData = new FormData(e.target);
const username = formData.get('username');
const password = formData.get('password');
// 将用户名和密码存储到本地存储中
localStorage.setItem('username', username);
localStorage.setItem('password', password);
// 向用户提示登录成功
alert('登录成功!');
});
</script>
</body>
</html>
```
这段代码中,我们使用了 HTML 的 `form` 元素和 `input` 元素来创建登录表单,并使用 JavaScript 的 `localStorage` API 将用户名和密码存储到本地存储中。
我希望这些信息能帮到您。如果您有更多的问题,欢迎继续提问。