Codepen考勤系统数据存储问题：数据库入门与实现方案咨询

1. 数据库和“保存/加载”的关系 #

数据库本质上是专门用来高效存储、管理、查询数据的系统，你可以把它理解成升级版的“保存/加载”：普通保存可能是存成文本或JSON文件，而数据库能更方便地按条件筛选数据（比如快速找出张三这个月的考勤记录）、批量修改内容，还能更好地保证数据的安全性和完整性。

2. Codepen里能不能用数据库？ #

Codepen是前端代码在线运行平台，没法直接创建MySQL这类服务器端数据库，但可以用前端本地存储方案替代：

• localStorage：简单的键值对存储，适合存少量考勤数据，页面刷新后数据不会丢失，但清除浏览器缓存时数据会被删除
• IndexedDB：浏览器内置的本地数据库，支持存储更复杂、体量更大的数据，更适配考勤系统的需求

举个localStorage存考勤的简单示例：

// 保存考勤记录
function saveAttendance(name, date, status) {
  const records = JSON.parse(localStorage.getItem('attendanceRecords')) || [];
  records.push({name, date, status});
  localStorage.setItem('attendanceRecords', JSON.stringify(records));
}

// 加载考勤记录
function loadAttendance() {
  return JSON.parse(localStorage.getItem('attendanceRecords')) || [];
}

如果要使用真正的服务器端数据库，需要把代码部署到自己的服务器（用VS Code写好代码后部署即可），VS Code只是代码编辑器，本身也不能创建数据库，只是用来编写操作数据库的代码。

3. 初学者数据库入门核心要点 #

• 核心概念：
  • 表：类似Excel的工作表，每一行是一条数据（比如一条考勤记录），每一列对应一个数据属性（姓名、日期、考勤状态）
  • 字段：就是表的列，比如“姓名”“日期”都是字段
  • 主键：唯一标识每条数据的字段，比如给每条考勤记录分配一个唯一ID
• 入门步骤：
  1. 先学基础SQL（数据库操作语言）：掌握SELECT（查询数据）、INSERT（添加数据）、UPDATE（修改数据）、DELETE（删除数据）这几个核心命令
  2. 从简单的本地数据库练手：比如SQLite（文件型数据库，无需安装服务器），或者浏览器的IndexedDB
  3. 再接触服务器端数据库：比如MySQL，搭配简单的后端（比如Node.js）实现前后端的数据交互

4. 极简考勤系统带存储示例源码 #

以下是用localStorage实现的基础考勤系统：

<div>
  <input type="text" id="nameInput" placeholder="输入姓名">
  <select id="statusSelect">
    <option value="出勤">出勤</option>
    <option value="迟到">迟到</option>
    <option value="缺勤">缺勤</option>
  </select>
  <button onclick="addRecord()">添加考勤</button>
</div>
<ul id="recordList"></ul>

<script>
function addRecord() {
  const name = document.getElementById('nameInput').value;
  const status = document.getElementById('statusSelect').value;
  const date = new Date().toLocaleDateString();
  
  if (!name) {
    alert('请输入姓名');
    return;
  }
  
  // 保存到localStorage
  const records = JSON.parse(localStorage.getItem('attendance')) || [];
  records.push({name, date, status});
  localStorage.setItem('attendance', JSON.stringify(records));
  
  // 更新页面显示
  renderRecords();
  // 清空输入框
  document.getElementById('nameInput').value = '';
}

function renderRecords() {
  const list = document.getElementById('recordList');
  const records = JSON.parse(localStorage.getItem('attendance')) || [];
  
  list.innerHTML = '';
  records.forEach((record, index) => {
    const li = document.createElement('li');
    li.textContent = `${index+1}. ${record.name} - ${record.date} - ${record.status}`;
    list.appendChild(li);
  });
}

// 页面加载时自动渲染已有记录
window.onload = renderRecords;
</script>

内容的提问来源于stack exchange，提问作者Jose renzo