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

为什么您的测验主题不断重置（以及如何修复它）

创建交互式网络测验时，用户自定义可添加个人风格，从而增强体验。在以哈利·波特为主题的测验中，能够在学院主题（例如斯莱特林或格兰芬多）之间切换是一个很棒的功能。但是，您可能遇到了一个常见问题：每个问题后主题都会重置，让用户感到沮丧。

出现此问题的原因是当前主题在问题加载之间未正确保存。如果无法记住用户的选择，每次显示新问题时都会应用默认设置。解决这个问题非常重要，这样用户在完成测验时就会感觉沉浸在他们选择的房子里。

幸运的是，JavaScript 提供了使用浏览器存储方法来存储用户选择的主题的方法，例如 或会话变量。通过实施此解决方案，您可以确保主题在用户完成测验时保持一致。这样，个性化体验就不会中断。

在本指南中，我们将介绍如何使用 JavaScript 保存选定的主题。最后，您的测验将在整个会话过程中保留用户的选择，为他们提供无缝的体验。让我们深入探讨解决方案！

命令	使用示例
localStorage.setItem()	该命令将键值对存储在浏览器的本地存储中。在脚本中，它用于永久保存所选主题，即使在页面重新加载后也是如此。
localStorage.getItem()	从本地存储中检索指定键的值。重新加载页面时加载保存的主题至关重要，以确保用户的选择保持一致。
sessionStorage.setItem()	该命令将键值对存储在会话存储中。它确保仅在用户会话期间维护所选主题，并在浏览器关闭后重置。
sessionStorage.getItem()	从会话存储中检索值。这允许用户的主题在整个会话中持续存在，而无需使用本地存储，从而提供了临时主题存储解决方案。
URLSearchParams.get()	此命令从 URL 中提取特定参数。它在脚本中用于从 URL 检索主题参数，从而能够根据提供的链接应用主题。
window.history.replaceState()	更新浏览器中的 URL，而不刷新页面。该命令用于在用户选择房屋时将主题作为 URL 参数附加，确保 URL 反映当前主题。
window.onload	当整个页面（HTML、图像等）加载完毕时，会触发此事件。在脚本中，它确保页面根据存储的数据或 URL 参数完成加载后立即应用主题。
document.querySelectorAll()	选择与指定 CSS 选择器匹配的所有元素。在这种情况下，它用于定位需要应用所选主题的元素，使整个页面的更改保持一致。
classList.add()	将特定类添加到元素的类列表中。此命令用于将选定的房屋主题应用于可自定义的元素，从而允许页面上的视觉变化。

如何在动态测验中保存用户选择的主题

上面提供的 JavaScript 脚本旨在解决在测验中保留用户选择的主题的问题。这在互动测验中尤其重要，例如以哈利·波特宇宙为主题的测验，用户可以在斯莱特林、格兰芬多或赫奇帕奇等学院主题之间切换。如果没有正确的处理，每次用户回答问题时所选主题都会重置并显示下一个主题。这些脚本的主要目标是确保用户选择主题后，它会在整个测验中一致应用。

一种解决方案涉及使用 或者 ，这两者都是现代浏览器提供的存储机制。 LocalStorage 允许您永久存储所选主题，这意味着即使刷新页面或关闭浏览器，它仍然可用。每当用户选择房屋时，都会通过在 localStorage 中设置主题来保存主题，然后在页面再次加载时检索已保存的主题。另一方面，SessionStorage 的工作原理类似，但仅保存当前会话期间的数据。一旦会话结束，数据就会丢失，使其变得更加临时。

另一种方法涉及操纵 。当您希望主题反映在 URL 中时，此解决方案非常有用，允许用户共享保留所选主题的链接。此方法使用 JavaScript 将所选主题作为参数附加到 URL 中，并在页面加载时检索它。通过使用当前主题修改浏览器的 URL，此方法可确保用户在使用该链接返回测验时可以直接加载特定主题。这也有助于创建保留主题信息的可共享链接。

这些方法中的每一种，无论是使用 localStorage、sessionStorage 还是 URL 参数，都解决了保留用户设置的主要挑战。它通过在与测验的交互过程中保持所需的定制来增强整体用户体验。这些脚本还包括模块化功能，例如 和 ，确保代码保持有组织、可重用且易于维护。这些函数处理 CSS 类的删除和添加以更新页面外观，确保每次都正确应用所选主题。

// 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;

// 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;

// 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 的 Web 测验的主题持久性

在动态 Web 应用程序（例如测验）中创建无缝用户体验的一个重要方面是确保用户选择的设置（例如主题）在页面刷新或更改时得以保留。在以哈利波特为主题的测验中，这意味着确保在用户完成测验时保留所选学院（例如斯莱特林或格兰芬多）。出现此问题的原因是，除非经过专门编程，否则一旦页面重新加载或移动到另一个部分，JavaScript 函数就不会保留状态。

解决此问题的另一种方法是使用 cookie 来存储所选主题。饼干之类的 ，允许在用户的浏览器中存储数据，但它们在过期时间方面提供了更大的灵活性，并且会随每个请求发送到服务器。在测验应用程序中，用户首选项（例如主题）很重要，将这些首选项存储在 cookie 中可以确保持久性，即使用户稍后返回也是如此。当需要长期会话时，这特别有用。

另一种可以考虑的方法是利用 React 或 Vue.js 等现代前端框架。这些框架提供内置的状态管理工具，可以存储和维护测验的状态，包括所选主题。通过处理这些框架的组件架构内的状态，您可以确保维护用户选择，而无需编写大量的自定义逻辑。状态持久性是保持测验对用户具有响应性和吸引力、确保尊重他们的偏好的关键。

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

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

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