如何使用SessionStorage在全站保留用户选择并控制多页面div显示

功能实现说明 #

你要求的两个需求都可以基于sessionStorage实现，具体逻辑和修改后的代码如下：

• 选择值存储&当前页状态保持：用户选择后将值写入sessionStorage，页面加载时先读取存储值，有值就直接渲染对应状态，无需用户重新选择
• 跨页面展示对应Div：sessionStorage是同站点会话内全局共享的，其他站点页面只要有对应class的Div容器，加入通用的渲染逻辑即可读取存储值展示对应内容

代码修改 #

原有HTML、CSS代码无需调整，仅替换JavaScript代码即可：

// 通用渲染逻辑，可复用在站点所有页面
function renderTariff(selectedVal) {
  if (!selectedVal) return;
  // 兼容当前页的选中值展示节点，其他页面没有该节点也不会报错
  const currentValEl = document.getElementById("current");
  if (currentValEl) currentValEl.innerHTML = selectedVal;
  const targetClasses = ['t1', 't2', 't3', 't4', 'select'];
  targetClasses.forEach(className => {
    const el = document.querySelector(`.${className}`);
    if (el) {
      el.style.display = className === selectedVal ? 'block' : 'none';
    }
  });
}

// 页面加载完成后初始化
window.addEventListener('DOMContentLoaded', () => {
  // 读取会话存储的已选资费
  const savedTariff = sessionStorage.getItem('user_selected_tariff');
  if (savedTariff) {
    renderTariff(savedTariff);
    // 同步下拉框选中值（仅当前页有下拉框时生效）
    const selectEl = document.getElementById('select');
    if (selectEl) selectEl.value = savedTariff;
  }
});

// 下拉框选择变更监听
document.getElementById("select").addEventListener("change", () => {
  const selectedVal = document.getElementById("select").value;
  // 存储选中值到会话
  sessionStorage.setItem('user_selected_tariff', selectedVal);
  renderTariff(selectedVal);
});

跨页面使用说明 #

其他站点页面如需展示对应资费Div，只需两步：

1. 页面中加入对应class（t1/t2/t3/t4）的Div容器，写入对应要展示的内容
2. 页面引入上述JavaScript代码即可，加载时会自动读取会话存储的选择值，展示对应Div

内容的提问来源于stack exchange，提问作者Paul Keen