个人记账系统项目简介本项目是一个面向 PC 端的个人记账笔记网站采用纯前端技术实现无需后端服务即可运行。用户可通过浏览器完成注册登录、日常收支记录、数据统计可视化以及个人信息管理。数据持久化使用浏览器localStorage与sessionStorage按用户隔离存储适合作为前端课程大作业或轻量级本地记账工具。技术栈类别技术页面结构HTML5样式CSS3全局变量、Flex/Grid 布局、响应式适配交互逻辑原生 JavaScriptES6图表ECharts 5.4.3CDN 引入数据存储localStorage用户与记账记录、sessionStorage登录会话功能介绍1. 登录 / 注册login.html用户注册填写用户名、密码及确认密码校验密码一致性、长度至少 6 位、用户名是否重复。用户登录验证用户名与密码成功后写入sessionStorage并跳转至记账首页。Tab 切换同一页面内通过标签切换登录与注册表单操作简洁。2. 记账管理index.html添加记录支持填写日期、金额、类型收入 / 支出、事由提交后保存至当前用户专属记录列表。最近记录展示按时间倒序显示最近 10 条记录收入以绿色「」、支出以红色「−」区分。删除记录单条记录可一键删除数据实时更新。登录保护未登录用户访问时自动跳转至登录页。3. 收支统计stats.html汇总卡片展示当前用户全部记录的总收入与总支出。时间筛选支持按「本周 / 本月 / 本年 / 自定义日期范围」过滤数据。趋势图表基于 ECharts 绘制按日分组的收支柱状图直观对比收入与支出变化。响应式图表窗口尺寸变化时自动重绘图表。4. 个人信息profile.html资料展示显示用户名、头像首字母、邮箱等信息。资料编辑可修改电子邮箱、手机号码支持可选修改密码留空则不更改。取消返回取消编辑后返回记账首页。5. 公共模块script.jsstyle.css公共头部导航记账、统计、个人信息、退出登录各业务页自动注入。公共页脚版权信息展示。登录态校验checkLogin()统一拦截未登录访问。数据初始化首次使用时自动初始化用户与记录存储结构。文件夹目录bookkeeping-note-website/ ├── index.html# 首页 — 记账功能添加 / 查看 / 删除收支记录├── stats.html# 统计页面 — 收支汇总与 ECharts 趋势图├── login.html# 登录注册页面 — 用户认证入口├── profile.html# 个人信息页 — 资料查看与修改├── script.js# 公共脚本 — 登录校验、头部页脚、数据初始化├── style.css# 全局样式 — 主题色、表单、按钮、导航等通用样式├── 项目说明.md# 项目说明文档本文件└── 演示材料/ └── 演示视频.mp4# 项目功能演示视频使用说明使用浏览器直接打开login.html进入系统建议通过本地静态服务器访问避免部分浏览器对file://协议的限制。注册账号并登录后即可在「记账」页添加收支记录。在「统计」页查看汇总数据与图表分析。在「个人信息」页维护个人资料。点击导航栏「退出」清除当前会话并返回登录页。数据说明存储键存储位置说明userslocalStorage全部注册用户列表用户名、密码、邮箱、手机等records_{用户名}localStorage对应用户的记账记录数组currentUsersessionStorage当前登录用户名关闭标签页后失效说明本项目为纯前端演示项目密码明文存储于本地不适用于生产环境。正式产品应接入后端服务并采用加密与鉴权方案。本项目详情https://www.aiyuanma.vip/posts/bookkeeping-note-website