如何基于localStorage自动控制Bootstrap 4 collapse组件的页面加载状态

问题根因 #

• localStorage 存储的所有值都会自动转为字符串类型，存入布尔值false后取出的是字符串"false"，直接在if判断中非空字符串会被识别为真值，导致判断逻辑永远走展示分支
• 手动修改show类名未同步Bootstrap collapse组件的内部状态，容易出现操作冲突、动画不生效的问题，更推荐用Bootstrap官方提供的API操作

修复代码 #

1. 优化状态存储逻辑 #

原存储代码中if/else分支逻辑完全一致，可直接简化：

function showTable(display) {
    // 序列化布尔值后存储，方便后续读取时直接解析为原始布尔类型
    localStorage.setItem("dashboardViewTable", JSON.stringify(display));
}

2. 官方API控制collapse显隐（Bootstrap 5版本，无jQuery依赖） #

function getTableState() {
    const element = document.getElementById("dashboardViewTable");
    // 读取存储值，无值时默认设为false
    const isShow = JSON.parse(localStorage.getItem("dashboardViewTable") ?? "false");
    // 获取或初始化collapse实例，初始化时不自动触发切换动作
    const bsCollapse = new bootstrap.Collapse(element, {
        toggle: false
    });
    // 按存储值控制显隐
    isShow ? bsCollapse.show() : bsCollapse.hide();
}
// 页面DOM加载完成后自动执行状态同步
document.addEventListener('DOMContentLoaded', getTableState);

Bootstrap 4及以下版本控制代码（依赖jQuery） #

function getTableState() {
    const isShow = JSON.parse(localStorage.getItem("dashboardViewTable") ?? "false");
    $('#dashboardViewTable').collapse(isShow ? 'show' : 'hide');
}
document.addEventListener('DOMContentLoaded', getTableState);

手动修改类名的修复方案（不推荐） #

如果坚持手动操作类名，只要修正布尔值判断逻辑即可生效：

function getTableState() {
    const element = document.getElementById("dashboardViewTable");
    const isShow = JSON.parse(localStorage.getItem("dashboardViewTable") ?? "false");
    isShow ? element.classList.add("show") : element.classList.remove("show");
}
document.addEventListener('DOMContentLoaded', getTableState);

内容的提问来源于stack exchange，提问作者Mads Sander Høghstrup