如何为HTML JS投票类网站实现用户选择数据的存储功能？

客户端JS运行在浏览器环境，没有权限直接修改服务器端的文件或数据库，必须通过后端接口来处理数据的存储逻辑。下面提供两种简单易实现的方案，你可以根据自己的服务器环境选择：

方案一：Node.js + Express 后端 #

如果你的服务器支持Node.js，可以用这个轻量的方案：

1. 搭建后端服务 #

• 先创建一个项目文件夹，初始化并安装依赖：

npm init -y
npm install express cors

• 创建server.js文件，写入以下代码：

const express = require('express');
const cors = require('cors');
const fs = require('fs').promises;
const path = require('path');

const app = express();
app.use(cors());
app.use(express.json());

// 存储投票计数的JSON文件路径
const countFile = path.join(__dirname, 'counts.json');

// 初始化计数文件（如果不存在则创建空对象）
async function initCounts() {
  try {
    await fs.access(countFile);
  } catch {
    await fs.writeFile(countFile, JSON.stringify({}));
  }
}

initCounts();

// 处理投票请求的接口
app.post('/vote', async (req, res) => {
  const { choice } = req.body;
  if (!choice) {
    return res.status(400).json({ error: '缺少选择值' });
  }

  try {
    // 读取当前计数
    const data = await fs.readFile(countFile, 'utf8');
    const counts = JSON.parse(data);
    
    // 更新对应选项的计数
    counts[choice] = (counts[choice] || 0) + 1;
    
    // 写回文件
    await fs.writeFile(countFile, JSON.stringify(counts));
    
    res.json({ success: true });
  } catch (err) {
    console.error(err);
    res.status(500).json({ error: '存储失败' });
  }
});

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

• 启动后端服务：

node server.js

2. 修改前端函数 #

把你原来的b1函数改成这样（另一个按钮的函数同理修改）：

async function b1() {
  const choice = document.getElementById("b1").innerHTML;
  try {
    // 发送投票请求到后端接口
    await fetch('http://localhost:3000/vote', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ choice: choice })
    });
    // 请求成功后刷新页面
    location.reload();
  } catch (err) {
    console.error('投票提交失败:', err);
    // 可选：给用户提示错误，比如 alert('提交失败，请重试')
  }
}

方案二：PHP 后端 #

如果你的服务器是Apache/Nginx支持PHP，这个方案更简单：

1. 创建后端接口文件 #

在你的网站根目录下创建vote.php文件，写入以下代码：

<?php
// 允许跨域请求（如果前端和后端同域名可删除这行）
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/json");

// 获取前端提交的选项值
$choice = $_POST['choice'] ?? null;
if (!$choice) {
  echo json_encode(['error' => '缺少选择值']);
  exit;
}

// 存储计数的JSON文件路径
$countFile = 'counts.json';

// 初始化文件（如果不存在则创建空对象）
if (!file_exists($countFile)) {
  file_put_contents($countFile, json_encode([]));
}

// 读取当前计数
$counts = json_decode(file_get_contents($countFile), true);

// 更新对应选项的计数
$counts[$choice] = isset($counts[$choice]) ? $counts[$choice] + 1 : 1;

// 写回文件
file_put_contents($countFile, json_encode($counts));

echo json_encode(['success' => true]);
?>

2. 修改前端函数 #

把原来的b1函数改成这样：

async function b1() {
  const choice = document.getElementById("b1").innerHTML;
  const formData = new FormData();
  formData.append('choice', choice);
  
  try {
    // 发送请求到PHP接口
    await fetch('vote.php', {
      method: 'POST',
      body: formData
    });
    location.reload();
  } catch (err) {
    console.error('投票提交失败:', err);
  }
}

注意事项 #

• 文件权限：确保服务器对counts.json文件有读写权限，否则会存储失败。
• 跨域问题：如果前端HTML文件和后端接口不在同一个域名下，需要在后端配置CORS（上面的代码已经包含基础配置）。
• 数据量扩展：如果投票量很大，建议用SQLite、MySQL等数据库代替JSON文件，避免文件读写性能问题。

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