点击变色按钮刷新/重启页面后保持颜色状态的实现问题

你的问题出在当前只在内存中修改元素样式，页面刷新后内存数据重置，所以颜色会回到默认值。要解决这个问题，我们可以用浏览器的localStorage来持久化保存颜色状态，具体修改如下：

修改后的完整代码 #

HTML #

<a href="#" class="phone_number" id="favorite" onclick="Fav()">
  hello
</a>

JavaScript #

var btnvar = document.getElementById('favorite');

// 页面加载时，从localStorage读取保存的颜色并设置
window.addEventListener('load', function() {
  var savedColor = localStorage.getItem('favoriteColor');
  if (savedColor) {
    btnvar.style.color = savedColor;
  } else {
    // 设置默认颜色（如果之前没有保存过）
    btnvar.style.color = 'grey';
    localStorage.setItem('favoriteColor', 'grey');
  }
});

function Fav() {
  var currentColor = btnvar.style.color;
  var newColor = currentColor === 'red' ? 'grey' : 'red';
  
  btnvar.style.color = newColor;
  // 把新颜色保存到localStorage
  localStorage.setItem('favoriteColor', newColor);
};

关键说明 #

• localStorage.getItem('favoriteColor')：页面加载时读取之前保存的颜色状态，直接应用到元素上。
• localStorage.setItem('favoriteColor', newColor)：每次切换颜色后，把最新的颜色值存入本地存储，确保刷新后能读取到。
• 初始化时的默认值处理：如果是第一次打开页面，没有保存过状态，就设置默认的灰色并同步到localStorage，避免状态不一致。

更健壮的优化方案（推荐） #

用CSS类来控制颜色会比直接操作style属性更灵活，也更容易维护：

CSS #

.favorite {
  color: grey;
}
.favorite.active {
  color: red;
}

HTML #

<a href="#" class="phone_number favorite" id="favorite" onclick="Fav()">
  hello
</a>

JavaScript #

var btnvar = document.getElementById('favorite');

window.addEventListener('load', function() {
  var isActive = localStorage.getItem('favoriteActive') === 'true';
  if (isActive) {
    btnvar.classList.add('active');
  }
});

function Fav() {
  var isActive = btnvar.classList.contains('active');
  if (isActive) {
    btnvar.classList.remove('active');
    localStorage.setItem('favoriteActive', 'false');
  } else {
    btnvar.classList.add('active');
    localStorage.setItem('favoriteActive', 'true');
  }
};

这种方式把样式逻辑交给CSS，JavaScript只负责状态的切换和存储，代码结构更清晰，也方便后续修改样式。

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