如何通过Node.js将LocalStorage中的用户名与测验分数存入MongoDB

因为Node.js运行在服务器端，确实没法直接读取浏览器的LocalStorage，核心思路是让前端主动把数据发给后端，后端再存到MongoDB，分三步来做，全程用最简单的代码：

第一步：搭Node.js后端接口 #

先准备后端的基础环境，用来接收前端数据并连接MongoDB：

1. 初始化项目&装依赖 #

打开终端，新建一个文件夹，执行下面的命令：

# 初始化项目（自动生成package.json）
npm init -y
# 安装需要的工具：express做接口，mongoose连MongoDB，cors处理跨域
npm install express mongoose cors

2. 写后端代码（server.js） #

新建server.js文件，复制下面的代码：

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
const app = express();

// 允许跨域请求（解决前后端端口不同的报错）
app.use(cors());
// 解析前端发过来的JSON数据
app.use(express.json());

// 连接本地MongoDB数据库，quizDB是数据库名，不存在会自动创建
mongoose.connect('mongodb://localhost:27017/quizDB')
  .then(() => console.log('MongoDB连接成功'))
  .catch(err => console.log('连接失败：', err));

// 定义数据模型：对应MongoDB里的"scores"集合（自动变复数）
const ScoreSchema = new mongoose.Schema({
  username: String, // 用户名
  score: Number     // 分数
});
const Score = mongoose.model('Score', ScoreSchema);

// 写接收分数的POST接口
app.post('/save-score', async (req, res) => {
  try {
    // 从请求体里拿前端发的用户名和分数
    const { username, score } = req.body;
    // 创建新的分数记录
    const newScore = new Score({ username, score });
    // 保存到数据库
    await newScore.save();
    res.send('分数保存成功');
  } catch (err) {
    res.status(500).send('保存失败：' + err.message);
  }
});

// 启动服务器，监听3000端口
app.listen(3000, () => {
  console.log('后端服务器运行在 http://localhost:3000');
});

第二步：前端把LocalStorage数据发给后端 #

在你的前端分数页面，找到合适的时机（比如用户点击"保存分数"按钮，或者页面加载完成时），加入这段JS代码：

// 从LocalStorage里取出之前存的用户名和分数
const username = localStorage.getItem('username');
const scoreStr = localStorage.getItem('score');
// 注意：LocalStorage存的都是字符串，把分数转成数字
const score = parseInt(scoreStr);

// 发送POST请求到后端接口
fetch('http://localhost:3000/save-score', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  // 把数据转成JSON格式发过去
  body: JSON.stringify({ username, score })
})
.then(response => response.text())
.then(result => {
  console.log(result); // 控制台会打印"分数保存成功"
  // 这里可以加个弹窗提示用户，比如alert('分数已保存')
})
.catch(error => {
  console.error('发送数据出错：', error);
});

第三步：测试整个流程 #

1. 确保你的本地MongoDB服务已经启动（默认端口27017，没装的话先装MongoDB）
2. 启动后端：在终端里进入后端文件夹，执行node server.js，看到"MongoDB连接成功"和服务器地址就说明没问题
3. 打开前端页面，完成测验后触发保存逻辑，之后可以用MongoDB的可视化工具（比如Compass）查看quizDB数据库里的scores集合，就能看到存进去的用户名和分数了

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