如何在 JavaScript 测验中保留用户选择的主题

方案一：使用localStorage保存用户主题

该解决方案使用 JavaScript 和 localStorage 来存储和检索用户在测验问题之间选择的主题，确保即使在页面重新加载后它仍然存在。

// Function to save the theme to localStorage
function saveTheme(theme) {
  localStorage.setItem('selectedTheme', theme);
}

// Function to apply the saved theme
function applyTheme() {
  const savedTheme = localStorage.getItem('selectedTheme');
  if (savedTheme) {
    document.querySelectorAll('.customizable').forEach(element => {
      element.classList.add(savedTheme);
    });
  }
}

// Function to handle theme change
function popUp() {
  document.querySelector('#Serpentard').addEventListener('click', () => {
    resetTheme();
    applyClass('Serpentard');
    saveTheme('Serpentard');
  });

  // Similar logic for other house buttons
}

// Call the applyTheme function on page load
window.onload = applyTheme;

方案二：使用sessionStorage临时保存用户主题

此方法利用 sessionStorage 在单个会话期间存储主题。浏览器关闭后，主题将重置。

// Function to save the theme to sessionStorage
function saveThemeSession(theme) {
  sessionStorage.setItem('selectedTheme', theme);
}

// Function to apply the saved theme
function applyThemeSession() {
  const savedTheme = sessionStorage.getItem('selectedTheme');
  if (savedTheme) {
    document.querySelectorAll('.customizable').forEach(element => {
      element.classList.add(savedTheme);
    });
  }
}

// Function to handle theme change
function popUp() {
  document.querySelector('#Serpentard').addEventListener('click', () => {
    resetTheme();
    applyClass('Serpentard');
    saveThemeSession('Serpentard');
  });

  // Similar logic for other house buttons
}

// Call the applyTheme function on page load
window.onload = applyThemeSession;

解决方案 3：使用 URL 参数传递主题

在此方法中，主题作为 URL 参数传递。这使您可以直接链接到预先选择的主题的测验。

// Function to get URL parameter
function getParameterByName(name) {
  const url = new URL(window.location.href);
  return url.searchParams.get(name);
}

// Function to apply theme from URL
function applyThemeFromURL() {
  const theme = getParameterByName('theme');
  if (theme) {
    document.querySelectorAll('.customizable').forEach(element => {
      element.classList.add(theme);
    });
  }
}

// Event listener to append theme to URL when selected
function popUp() {
  document.querySelector('#Serpentard').addEventListener('click', () => {
    resetTheme();
    applyClass('Serpentard');
    window.history.replaceState({}, '', '?theme=Serpentard');
  });

  // Similar logic for other house buttons
}

// Apply theme based on URL parameter
window.onload = applyThemeFromURL;

关于保存 JavaScript 函数和主题的常见问题

1. 如何在页面重新加载时存储选定的主题？
2. 你可以使用 localStorage.setItem() 和 localStorage.getItem() 保存用户选择的主题并在页面重新加载时检索它。
3. localStorage 和 sessionStorage 有什么区别？
4. localStorage 永久存储数据直到手动清除，同时 sessionStorage 仅在浏览器会话期间保留数据。
5. 如何在 URL 中传递所选主题？
6. 使用 URLSearchParams 获取主题并将其设置为 URL 参数，从而允许通过链接共享主题。
7. Cookie 与存储主题的 localStorage 相比如何？
8. Cookies 提供对过期的更多控制，并且可以与服务器请求一起发送，这与 localStorage，这严格来说是客户端的。
9. 页面加载时如何应用保存的主题？
10. 使用 window.onload 事件来检查主题是否已存储并在页面加载时自动应用它。

关于修复测验中主题重置问题的最终想法

在动态测验中保存用户选择的主题对于个性化体验至关重要。主要问题是确保所选主题不会在每个问题后重置，这可以通过应用不同的存储解决方案来解决。

使用 JavaScript 函数，例如 本地存储、URL 参数和会话变量可确保测验始终保持选定的主题。实施这些修复可以创造更流畅的用户体验，并提供身临其境的、以房子为主题的哈利·波特测验。