背景介绍
随着用户对数据存储需求的增长，小型网页应用的实现对前端技术的要求愈发提升。本项目围绕一个核心功能：接收用户输入信息并保存至本地存储，最终在网页上展示结果。该功能可应用于个人数据管理、用户反馈收集等场景，具备良好的可扩展性与交互性。
思路分析
- 需求分析
- 用户可输入姓名和年龄，保存至本地文件。
- 页面显示输入信息，确保数据持久化。
- 技术选型
- 使用HTML、CSS和JavaScript实现用户交互逻辑。
- 数据存储采用JSON格式，方便后续读取与操作。
- 核心实现步骤
- 使用
localStorage保存用户信息。 - 在网页上展示输入内容，支持用户重新输入。
- 使用
代码实现
1. HTML 结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>个人信息记录</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f9f9f9;
}
h2 {
text-align: center;
color: #333;
}
label {
margin-right: 10px;
}
input[type="text"], input[type="number"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 10px;
background-color: #4CAF1F;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<h2>个人信息记录</h2>
<label>姓名：</label>
<input type="text" id="nameInput" placeholder="请输入姓名" value="张三" />
<label>年龄：</label>
<input type="number" id="ageInput" placeholder="请输入年龄" value="25" />
<div id="resultArea" class="result"></div>
</body>
<script>
// 保存用户信息到本地存储
function saveToLocalStorage() {
const name = document.getElementById('nameInput').value;
const age = document.getElementById('ageInput').value;
const json = { name, age };
localStorage.setItem('user', JSON.stringify(json));
}
// 读取并更新本地存储
function getLocalStorage() {
const user = JSON.parse(localStorage.getItem('user'));
if (user) {
document.getElementById('resultArea').textContent = '姓名：' + user.name + ', 年龄：' + user.age;
}
}
// 页面加载时读取并展示信息
window.onload = getLocalStorage;
// 重新输入信息时更新数据
document.getElementById('nameInput').addEventListener('input', saveToLocalStorage);
document.getElementById('ageInput').addEventListener('input', saveToLocalStorage);
</script>
</html>
2. Java 示例实现
由于本问题要求使用Python实现，以下是基于Python的代码示例：
import json
# 保存用户信息到本地文件
def save_user_info(name, age):
user = {"name": name, "age": age}
with open("user_data.json", "w") as f:
json.dump(user, f)
# 读取并展示信息
def load_user_info():
try:
with open("user_data.json", "r") as f:
data = json.load(f)
print(f"姓名：{data['name']}, 年龄：{data['age']}")
except FileNotFoundError:
print("用户信息未保存。请保存后重新加载。")
# 示例使用
save_user_info("张三", 25)
load_user_info()
总结
本项目通过HTML、CSS和JavaScript实现了一个小型网页应用，能够接收用户输入并保存至本地存储，最终在网页上展示信息。代码示例清晰展示了数据结构的读写逻辑，并提供了可运行的代码。
通过本项目的学习，可以进一步扩展功能，例如支持多字段输入、实时更新或与后端服务通信。