Javascript 如何在保留页面内容的同时创建“上一步”和“下一步”按钮

您好，我已经编写了这个程序，我有一个带有复选框的“上一个”和“下一个”按钮，用户需要在其中选择回答一个问题，但我希望它的方式是，当用户单击“上一个”按钮时，他/她可以返回并更改他/她选择的答案，并且在更改之前应该看到先前选择的答案

这是我的密码：

<a href="layout.php?userid=<?php echo $userid."&id="; $r = $id-1; 
                      if($r == 0){
                        $r=1;
                      }
                    echo $r."&name=".$name; ?>"><button class="btn btn-dark">PREVIOUS</button></a>


                    <a href="layout.php?userid=<?php 
                    echo $userid."&id=";
                      if($Question == "<h1>No More Questions</h1>")
                      {
                        $r = $id;
                        $word ="";
                        $mark = "";
                      }
                      else{
                        $r = $id +1;
                      }

                      echo $r."&name=".$name;
                    ?>">
                    <button class="btn btn-dark" style="float: right" name="next">NEXT</button></a>


                    <div class="well" style="margin-top: 20px; height: 85px;">
                    <form action="layout.php?id= <?php echo $id."&name=".$name; ?>" method="post" >
                        <input type="checkbox" name="a">A.<?php echo $a ?>
                        <input type="checkbox" name="b" style="margin-left: 10px;">B. <?php echo $b ?>
                        <input type="checkbox" name="c" style="margin-left: 10px;">C. <?php echo $c ?>
                        <input type="checkbox" name="d" style="margin-left: 10px;">D.  <?php echo $d ?>

            <!-- <input type="text" name="todo" > -->
                        <input type="submit" name="submit" class="btn btn-cool" style="float: right">

                    </form>

                    <?php 
            if(isset($_POST['submit']))
{
        if(isset($_POST['a']))
          {
              if($a == $answer){
                echo 'correct';
              }
              else{
                echo 'wrong';
              }

          }


          if(isset($_POST['b']))
          {
              if($b == $answer){
                echo 'correct';
              }
              else{
                echo 'wrong';
              }

          }
          if(isset($_POST['c']))
          {
             if($c == $answer){
                echo 'correct';
              }
              else{
                echo 'wrong';
              }

          }
          if(isset($_POST['d']))
          {
              if($d == $answer){
                echo 'correct';
              }
              else{
                echo 'wrong';
              }

          }
}


           ?>

您可以使用
localStorage

localStorage.setItem(key, value)
localStorage.getItem(key)

资料来源：

您可以在转到下一页之前保存答案，在页面加载时，您只需从localStorage获取答案并处理对加载对象的修改。然后在下一页再次保存

如果要将所有答案保存在数组或对象中，请不要忘记设置项目时使用
JSON.stringify（）
，获取项目时使用
JSON.parse（）

添加的代码段
您可以根据从localStorage加载的对象以编程方式设置输入：


//const storage=JSON.parse（localStorage.getItem（'answers'））
//localStorage.getItem（）模拟数据
常数存储={
第1页答案：3，
第2页答案：1
}
//基于从localStorage加载的数据设置答案
函数setAnswer（pageNum、ansNum、val）{
document.getElementById（`ans${pageNum}{UU${ansNum}`）。checked=val
}
// 
//用于设置/清除已检查无线电输入的模拟功能
const btnPage1=document.getElementById（'setAnswerPage1'）
const btnPage2=document.getElementById（'setAnswerPage2'）
btnPage1.addEventListener（'click'，函数（e）{
设置应答（1，storage.page1Answer，true）
})
btnPage2.addEventListener（'click'，函数（e）{
设置应答（2，storage.page2Answer，true）
})
const btnClear=document.getElementById（'clearAnswers'）
btnClear.addEventListener（'click'，函数（e）{
设置应答（1，storage.page1Answer，false）
设置应答（2，storage.page2Answer，false）
})
设置答案第1页

设置答案第2页

明确的答案
第1页
答案1：

回答3：

答复3：
第2页
答案1：

回答3：

回答3:
谢谢，但是当用户单击上一个按钮时，是否可以选中用户选择要选中的复选框。问题是，代码段不允许本地存储（和页面更改），因此很难显示。我试着想出一个片段：）