HTML Session data无法保存且页面意外清空，多问题存储故障咨询

Hey there, let's break down your problems step by step and get that quiz saving working properly!

First: Can You Save Radio Button States to Session/Local Storage? #

Absolutely—this is exactly the solution you need for both your data loss and single-question limitations. Both storage APIs let you persist string data, so we just need to package your quiz state into a JSON string and store it.

Why Your Current Setup Isn't Working #

1. Session Data Loss: Chances are you weren't serializing your data to a string (sessionStorage/localStorage only store strings) or you weren't reloading the state when the page loads. Without that, your data vanishes when the page refreshes.
2. Single-Question Limit: Copying the postquestion function and changing a number doesn't scale because it's hardcoding individual question IDs. You need a dynamic way to collect data from all 16 questions at once instead of handling them one by one.

Step-by-Step Fix #

1. Dynamic Data Collection & Storage #

Replace your existing single-question save logic with this function that handles all 16 questions:

// Save all quiz data to both sessionStorage and localStorage
function saveQuizState() {
  const quizState = [];
  
  // Loop through all 16 questions
  for (let qNum = 1; qNum <= 16; qNum++) {
    const questionName = `question${qNum}`;
    // Get the selected radio value for this question
    const selectedAnswer = document.querySelector(`input[name="${questionName}"]:checked`)?.value;
    
    quizState.push({
      questionNumber: qNum,
      selectedAnswer: selectedAnswer
    });
  }
  
  // Store as JSON strings (required for storage APIs)
  sessionStorage.setItem('quizSession', JSON.stringify(quizState));
  localStorage.setItem('quizLocal', JSON.stringify(quizState));
}

2. Restore State When the Page Loads #

Add this to reload your saved state whenever the page opens or refreshes:

// Restore radio button states from storage
function loadQuizState() {
  // Try sessionStorage first, fall back to localStorage if needed
  let savedState = JSON.parse(sessionStorage.getItem('quizSession')) || JSON.parse(localStorage.getItem('quizLocal'));
  
  if (!savedState) return;
  
  // Loop through saved data and check the corresponding radio buttons
  savedState.forEach(question => {
    const targetRadio = document.querySelector(`input[name="question${question.questionNumber}"][value="${question.selectedAnswer}"]`);
    if (targetRadio) targetRadio.checked = true;
  });
}

// Run when the page finishes loading
window.addEventListener('DOMContentLoaded', loadQuizState);

3. Auto-Save When Selections Change #

Make sure your data saves automatically whenever a user selects an option:

// Add change listeners to all radio buttons
document.querySelectorAll('input[type="radio"]').forEach(radio => {
  radio.addEventListener('change', saveQuizState);
});

// Also save right before the page closes/refreshes as a safety net
window.addEventListener('beforeunload', saveQuizState);

How This Fixes Your Problems #

• No More Data Loss: By serializing and storing your quiz state, it persists through page refreshes. SessionStorage keeps data until the browser tab closes; localStorage keeps it even after the browser restarts.
• Supports 16 Questions: The loop dynamically collects data from every question, so you don't need to write 16 separate functions. Just make sure each question's radio buttons use a consistent name attribute like question1, question2, ..., question16.

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