Stack Overflow未提交输入留存实现及小型问答应用适配咨询

嘿，这个问题问得好！我来拆解一下Stack Overflow的实现思路，再给你的小问答应用出出主意～

Stack Overflow核心用的是浏览器本地存储（LocalStorage），完全不需要立刻动用数据库。具体逻辑是这样的：

• 它会在你输入内容时，定时（比如每3-5秒）把输入框里的文本同步到LocalStorage中——这是浏览器提供的本地存储能力，数据存在用户自己的浏览器里，不会传到服务器。
• 当你不小心关掉页面、刷新或者返回时，页面加载的第一件事就是检查LocalStorage里有没有对应问题的缓存内容，如果有，就自动把内容填充回输入框里。
• 只有当你点击「提交问题」按钮后，它才会把内容正式写到数据库里，用于永久保存和展示给其他用户。

简单说：未提交的临时内容存在本地，提交后的正式内容才进数据库——这样既高效又不浪费服务器资源。

针对你的需求（保存用户的Yes/No/Maybe选择和对应分值，退出后返回能查看），分两种场景来选方案：

场景1：不需要跨设备同步，只在当前浏览器保存 #

这种情况完全不需要数据库，用LocalStorage就足够了，简单又省心：

• 当用户选择一个选项时，立刻把选择的答案、对应分值（甚至总分）存入LocalStorage。比如用一个键值对，键叫quiz_user_data，值是个JSON对象，像{q1: "Yes", q1_score: 3, total_score: 3}。
• 页面加载时，先读取LocalStorage里的quiz_user_data，如果存在，就把之前的选择状态（比如把对应的单选框设为选中）和总分显示出来。

给你一个极简的代码示例参考：

// 保存用户的选择
function saveUserChoice(questionId, answer, score) {
  // 先读取已有的保存数据，没有就初始化空对象
  const savedData = JSON.parse(localStorage.getItem('quiz_user_data')) || {};
  // 存入当前问题的答案和分值
  savedData[questionId] = { answer, score };
  // 计算并更新总分
  savedData.totalScore = Object.values(savedData)
    .filter(item => item.score)
    .reduce((sum, item) => sum + item.score, 0);
  // 写回LocalStorage
  localStorage.setItem('quiz_user_data', JSON.stringify(savedData));
}

// 页面加载时恢复用户的选择
function loadUserChoices() {
  const savedData = JSON.parse(localStorage.getItem('quiz_user_data'));
  if (!savedData) return;

  // 恢复每个问题的选中状态
  Object.keys(savedData).forEach(key => {
    if (key === 'totalScore') return;
    const questionEl = document.querySelector(`[data-question="${key}"]`);
    if (questionEl) {
      const answerOption = questionEl.querySelector(`[data-answer="${savedData[key].answer}"]`);
      if (answerOption) answerOption.checked = true;
    }
  });

  // 显示总分
  document.getElementById('total-score').textContent = savedData.totalScore || 0;
}

// 页面加载完成后自动恢复数据
window.addEventListener('DOMContentLoaded', loadUserChoices);

场景2：需要跨设备同步/长期永久保存 #

如果你的用户需要换手机、换电脑还能看到之前的作答结果，那就要用到数据库了：

• 前端可以用IndexedDB（纯前端的本地数据库，存储量比LocalStorage大很多），适合不需要后端的纯前端应用；
• 如果有后端的话，用轻量级的数据库比如SQLite、Firebase实时数据库都很合适——用户需要登录（比如用邮箱、手机号），把用户ID和作答数据关联起来，存在服务器端的数据库里，这样跨设备登录就能读取到数据了。

• LocalStorage的存储上限大概是5MB，对于你的小问答应用来说完全够用；
• 用LocalStorage时，记得用JSON.stringify和JSON.parse处理对象，不然存进去的是字符串，不好读取；
• 如果只是临时保存（比如用户关掉页面就可以丢失），可以用SessionStorage代替LocalStorage，它的生命周期只在当前浏览器标签页。

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