请开发一个页面,用Cookie保存信息。当用户第一次访问时,在线注册用户姓名、性别信息并保存到Cookies中,用户再次访问时,在页面显示“某某,您好,您是第?次光临本站。”的欢迎信息。
时间: 2024-03-09 15:46:07 浏览: 20
好的,这个需求可以通过以下步骤实现:
1. 在页面中添加一个表单,用于用户注册信息,包括姓名和性别。同时,添加一个按钮,当用户点击时,将表单数据保存到 Cookies 中。
2. 在页面中添加一个 JavaScript 脚本,用于检查 Cookies 是否存在用户信息。如果存在,则提取用户信息,并在页面中显示欢迎信息。
以下是示例代码:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>欢迎访问本站</title>
<meta charset="utf-8">
</head>
<body>
<h1>欢迎访问本站</h1>
<form id="registerForm">
<label>姓名:</label>
<input type="text" name="name" required>
<br>
<label>性别:</label>
<input type="radio" name="gender" value="male" required>男
<input type="radio" name="gender" value="female" required>女
<br>
<button type="submit">注册</button>
</form>
<div id="welcomeMessage"></div>
<script src="script.js"></script>
</body>
</html>
```
JavaScript 代码:
```javascript
// 尝试从 Cookies 中获取用户信息
function getUserInfoFromCookies() {
var cookies = document.cookie.split("; ");
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].split("=");
if (cookie[0] === "name") {
var name = decodeURIComponent(cookie[1]);
} else if (cookie[0] === "gender") {
var gender = decodeURIComponent(cookie[1]);
}
}
if (name && gender) {
return { name: name, gender: gender };
} else {
return null;
}
}
// 在页面中显示欢迎信息
function showWelcomeMessage(userInfo, visitCount) {
var welcomeMessage = document.getElementById("welcomeMessage");
welcomeMessage.textContent = userInfo.name + ",您好,您是第 " + visitCount + " 次光临本站。";
}
// 获取访问次数
function getVisitCount() {
var visitCount = localStorage.getItem("visitCount");
if (!visitCount) {
visitCount = 0;
}
visitCount++;
localStorage.setItem("visitCount", visitCount);
return visitCount;
}
// 保存用户信息到 Cookies
function saveUserInfoToCookies(name, gender) {
document.cookie = "name=" + encodeURIComponent(name) + "; max-age=" + (60 * 60 * 24 * 365);
document.cookie = "gender=" + encodeURIComponent(gender) + "; max-age=" + (60 * 60 * 24 * 365);
}
// 注册表单提交事件
var registerForm = document.getElementById("registerForm");
registerForm.addEventListener("submit", function(event) {
event.preventDefault();
var name = registerForm.elements["name"].value;
var gender = registerForm.elements["gender"].value;
saveUserInfoToCookies(name, gender);
location.reload();
});
// 页面加载完成后执行
window.addEventListener("load", function() {
var userInfo = getUserInfoFromCookies();
if (userInfo) {
var visitCount = getVisitCount();
showWelcomeMessage(userInfo, visitCount);
}
});
```
这样,在用户第一次访问时,他们需要填写姓名和性别信息,并点击“注册”按钮。这些信息将被保存到 Cookies 中,并在用户再次访问时自动提取。同时,每个用户的访问次数将在本地存储中保存,并在欢迎信息中显示。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)