如何将LocalStorage中的测验分数数据后台传输至MySQL数据库？

没问题，我来给你梳理一套完整的实现方案，从前端数据传递到后端存库的每个环节都给你说清楚：

一、前端：收集数据并发送到marks.php #

首先你需要在测验完成的逻辑里，从LocalStorage取出存储的得分和题目数，计算出百分比后，通过AJAX把数据传给后端的marks.php。这里推荐用fetch API，语法简洁且现代。

示例代码： #

// 从LocalStorage获取数据并解析为数字
const userMark = parseFloat(localStorage.getItem('userMark'));
const questionCounter = parseFloat(localStorage.getItem('questionCounter'));

// 先做基础校验，避免除数为0或数据为空的异常
if (!userMark || !questionCounter || questionCounter === 0) {
  alert('数据异常，无法提交得分');
  return;
}

// 计算百分比并保留两位小数
const percentage = (userMark / questionCounter * 100).toFixed(2);

// 发送数据到后端
fetch('marks.php', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: `userMark=${encodeURIComponent(userMark)}&questionCounter=${encodeURIComponent(questionCounter)}&percentage=${encodeURIComponent(percentage)}`
})
.then(response => response.text())
.then(data => {
  console.log('提交结果:', data);
  // 这里可以添加提交成功后的交互，比如显示"得分已保存"提示
})
.catch(error => {
  console.error('提交失败:', error);
  alert('提交失败，请稍后重试');
});

二、后端：marks.php处理请求并写入MySQL #

后端需要接收前端传的参数，验证合法性，然后连接MySQL数据库插入数据。强烈推荐使用PDO而非mysqli，PDO对SQL注入的防护更友好，也支持多种数据库。

1. 先准备数据库表（示例） #

先在MySQL里创建一个存储得分的表，比如quiz_scores：

CREATE TABLE quiz_scores (
  id INT AUTO_INCREMENT PRIMARY KEY,
  user_mark DECIMAL(5,2) NOT NULL, -- 存储用户得分，支持小数
  question_count INT NOT NULL, -- 存储题目数量
  percentage DECIMAL(5,2) NOT NULL, -- 存储百分比得分
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP -- 自动记录提交时间
);

2. marks.php核心代码 #

<?php
// 生产环境禁用错误输出（开发环境可开启调试）
error_reporting(0);
ini_set('display_errors', 0);

// 接收前端POST参数，做默认值处理
$userMark = $_POST['userMark'] ?? '';
$questionCounter = $_POST['questionCounter'] ?? '';
$percentage = $_POST['percentage'] ?? '';

// 参数合法性校验：不能为空且必须是数字
if (empty($userMark) || empty($questionCounter) || empty($percentage) || !is_numeric($userMark) || !is_numeric($questionCounter) || !is_numeric($percentage)) {
  echo '参数非法，请检查数据';
  exit;
}

// 转换为对应的数据库存储类型
$userMark = (float)$userMark;
$questionCounter = (int)$questionCounter;
$percentage = (float)$percentage;

// 替换成你的实际数据库连接信息
$host = 'localhost';
$dbname = 'your_database_name';
$username = 'your_db_username';
$password = 'your_db_password';

try {
  // 初始化PDO连接，设置字符集和错误模式
  $pdo = new PDO("mysql:host=$host;dbname=$dbname;charset=utf8mb4", $username, $password);
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

  // 使用预处理语句（占位符）防止SQL注入
  $stmt = $pdo->prepare("INSERT INTO quiz_scores (user_mark, question_count, percentage) VALUES (:user_mark, :question_count, :percentage)");
  
  // 绑定参数
  $stmt->bindParam(':user_mark', $userMark);
  $stmt->bindParam(':question_count', $questionCounter);
  $stmt->bindParam(':percentage', $percentage);
  
  // 执行插入操作
  $stmt->execute();

  echo '得分已成功保存到数据库';
} catch(PDOException $e) {
  // 生产环境可以返回通用错误，不要泄露具体异常信息
  echo '数据保存失败，请稍后重试';
  // 开发环境可以打印错误日志：error_log($e->getMessage());
}

// PDO会自动关闭连接，这里可选手动销毁
$pdo = null;
?>

三、关键注意事项 #

• 安全防护：
  • 永远不要信任前端传过来的数据，一定要做参数校验（是否为数字、是否为空）。
  • 必须使用PDO预处理语句（占位符），绝对不要直接把变量拼到SQL语句里，防止SQL注入。
  • 生产环境不要把数据库错误信息直接返回给前端，避免泄露敏感信息。
• 数据类型：前端传递的是字符串，后端要转换为对应的数字类型（float/int）再存入数据库，保证数据一致性。
• 异常处理：前端要处理网络请求失败的情况，后端要处理数据库连接失败、插入失败的异常。

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