嘿，作为刚接触JavaScript和Web开发的新手，你已经找对方向啦——localStorage正是解决这个持久化状态问题的关键！我来一步步告诉你怎么把它整合到你的代码里：

第一步：修改颜色切换函数，保存选择到localStorage #

每次切换颜色时，我们把选中的颜色索引存进localStorage，这样浏览器就会记住用户的选择：

function changeColor(num) {
  var colors = ['rgb(10, 248, 82)', 'rgb(245, 16, 16)', 'rgb(236, 214, 15)']; //green, red, yellow
  document.getElementById('box').style.backgroundColor = colors[num];
  // 将选中的颜色索引持久化存储到localStorage
  localStorage.setItem('selectedColorIndex', num);
}

第二步：页面加载时恢复保存的颜色 #

光存还不够，我们需要在页面刚加载的时候，读取之前保存的颜色设置，自动给box应用上：

// 等待DOM元素全部加载完成后执行
window.addEventListener('DOMContentLoaded', function() {
  const savedColorIndex = localStorage.getItem('selectedColorIndex');
  const colors = ['rgb(10, 248, 82)', 'rgb(245, 16, 16)', 'rgb(236, 214, 15)'];
  const boxElement = document.getElementById('box');

  // 如果之前有保存的颜色索引，就设置对应的颜色
  if (savedColorIndex !== null) {
    boxElement.style.backgroundColor = colors[savedColorIndex];
  }
});

为什么这样有效？ #

• localStorage会把数据永久存在用户的浏览器中（除非用户手动清除浏览器缓存或调用localStorage.clear()），所以即使刷新页面、跳转到其他页面再回来，颜色设置都不会丢失。
• 如果用sessionStorage的话，数据只会在当前浏览器标签页生效，关闭标签页就会丢失，所以这里localStorage是更合适的选择。
• 我们用DOMContentLoaded事件确保代码在所有HTML元素加载完成后再执行，避免出现找不到box元素的问题。

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