跨页面存储按钮状态：完成问卷后修改diagnosticoST页面对应按钮颜色

嗨，我来帮你搞定这个问题！核心就是把用户点击的按钮信息以及问卷完成状态存储起来，等返回diagnosticoST页面时再读取状态更新样式。下面是几种实用的实现方式，从简单到灵活都有：

一、基础方案：用localStorage存储完成状态（适合多页面应用） #

这个方法最通用，哪怕用户关闭浏览器再打开，状态也能保留（如果不需要持久化可以换成sessionStorage，关闭标签页就会清空）。

步骤1：在diagnosticoST页面绑定按钮点击事件 #

点击按钮时，先记录当前要处理的按钮ID，再跳转到问卷页面：

// 给四个按钮统一绑定点击事件（可以给按钮加个共同类名，比如"quadrant-btn"）
document.querySelectorAll('.quadrant-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    // 存储当前点击的按钮ID，方便问卷页面识别是哪个象限
    localStorage.setItem('currentActiveQuadrant', this.id);
    // 跳转到问卷页面
    window.location.href = 'Quadrant_1.html';
  });
});

步骤2：在问卷页面Quadrant_1的Continue按钮标记完成 #

用户点击Continue时，更新对应按钮的完成状态：

document.getElementById('continue-btn').addEventListener('click', function() {
  const currentBtnId = localStorage.getItem('currentActiveQuadrant');
  if (!currentBtnId) return; // 防止直接访问问卷页面的情况

  // 读取已有的完成状态，没有就初始化一个默认对象
  let completedStatus = JSON.parse(localStorage.getItem('quadrantCompleted')) || {
    'btn-institucional': false,
    'btn-economico': false,
    'btn-social': false,
    'btn-natural': false
  };

  // 标记当前按钮为已完成
  completedStatus[currentBtnId] = true;
  // 把更新后的状态存回localStorage
  localStorage.setItem('quadrantCompleted', JSON.stringify(completedStatus));
  // 清除临时存储的当前按钮ID
  localStorage.removeItem('currentActiveQuadrant');

  // 返回diagnosticoST页面
  window.location.href = 'diagnosticoST.html';
});

步骤3：在diagnosticoST页面加载时更新按钮样式 #

页面加载时，读取存储的完成状态，给对应按钮加上完成样式：

window.addEventListener('load', function() {
  const completedStatus = JSON.parse(localStorage.getItem('quadrantCompleted')) || {};
  
  // 遍历所有按钮，根据状态更新样式
  Object.keys(completedStatus).forEach(btnId => {
    if (completedStatus[btnId]) {
      const targetBtn = document.getElementById(btnId);
      if (targetBtn) {
        // 推荐用CSS类来修改样式，方便维护
        targetBtn.classList.add('quadrant-completed');
        // 也可以直接修改行内样式：targetBtn.style.backgroundColor = '#2ecc71';
      }
    }
  });
});

配套CSS样式（更规范的做法） #

在CSS里定义完成状态的样式，比直接改style灵活：

.quadrant-completed {
  background-color: #2ecc71; /* 绿色作为完成标识 */
  color: #fff;
  border-color: #27ae60;
}

二、单页应用专属：用路由状态/全局状态管理（如果用React/Vue等框架） #

如果你的项目是单页应用（比如Vue、React），可以不用本地存储，直接通过路由传递状态，或者用全局状态管理工具：

• 路由状态传递：比如Vue Router跳转时通过query或state携带按钮ID，问卷完成后更新全局状态；
• 全局状态管理：把按钮完成状态存在Vuex/Redux的store里，页面切换时状态不会丢失。

注意事项 #

1. 边界情况处理：要考虑用户直接访问问卷页面的情况（没有先点击diagnosticoST的按钮），这时候要做防御性判断；
2. 存储选择：如果不需要持久化状态（用户关闭页面就重置），把localStorage换成sessionStorage即可；
3. 数据格式：因为localStorage只能存字符串，所以要用JSON.stringify和JSON.parse处理对象类型的数据。

这样就能完美实现你要的效果啦！

内容的提问来源于stack exchange，提问作者Tania Martínez