如何在网页刷新/重载时保持切换按钮的状态？

需求说明 #

我需要实现两个按钮的切换效果，同一时间仅显示一个，用于在CodeIgniter框架中完成两类操作：

• 显示第一个按钮时，点击执行插入预订数据的操作
• 显示第二个按钮时，点击执行**更新数据（将is_booking字段设为0，即取消预订）**的操作
  要求网页刷新或重载后，按钮的状态不会丢失，效果为两个按钮交替显示，同一时间仅展示其中一个。

现有代码 #

JavaScript #

function toggle1(){
document.getElementById("input2").removeAttribute("class");
var x = document.getElementById("input1");
var y = document.getElementById("input2");
x.style.display = "none";
y.style.display = "flex";
}

function toggle2(){
var x = document.getElementById("input1");
var y = document.getElementById("input2");
x.style.display = "flex";
y.style.display = "none";
}

CSS #

.hidden{ visibility: hidden; }

HTML #

<!DOCTYPE html>
<html>
<body>

<h2>Button 2 in 1</h2>

<button type="submit" id="input1" onclick="toggle1()">Button 1</button>
<button type="button" id="input2" class="hidden pucek" onclick='toggle2()'>Button 2</button>

</body>
</html>

解决方案 #

要实现刷新后状态不丢失，需结合客户端本地存储和后端状态同步（CI框架下数据库的真实状态为权威依据），具体修改如下：

1. 修正CSS样式 #

统一用display属性控制显示/隐藏，和JS切换逻辑对齐：

.hidden {
  display: none !important;
}
.flex {
  display: flex;
}

2. 修改JavaScript，加入状态持久化与初始化逻辑 #

// 页面加载时初始化按钮状态
window.addEventListener('DOMContentLoaded', function() {
  // 优先读取后端传入的真实预订状态（CI模板中输出数据库的is_booking值）
  const isBooked = <?= $is_booking ?>; // 替换为CI控制器传递的is_booking值（1=已预订，0=未预订）
  // 后端无数据时，读取本地存储的状态作为 fallback
  const savedState = localStorage.getItem('bookingButtonState');
  
  const btn1 = document.getElementById('input1');
  const btn2 = document.getElementById('input2');
  
  if (isBooked === 1 || savedState === 'booked') {
    // 已预订状态：显示取消按钮，隐藏预订按钮
    btn1.classList.add('hidden');
    btn2.classList.remove('hidden');
  } else {
    // 未预订状态：显示预订按钮，隐藏取消按钮
    btn1.classList.remove('hidden');
    btn2.classList.add('hidden');
  }
});

function toggle1() {
  const btn1 = document.getElementById('input1');
  const btn2 = document.getElementById('input2');
  btn1.classList.add('hidden');
  btn2.classList.remove('hidden');
  // 存储状态到本地
  localStorage.setItem('bookingButtonState', 'booked');
  // 此处添加CI预订表单提交逻辑，调用插入预订的接口
}

function toggle2() {
  const btn1 = document.getElementById('input1');
  const btn2 = document.getElementById('input2');
  btn1.classList.remove('hidden');
  btn2.classList.add('hidden');
  // 存储状态到本地
  localStorage.setItem('bookingButtonState', 'unbooked');
  // 此处添加AJAX请求，调用CI取消预订的接口（更新is_booking为0）
}

3. CI框架后端配合 #

• 在控制器中，查询当前记录的is_booking字段值，传递给视图模板
• 编写两个接口：
  • 预订接口：插入预订数据，设置is_booking=1
  • 取消接口：更新对应记录的is_booking=0

4. 适配CI的HTML结构 #

<h2>预订操作</h2>
<!-- 预订表单 -->
<form id="bookingForm" action="<?= site_url('booking/submit') ?>" method="post">
  <button type="submit" id="input1" class="flex" onclick="toggle1()">提交预订</button>
</form>
<!-- 取消按钮，通过AJAX提交请求 -->
<button type="button" id="input2" class="hidden pucek" onclick="toggle2()">取消预订</button>

关键说明 #

• 后端状态优先：本地存储可能存在多设备不同步的问题，页面加载时必须先读取数据库的真实状态
• 状态同步：每次点击按钮后，既要更新本地存储，也要确保后端接口执行成功，避免客户端与后端状态脱节

内容的提问来源于stack exchange，提问作者Kristovel Adi Sucipto