高效管理PHP滑块页面重定向后的状态：保持当前滑块可见

<form id="formElementTimothyTopp" style="display: none;" onsubmit="updateCurrentSlideIndex()" action="updateComment.php" method="post" autocomplete="off">
    <!-- 现有字段 -->
    <input type="hidden" value="Timothy" id="fname" name="fname">
    <input type="hidden" value="Topp" id="lname" name="lname">
    <!-- 新增隐藏字段用于存储当前滑块索引 -->
    <input type="hidden" value="" id="current_slide_index" name="current_slide_index">
    <!-- 其他表单字段 -->
    <div class="formitemname">Name:</div>
    <input class="formitem shortentry" type="text" maxlength="40" value="" id="commentor" name="commentor" placeholder="Your Name">
    <div class="formitemnamelonger">Your Memory or Story of Tim:</div>
    <textarea class="formitem longentry" type="text" maxlength="2000" value="" id="memory-story" name="memory-story" placeholder="Add your memory or story here" rows="5"></textarea>
    <button style="text-align: center; margin: 10px 0 10px 240px;" type="submit" name="submit" id="submit">Submit</button>
</form>

<script>
// 假设 slideIndex 是一个全局变量，代表当前活跃的滑块索引（从1开始）
let slideIndex = 1; // 您的滑块初始化逻辑应设置此值

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides"); 
  if (n > slides.length) {slideIndex = 1};
  if (n < 1) {slideIndex = slides.length};
  for (i = 0; i < slides.length; i++) {
     slides[i].style.display = "none";
  }
  slides[slideIndex-1].style.display = "block";
}

// 在表单提交前调用此函数
function updateCurrentSlideIndex() {
  // 获取当前滑块的索引，并将其赋值给隐藏字段
  document.getElementById("current_slide_index").value = slideIndex;
}

// 页面加载时调用一次 showSlides 来初始化滑块
// showSlides(slideIndex); // 确保在页面加载时调用以显示第一个滑块
</script>

<?php
   $conn = mysqli_connect("localhost", "root", "", "classmateinfo");
   if ($conn-> connect_error) {
      die("Connection failed:". $conn-> connect_error);
   }
   $firstname = $_POST['fname'];
   $lastname = $_POST['lname'];
   $memory = !empty($_POST['memory-story'])?$_POST['memory-story']:'';
   $name = !empty($_POST['commentor'])?$_POST['commentor']:'';
   // 获取客户端传递的当前滑块索引
   $current_slide_index = !empty($_POST['current_slide_index']) ? (int)$_POST['current_slide_index'] : 1; // 默认返回第一个滑块

   $toappend = $memory . "<br>-- " . $name . "<br><div><img src=images/spacer10.gif></div>";
   $sql = "UPDATE rip SET Comments = CONCAT_WS('',Comments,'$toappend') WHERE (ClassmateNameFirst = '$firstname' AND ClassmateNameLast = '$lastname')";
   $result = $conn-> query($sql);

   // 构建重定向URL，附加 current_slide 参数
   // 注意：$_SERVER['HTTP_REFERER'] 可能不总是可靠或存在，更健壮的方法是知道目标页面的URL
   $redirect_url = $_SERVER['HTTP_REFERER'];
   // 检查 HTTP_REFERER 是否包含查询字符串，以决定使用 '?' 还是 '&'
   $separator = strpos($redirect_url, '?') === false ? '?' : '&';
   header('Location: ' . $redirect_url . $separator . "current_slide=" . $current_slide_index);
   exit(); // 确保重定向后终止脚本执行
?>

<script>
// ... (您的 showSlides 函数和其他滑块相关代码) ...

// 页面加载时执行的初始化逻辑
document.addEventListener('DOMContentLoaded', function() {
  const urlParams = new URLSearchParams(window.location.search);
  const current_slide_param = urlParams.get('current_slide');

  if (current_slide_param) {
    // 将获取到的参数转换为数字，并更新全局 slideIndex
    slideIndex = parseInt(current_slide_param, 10);
    // 确保 slideIndex 有效，防止用户手动修改URL参数导致错误
    let slides = document.getElementsByClassName("mySlides");
    if (slideIndex < 1 || slideIndex > slides.length || isNaN(slideIndex)) {
        slideIndex = 1; // 无效参数则默认显示第一个滑块
    }
  } else {
    // 如果URL中没有参数，则默认显示第一个滑块
    slideIndex = 1;
  }

  // 根据确定的 slideIndex 显示对应的滑块
  showSlides(slideIndex);
});
</script>

<script>
// ... (您的 showSlides 函数和其他滑块相关代码，包括全局 slideIndex) ...

// 在表单提交前调用此函数，将当前滑块索引保存到 localStorage
function updateCurrentSlideIndexWithLocalStorage() {
  localStorage.setItem("current_slide_index", slideIndex);
}

// 修改表单的 onsubmit 属性
// <form ... onsubmit="updateCurrentSlideIndexWithLocalStorage()" ...>
</script>

<form id="formElementTimothyTopp" style="display: none;" onsubmit="updateCurrentSlideIndexWithLocalStorage()" action="updateComment.php" method="post" autocomplete="off">
    <!-- 现有字段 -->
    <input type="hidden" value="Timothy" id="fname" name="fname">
    <input type="hidden" value="Topp" id="lname" name="lname">
    <!-- 不再需要 <input type="hidden" id="current_slide_index" name="current_slide_index"> -->
    <!-- 其他表单字段 -->
    <div class="formitemname">Name:</div>
    <input class="formitem shortentry" type="text" maxlength="40" value="" id="commentor" name="commentor" placeholder="Your Name">
    <div class="formitemnamelonger">Your Memory or Story of Tim:</div>
    <textarea class="formitem longentry" type="text" maxlength="2000" value="" id="memory-story" name="memory-story" placeholder="Add your memory or story here" rows="5"></textarea>
    <button style="text-align: center; margin: 10px 0 10px 240px;" type="submit" name="submit" id="submit">Submit</button>
</form>

<?php
   // ... (数据库连接和更新逻辑不变) ...

   // 简单重定向，不附加任何参数
   header('Location: ' . $_SERVER['HTTP_REFERER']);
   exit();
?>

<script>
// ... (您的 showSlides 函数和其他滑块相关代码，包括全局 slideIndex) ...

// 页面加载时执行的初始化逻辑
document.addEventListener('DOMContentLoaded', function() {
  const stored_slide_index = localStorage.getItem("current_slide_index");

  if (stored_slide_index) {
    // 将获取到的参数转换为数字，并更新全局 slideIndex
    slideIndex = parseInt(stored_slide_index, 10);
    // 确保 slideIndex 有效
    let slides = document.getElementsByClassName("mySlides");
    if (slideIndex < 1 || slideIndex > slides.length || isNaN(slideIndex)) {
        slideIndex = 1; // 无效参数则默认显示第一个滑块
    }
    // 可选：使用后清除 localStorage 中的项，如果不需要持久化到下次会话
    // localStorage.removeItem("current_slide_index"); 
  } else {
    // 如果 localStorage 中没有，则默认显示第一个滑块
    slideIndex = 1;
  }

  // 根据确定的 slideIndex 显示对应的滑块
  showSlides(slideIndex);
});
</script>