React.js会话控制：问答应用意外中断后的用户答案持久化方案咨询

Hey there! Let's work through this problem together—you want to save users' partial answers without hitting your backend on every single input, and make sure those answers stick around even if their device dies or they close the browser. Here are the best approaches tailored to your React app:

首选方案：利用localStorage做客户端持久化 #

localStorage is perfect here because it’s persistent (data stays even after browser restarts), easy to use, and requires zero backend calls until the user submits all answers. Here’s how to implement it in your React component:

1. 初始化状态时读取已存答案 #

When your component loads, check localStorage for any previously saved answers related to the knee questionnaire. Use this to populate your initial state:

import { useState, useEffect } from 'react';

const KneeQuestionnaire = () => {
  // 从localStorage加载已保存的答案，没有则初始化为空对象
  const [answers, setAnswers] = useState(() => {
    const savedAnswers = localStorage.getItem('knee-questionnaire-answers');
    return savedAnswers ? JSON.parse(savedAnswers) : {};
  });

  // ...后续逻辑
};

2. 实时同步答案到localStorage #

Set up an effect that listens for changes to your answers state, and saves the updated state to localStorage every time an answer changes. This ensures no progress is lost:

useEffect(() => {
  // 把答案对象转为字符串存到localStorage
  localStorage.setItem('knee-questionnaire-answers', JSON.stringify(answers));
}, [answers]); // 仅当answers变化时触发

3. 处理单个答案的更新 #

Create a handler function to update your answers state whenever the user types an answer. This will automatically trigger the effect above to save to localStorage:

const handleAnswerChange = (questionId, answerValue) => {
  setAnswers(prevAnswers => ({
    ...prevAnswers,
    [questionId]: answerValue // 用问题ID作为键，方便后续对应
  }));
};

4. 提交后清理存储 #

Once the user submits all answers successfully, clear the saved data from localStorage so old answers don’t show up if they start a new questionnaire later:

const handleSubmit = async () => {
  try {
    // 一次性把所有答案发给后端
    const response = await fetch('/api/submit-knee-responses', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(answers)
    });

    if (response.ok) {
      // 提交成功，清除localStorage中的旧数据
      localStorage.removeItem('knee-questionnaire-answers');
      // 这里可以添加成功提示、页面跳转等逻辑
    }
  } catch (error) {
    console.error('Failed to submit answers:', error);
    // 处理提交失败的情况，比如提示用户重试
  }
};

备选方案：IndexedDB（针对更复杂的场景） #

If you ever need to store larger amounts of data, or more complex data structures (like files or nested objects), IndexedDB is a better fit. It’s a client-side database that’s more powerful than localStorage, but comes with a steeper learning curve. For your current use case though, localStorage is more than sufficient.

额外优化建议 #

• 命名空间隔离: Use a specific key like knee-questionnaire-answers instead of a generic one, so you don’t conflict with other parts of your app or other apps on the same domain.
• 敏感数据加密: If the questionnaire includes sensitive medical information, consider encrypting the answers before storing them in localStorage to protect user privacy.
• 问卷切换处理: If your app supports multiple body parts (like knee, elbow, etc.), make sure to clear the relevant localStorage key when the user switches to a different questionnaire, so they don’t see answers from a previous one.

Hope this gives you a clear, cost-effective way to keep users' progress safe! Let me know if you need help tweaking any part of this for your specific app.

备注：内容来源于stack exchange，提问作者Ramesh