如何使用localStorage保存网页每次重载生成的随机健身计划结果

要实现把生成的训练计划存到localStorage，你只需要调整现有代码，先暂存每次生成的动作、组数数据，再绑定存储和读取逻辑即可，具体修改步骤如下：

步骤1：添加页面交互按钮 #

先在你的HTML中新增保存、读取按钮，用于触发对应的存储、加载逻辑：

<button id="saveBtn">保存当前训练计划</button>
<button id="loadBtn">读取已保存的训练计划</button>
<!-- 你原来的列表容器不用动 -->
<ul id="listOfWorkouts"></ul>
<ul id="repsList"></ul>

步骤2：修改现有生成函数，返回生成结果 #

你原来的函数只把生成的内容直接插入DOM，我们需要加逻辑把生成的结果存为数组，方便后续序列化存储：

let maxNr = 10;
// 新增两个全局变量，存储当前生成的训练计划数据
let currentWorkout = [];
let currentReps = [];

// 修改组数生成函数，返回生成的组数数组
function generateRep(){ 
  let randomReps = [`4x10`,`4x8`, `4x20`, `4x12`, `4x15`,`3x10`, `3x15`, `4x5`, `5x10`, `10x10`];
  let repsResult = [];
  for(let i=0; i < 5; i++){
    let randomNr = Math.floor(Math.random() * maxNr); 
    if (randomNr==9) maxNr=9;
    repsResult.push(randomReps[randomNr]);
    document.getElementById("repsList").innerHTML += `<li>${randomReps[randomNr]}</li>`;
  }
  return repsResult;
}

// 洗牌函数不用修改
function shuffle(array) {
  let currentIndex = array.length,  randomIndex;
  while (currentIndex != 0) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;
    [array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
  }
  return array;
}

// 修改动作生成函数，返回生成的动作数组
function generateWorkout() {
  let workoutList = [`Chins`, `Wide barbell row (bent over)`, `Row with machine`, `Cable pulldown`,
  `Lat pulldown`, `Bent-over dumbbell alternating row`,`Reverse fly with barbell`,`Push-ups`, 
  `Face-pull with cable`, `Seated face pull`, `Single arm lat pulldown`, `Low position row with cable`, 
  `Split stance high anchor row with cable`, `Bench Press`, `Overhead press with dumbbells or barbell`,
  ` One arm row with dumbbell`,` Inverted row`, `Close grip dumbbell press`, ];
  let shuffleWorkoutList= shuffle(workoutList);
  let workoutResult = [];
  for(let i=0; i < 5; i++){
    workoutResult.push(shuffleWorkoutList[i]);
    document.getElementById("listOfWorkouts").innerHTML += `<li>${shuffleWorkoutList[i]}</li>`;
  }
  return workoutResult;
}

步骤3：添加存储、读取逻辑 #

页面加载时先把新生成的计划存到全局变量，再绑定按钮的点击事件实现存储和读取：

// 页面加载完成后生成新计划，并把结果存到全局变量
window.onload = function() {
  currentWorkout = generateWorkout();
  currentReps = generateRep();
}

// 保存计划到localStorage
document.getElementById('saveBtn').addEventListener('click', function() {
  // 结构化要存储的数据，还可以自定义加保存时间等字段
  const saveData = {
    workout: currentWorkout,
    reps: currentReps,
    saveTime: new Date().toLocaleString()
  }
  // *注意localStorage只能存字符串，所以要先用JSON.stringify转格式
  localStorage.setItem('savedWorkoutPlan', JSON.stringify(saveData));
  alert('训练计划已保存到本地！');
})

// 读取已保存的计划
document.getElementById('loadBtn').addEventListener('click', function() {
  const savedData = localStorage.getItem('savedWorkoutPlan');
  if(!savedData) {
    alert('暂无已保存的训练计划');
    return;
  }
  // 把存储的字符串转回JS对象
  const workoutData = JSON.parse(savedData);
  // 清空现有列表后渲染已保存的计划
  document.getElementById('listOfWorkouts').innerHTML = '';
  document.getElementById('repsList').innerHTML = '';
  workoutData.workout.forEach(item => {
    document.getElementById('listOfWorkouts').innerHTML += `<li>${item}</li>`;
  })
  workoutData.reps.forEach(item => {
    document.getElementById('repsList').innerHTML += `<li>${item}</li>`;
  })
  // 更新当前全局变量，方便用户读取后可以覆盖保存
  currentWorkout = workoutData.workout;
  currentReps = workoutData.reps;
  alert(`已加载${workoutData.saveTime}保存的训练计划`);
})

补充说明 #

• localStorage属于浏览器永久存储，只要用户不手动清除浏览器缓存、站点数据，保存的计划会一直存在
• 如果需要支持保存多份不同的计划，可以把存储的key改为带唯一标识的格式（比如用时间戳作为key），额外加一个保存列表的展示逻辑即可

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