JavaScript localStorage中selectedMuscles变量未按预期更新问题

原因分析 #

• createWorkoutSplit仅在页面DOM加载完成时执行了一次，之后用户修改肌肉选择、更新localStorage后，没有触发该函数重新执行，导致函数内读取的selectedMuscles始终是初始加载时的旧值。
• 虽然其他模块正确更新了localStorage，但当前生成训练计划的代码既没有监听localStorage的变化，也没有在用户操作后主动重新拉取数据更新视图。

解决方法 #

方法1：在用户操作后主动调用更新函数 #

找到处理肌肉选择的逻辑（比如复选框点击、保存按钮事件），在更新完localStorage后，直接调用createWorkoutSplit()，立即读取最新数据并更新训练计划。

示例代码：

// 假设这是处理肌肉选择保存的逻辑
document.getElementById('save-muscle-selection').addEventListener('click', function() {
  // 获取当前选中的肌肉
  const selected = [...document.querySelectorAll('.muscle-option:checked')].map(item => item.value);
  // 更新localStorage
  localStorage.setItem('selectedMuscles', JSON.stringify(selected));
  // 调用更新函数刷新训练计划
  createWorkoutSplit();
});

方法2：用自定义事件统一触发更新 #

如果修改肌肉选择的逻辑分散在多处，可以通过自定义事件来统一触发训练计划的更新，避免重复代码：

// 在DOM加载完成的回调中添加自定义事件监听
document.addEventListener('muscle-selection-updated', function() {
  createWorkoutSplit();
});

// 在任何更新localStorage的地方触发这个自定义事件
function saveSelectedMuscles(muscles) {
  localStorage.setItem('selectedMuscles', JSON.stringify(muscles));
  document.dispatchEvent(new CustomEvent('muscle-selection-updated'));
}

方法3：监听localStorage跨页变化（可选） #

如果需要在其他标签页修改localStorage时自动更新当前页面的训练计划，可以添加storage事件监听，但注意同一页面内修改localStorage不会触发这个事件，所以仍需结合前两种方法：

window.addEventListener('storage', function(e) {
  if (e.key === 'selectedMuscles') {
    createWorkoutSplit();
  }
});

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