无需数据库保存HTML/JavaScript复习器输入与功能的方案问询

要在不依赖数据库的前提下保留页面重载后的内容，浏览器内置的localStorage是最适合的方案——它可以在用户本地持久存储字符串格式的数据，页面刷新或重新打开后仍可读取。以下是修改后的完整代码，核心逻辑已适配持久化需求：

关键修改说明 #

• 数据结构设计：用数组存储所有问答对，每个条目是包含question（问题文本）和answer（答案文本）的对象，通过JSON.stringify转为字符串存入localStorage
• 页面初始化渲染：页面加载时自动读取localStorage中的数据，生成对应的问答元素并绑定所有交互事件
• 同步存储更新：新增问答或删除问答时，立即更新localStorage中的数据，确保数据一致
• 交互事件重绑定：重新渲染元素时，为每个答案区块绑定鼠标悬停显示/隐藏的逻辑，为删除按钮绑定删除并同步存储的逻辑

<!DOCTYPE html>
<html>

<head>
  <style>
    .question {
      font-weight: bold;
      font-size: 20px;
    }

    .highlight {
      background-color: black;
      color: black; /* 加上文字颜色，确保被遮挡时完全不可见 */
    }
  </style>
</head>

<body>
  <h1>Simple Reviewer</h1>

  <label for="question">Question:</label>
  <br>
  <input type="text" id="question" name="question" size="50" required />
  <br>
  <label for="answer">Answer:</label>
  <br>
  <textarea id="answer" name="answer" rows="4" cols="50" required></textarea>
  <br>
  <button type="button" onclick="getQuestion()">Enter</button>
  <br>
  <h2>Questions</h2>
  <div id="questionContainer"></div>

  <script>
    // 从localStorage读取存储的问答数据，无数据则返回空数组
    function getStoredReviews() {
      const stored = localStorage.getItem('reviewItems');
      return stored ? JSON.parse(stored) : [];
    }

    // 将问答数据保存到localStorage
    function saveReviews(reviews) {
      localStorage.setItem('reviewItems', JSON.stringify(reviews));
    }

    // 渲染所有问答项到页面
    function renderReviews() {
      const questionContainer = document.getElementById("questionContainer");
      questionContainer.innerHTML = ''; // 清空容器避免重复渲染
      const reviews = getStoredReviews();

      reviews.forEach((item, index) => {
        // 创建问题元素
        const questionDiv = document.createElement("div");
        questionDiv.className = "question";
        questionDiv.textContent = item.question;
        questionContainer.appendChild(questionDiv);

        // 创建答案元素
        const answerDiv = document.createElement("pre");
        answerDiv.textContent = item.answer;
        answerDiv.className = "answer highlight";
        questionContainer.appendChild(answerDiv);

        // 绑定鼠标悬停显示/隐藏答案的事件
        answerDiv.addEventListener("mouseenter", function () {
          answerDiv.classList.remove("highlight");
        });
        answerDiv.addEventListener("mouseleave", function () {
          answerDiv.classList.add("highlight");
        });

        // 创建删除按钮并绑定逻辑
        const removeButton = document.createElement("button");
        removeButton.textContent = "Remove";
        removeButton.onclick = function () {
          // 删除对应条目并更新存储
          const updatedReviews = reviews.filter((_, i) => i !== index);
          saveReviews(updatedReviews);
          // 重新渲染页面
          renderReviews();
        };

        questionContainer.appendChild(removeButton);
        questionContainer.appendChild(document.createElement("br"));
      });
    }

    // 添加新问答的逻辑
    function getQuestion() {
      const questionText = document.getElementById("question").value.trim();
      const answerText = document.getElementById("answer").value.trim();

      if (questionText && answerText) {
        const reviews = getStoredReviews();
        // 添加新问答条目
        reviews.push({ question: questionText, answer: answerText });
        saveReviews(reviews);
        // 重新渲染页面
        renderReviews();

        // 清空输入框
        document.getElementById("question").value = "";
        document.getElementById("answer").value = "";
      }
    }

    // 页面加载完成后自动渲染已有数据
    window.addEventListener('load', renderReviews);
  </script>

</body>

</html>

额外优化：原代码中.highlight仅设置背景色，新增color: black确保文字与背景同色，实现完全遮挡答案的效果。

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