ChartJS点击调用隐藏表格函数失效页面重载全局变量重置问题

云上老周

2026-9-24

问题根源

你在onClick回调中调用document.location.reload(true)后，浏览器会立即销毁当前页面的所有JS执行上下文，排在reload后的Hide_table()代码根本没有执行机会，和你是否封装函数无关。
原生JS全局变量存储在页面内存中，页面刷新后会被完全重置，因此你设置的global_var刷新后会回到初始的null值，导致表格始终隐藏。

解决方案

通过浏览器本地存储（localStorage/sessionStorage）持久化global_var的值，页面刷新后从存储中读取值判断表格显隐即可，修正代码如下：

1. 修正ChartJS的onClick回调

onClick: (evt, activeEls, chart) => {
    // 将值存入localStorage，实现跨页面刷新持久化
    localStorage.setItem('global_var', chart.data.labels[activeEls[0].index]);
    calling_label();
    // 所有前置逻辑执行完成后再刷新页面
    document.location.reload(true);
},

2. 修正表格显隐逻辑

<script>
// 页面DOM加载完成后自动执行表格显隐判断
document.addEventListener('DOMContentLoaded', () => {
    // 如果其他业务逻辑需要用到全局变量，可在此处赋值
    window.global_var = localStorage.getItem('global_var');
    Hide_table();
})

function Hide_table (){
    const targetTable = document.getElementById("mytable");
    // 避免表格元素不存在时报错
    if (!targetTable) return;
    const globalVar = localStorage.getItem('global_var');
    targetTable.style.display = globalVar == null ? "none" : "table";
}

// 业务需要清空值时可调用该方法
function resetGlobalVar() {
    localStorage.removeItem('global_var');
    Hide_table();
}
</script>