个人记账系统

个人记账系统

项目简介

本项目是一个面向 PC 端的个人记账笔记网站，采用纯前端技术实现，无需后端服务即可运行。用户可通过浏览器完成注册登录、日常收支记录、数据统计可视化以及个人信息管理。数据持久化使用浏览器 localStorage 与 sessionStorage，按用户隔离存储，适合作为前端课程大作业或轻量级本地记账工具。

技术栈

类别	技术
页面结构	HTML5
样式	CSS3（全局变量、Flex/Grid 布局、响应式适配）
交互逻辑	原生 JavaScript（ES6+）
图表	ECharts 5.4.3（CDN 引入）
数据存储	localStorage（用户与记账记录）、sessionStorage（登录会话）

功能介绍

1. 登录 / 注册（login.html）

• 用户注册：填写用户名、密码及确认密码；校验密码一致性、长度（至少 6 位）、用户名是否重复。
• 用户登录：验证用户名与密码，成功后写入 sessionStorage 并跳转至记账首页。
• Tab 切换：同一页面内通过标签切换登录与注册表单，操作简洁。

2. 记账管理（index.html）

• 添加记录：支持填写日期、金额、类型（收入 / 支出）、事由，提交后保存至当前用户专属记录列表。
• 最近记录展示：按时间倒序显示最近 10 条记录，收入以绿色「+」、支出以红色「−」区分。
• 删除记录：单条记录可一键删除，数据实时更新。
• 登录保护：未登录用户访问时自动跳转至登录页。

3. 收支统计（stats.html）

• 汇总卡片：展示当前用户全部记录的总收入与总支出。
• 时间筛选：支持按「本周 / 本月 / 本年 / 自定义日期范围」过滤数据。
• 趋势图表：基于 ECharts 绘制按日分组的收支柱状图，直观对比收入与支出变化。
• 响应式图表：窗口尺寸变化时自动重绘图表。

4. 个人信息（profile.html）

• 资料展示：显示用户名、头像首字母、邮箱等信息。
• 资料编辑：可修改电子邮箱、手机号码；支持可选修改密码（留空则不更改）。
• 取消返回：取消编辑后返回记账首页。

5. 公共模块（script.js + style.css）

• 公共头部导航：记账、统计、个人信息、退出登录，各业务页自动注入。
• 公共页脚：版权信息展示。
• 登录态校验：checkLogin() 统一拦截未登录访问。
• 数据初始化：首次使用时自动初始化用户与记录存储结构。

文件夹目录

bookkeeping-note-website/
├── index.html          # 首页 — 记账功能（添加 / 查看 / 删除收支记录）
├── stats.html          # 统计页面 — 收支汇总与 ECharts 趋势图
├── login.html          # 登录注册页面 — 用户认证入口
├── profile.html        # 个人信息页 — 资料查看与修改
├── script.js           # 公共脚本 — 登录校验、头部页脚、数据初始化
├── style.css           # 全局样式 — 主题色、表单、按钮、导航等通用样式
├── 项目说明.md          # 项目说明文档（本文件）
└── 演示材料/
    └── 演示视频.mp4     # 项目功能演示视频

使用说明

1. 使用浏览器直接打开 login.html 进入系统（建议通过本地静态服务器访问，避免部分浏览器对 file:// 协议的限制）。
2. 注册账号并登录后，即可在「记账」页添加收支记录。
3. 在「统计」页查看汇总数据与图表分析。
4. 在「个人信息」页维护个人资料。
5. 点击导航栏「退出」清除当前会话并返回登录页。

数据说明

存储键	存储位置	说明
users	localStorage	全部注册用户列表（用户名、密码、邮箱、手机等）
records_{用户名}	localStorage	对应用户的记账记录数组
currentUser	sessionStorage	当前登录用户名，关闭标签页后失效

说明：本项目为纯前端演示项目，密码明文存储于本地，不适用于生产环境。正式产品应接入后端服务并采用加密与鉴权方案。

获取完整源码

• 网站：AI源码
• 本项目详情：https://www.aiyuanma.vip/posts/bookkeeping-note-website