如何用jQuery将导航栏单选按钮值存入sessionStorage实现会话保留？

首先得说，你现在的写法有几个核心问题，导致sessionStorage根本没发挥作用：

• HTML结构错误：你把两个选项塞进同一个<el>标签里，这根本不是单选按钮的正确结构！不管是原生HTML还是Element UI组件，每个单选选项都得是独立的控件，并且要通过相同的name（原生）或绑定同一个v-model（Element UI）来形成单选组。你现在的写法只是个普通文本块，没有任何单选交互能力。
• 缺失sessionStorage读写逻辑：你既没在用户选择选项时把选中值存入sessionStorage，也没在页面加载时从sessionStorage读取之前的选中状态来恢复，自然每次打开页面都是默认的Option1。
• 样式硬编码：你把active类直接写在标签上，不会随用户选择变化，所以永远显示Option1为选中状态。

解决方案分两种场景： #

场景1：原生HTML（无框架）实现 #

先修正HTML结构，再添加sessionStorage的读写逻辑：

<!-- 正确的单选按钮结构，用label包裹实现按钮式交互 -->
<div class="radio-nav">
  <label class="btn btn-secondary" data-option="Option1">
    <input type="radio" name="navOption" value="Option1"> Option1
  </label>
  <label class="btn btn-secondary" data-option="Option2">
    <input type="radio" name="navOption" value="Option2"> Option2
  </label>
</div>

对应的JavaScript代码：

// 页面加载时恢复选中状态
document.addEventListener('DOMContentLoaded', () => {
  const savedOption = sessionStorage.getItem('selectedNavOption');
  const radioNav = document.querySelector('.radio-nav');
  const allBtns = radioNav.querySelectorAll('.btn');
  const allRadios = radioNav.querySelectorAll('input[type="radio"]');

  // 初始化选中状态
  if (savedOption) {
    // 找到对应选项并设置选中
    const targetRadio = radioNav.querySelector(`input[value="${savedOption}"]`);
    if (targetRadio) {
      targetRadio.checked = true;
      targetRadio.parentElement.classList.add('active');
    }
  } else {
    // 默认选中第一个选项
    allRadios[0].checked = true;
    allBtns[0].classList.add('active');
    sessionStorage.setItem('selectedNavOption', allRadios[0].value);
  }

  // 监听选项变化，保存到sessionStorage
  radioNav.addEventListener('change', (e) => {
    if (e.target.type === 'radio') {
      // 移除所有按钮的active类
      allBtns.forEach(btn => btn.classList.remove('active'));
      // 给当前选中的按钮加active类
      e.target.parentElement.classList.add('active');
      // 保存选中值到sessionStorage
      sessionStorage.setItem('selectedNavOption', e.target.value);
    }
  });
});

场景2：Element UI（Vue框架）实现 #

如果是用Vue+Element UI，代码会更简洁，框架帮我们处理了很多交互细节：

<template>
  <el-radio-group v-model="selectedOption" @change="saveToSession">
    <el-radio label="Option1">Option1</el-radio>
    <el-radio label="Option2">Option2</el-radio>
  </el-radio-group>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: ''
    };
  },
  created() {
    // 页面初始化时从sessionStorage读取状态
    const saved = sessionStorage.getItem('selectedNavOption');
    // 有保存值就用保存值，没有就默认选Option1
    this.selectedOption = saved || 'Option1';
  },
  methods: {
    saveToSession(val) {
      // 选中变化时把值存入sessionStorage
      sessionStorage.setItem('selectedNavOption', val);
    }
  }
};
</script>

<style scoped>
/* 可选：自定义选中样式，匹配btn-secondary的色调 */
.el-radio__input.is-checked .el-radio__inner {
  background-color: #6c757d;
  border-color: #6c757d;
}
</style>

这样实现后，用户在不同页面切换时，sessionStorage里的选中值会被自动读取，保持选中状态；关闭浏览器或标签页后，sessionStorage会自动清空，下次打开就回到默认的Option1，完全符合你的会话级状态保留需求。

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