如何修改JSON文件键值以实现持久化问答计数器？

嘿，我完全懂你的困扰——你现在的代码只是在当前会话的内存里修改了JSON对象，刷新页面或者换用户访问，数据就重置了对吧？这是因为浏览器环境下的JavaScript受安全限制，根本没权限直接读写服务器上的JSON文件，必须靠后端代码来完成文件的持久化操作。

下面给你一套完整的解决方案，用Node.js + Express做后端处理文件读写，前端通过请求触发计数更新：

第一步：后端实现文件读写接口 #

后端负责接收前端的更新请求，读取JSON文件、修改计数、再写回文件。

首先初始化项目并安装依赖：

npm init -y
npm install express

然后创建后端代码（比如server.js）：

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();

// 解析前端发送的JSON请求体
app.use(express.json());

// 接口：获取指定问题的当前计数
app.post('/get-count', (req, res) => {
  const { questionId } = req.body;
  const jsonPath = path.join(__dirname, 'questions.json'); // 你的JSON文件路径

  try {
    const data = fs.readFileSync(jsonPath, 'utf8');
    const questions = JSON.parse(data);
    
    // 根据你的JSON结构调整查找逻辑，这里假设是问题数组
    const targetQuestion = questions.find(q => q.id === questionId);
    if (!targetQuestion) {
      return res.status(404).json({ success: false, message: '问题未找到' });
    }

    res.json({ 
      success: true, 
      count: targetQuestion.answerCount || 0 
    });
  } catch (err) {
    console.error(err);
    res.status(500).json({ success: false, message: '获取计数失败' });
  }
});

// 接口：增加指定问题的回答计数
app.post('/increment-count', (req, res) => {
  const { questionId } = req.body;
  const jsonPath = path.join(__dirname, 'questions.json');

  try {
    const data = fs.readFileSync(jsonPath, 'utf8');
    const questions = JSON.parse(data);
    
    const targetQuestion = questions.find(q => q.id === questionId);
    if (!targetQuestion) {
      return res.status(404).json({ success: false, message: '问题未找到' });
    }

    // 计数自增，默认从0开始
    targetQuestion.answerCount = (targetQuestion.answerCount || 0) + 1;

    // 写回JSON文件，格式化缩进方便查看
    fs.writeFileSync(jsonPath, JSON.stringify(questions, null, 2), 'utf8');
    res.json({ success: true, count: targetQuestion.answerCount });
  } catch (err) {
    console.error(err);
    res.status(500).json({ success: false, message: '更新计数失败' });
  }
});

// 托管前端静态文件（假设前端文件在public文件夹）
app.use(express.static('public'));

app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});

第二步：前端触发计数更新与展示 #

前端在页面加载时获取当前计数，用户提交回答时发送请求更新计数：

创建前端HTML文件（比如public/index.html）：

<div>
  <h3>问题1：something</h3>
  <button id="submitAnswer">提交回答</button>
  <p>该问题已被回答 <span id="answerCount">0</span> 次</p>
</div>

<script>
const currentQuestionId = '1'; // 当前问题的ID，根据实际场景获取
const submitBtn = document.getElementById('submitAnswer');
const countDisplay = document.getElementById('answerCount');

// 页面加载时获取初始计数
function loadCount() {
  fetch('/get-count', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ questionId: currentQuestionId })
  })
  .then(res => res.json())
  .then(data => {
    if (data.success) {
      countDisplay.textContent = data.count;
    }
  });
}

// 提交回答时更新计数
submitBtn.addEventListener('click', () => {
  fetch('/increment-count', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ questionId: currentQuestionId })
  })
  .then(res => res.json())
  .then(data => {
    if (data.success) {
      countDisplay.textContent = data.count;
      alert('回答提交成功！');
    } else {
      alert('提交失败，请重试');
    }
  });
});

// 页面加载完成后初始化计数
window.onload = loadCount;
</script>

关键注意事项 #

• 文件权限：确保运行后端的进程拥有JSON文件的读写权限，否则会抛出权限错误。
• 并发问题：如果多个用户同时提交回答，直接读写JSON文件可能出现竞态条件（比如两个请求同时读文件，修改后写回导致计数丢失）。用户量较大时，建议用数据库（如SQLite、MySQL）替代JSON文件，数据库会自动处理并发冲突。
• LocalStorage局限性：如果只是单个用户记录自己的回答次数，LocalStorage可以用，但无法实现跨用户的全局计数，不符合你的需求。

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