利用sessionStorage保存div状态，重载页面后自动展示指定div

你的核心问题在于div状态存储/读取逻辑错误，以及函数拼写、参数传递的小问题。以下是修正后的完整方案：

问题分析 #

1. 你存储的div_status是{cerDiv: true}这种键值对，但读取时用Object.values(div_status)拿到的是[true]，不是div的ID，导致找不到对应元素。
2. 函数名拼写错误：monstrarDiv应为mostrarDiv。
3. 冗余存储：已经保存了select的选中值（对应div的ID），不需要额外存储div状态，直接复用该值即可。

修正后的JavaScript代码 #

// 读取保存的select选中项
let selItems = JSON.parse(sessionStorage.getItem("SelItem")) || [];

$(function () {
    // 页面加载时恢复select状态，并自动显示对应div
    if (selItems.length > 0) {
        selItems.forEach(obj => {
            const [selectId, targetDivId] = Object.entries(obj)[0];
            $("#" + selectId).val(targetDivId);
            // 显示对应div
            mostrarDiv(targetDivId);
        })
    }

    // 监听select切换事件
    $('.term').on("change", function () {
        selItems = $('.term').map(function () {
            return {
                [this.id]: this.value
            }
        }).get();
        sessionStorage.setItem("SelItem", JSON.stringify(selItems));
        // 切换显示对应div
        mostrarDiv(this.value);
    });
});

// 显示指定div，隐藏其他div
function mostrarDiv(targetDivId) {
    const allDivs = document.getElementsByClassName('opc');
    
    // 隐藏所有选项div
    for (let i = 0; i < allDivs.length; i++) {
        allDivs[i].style.display = 'none';
    }

    // 显示目标div（增加存在性判断避免报错）
    const targetDiv = document.getElementById(targetDivId);
    if (targetDiv) {
        targetDiv.style.display = 'block';
    }
}

额外HTML修正 #

你的div标签中存在多余的引号，会导致样式解析错误，需要修正：

<!-- 原错误代码 -->
<div class="opc" id="cerDiv" style="display:none;&quot;">
<!-- 修正后 -->
<div class="opc" id="cerDiv" style="display:none;">

同理，cuoDiv的style属性也要去掉多余的"。

改动说明 #

1. 移除冗余存储：删掉div_status相关代码，直接用SelItem中保存的select值（对应div的ID）控制显示，减少冗余逻辑。
2. 页面加载自动触发显示：在恢复select选中状态后，立即调用mostrarDiv显示对应div。
3. 简化显示逻辑：去掉原代码中不必要的toggle判断，select切换时直接显示对应div、隐藏其他div，符合业务逻辑。
4. 增加错误防护：判断目标div是否存在，避免控制台报错。

内容的提问来源于stack exchange，提问作者Franqo Balsamo