如何解决Toggle switch页面重载后不重置状态的问题？

我使用了Toggle开关组件，在原编辑器中刷新页面后开关会恢复预设的勾选/未勾选状态，但我的开关在勾选或取消后，重载页面仍会保留最后操作的状态。我的项目要求开关在初始加载、任何重载或回访时都必须处于未勾选状态。原本以为是本地缓存问题，但上传到平台后问题依旧，推测是代码本身的问题。以下是我的代码：

<head>
<style>
.selector {
background-color:rgba(255, 255, 0, 0.3);
text-align:center;
border:1px solid gold;
width: 50vw;
max-width:500px;
border-radius:2em;
padding:1em;
font-size:20px;
color:gold;
margin:2em auto auto;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: darkblue;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: gold;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: cornflowerblue;
}


input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
</style>
</head>
<body>

<div class="selector">Unchecked 
  <label class="switch">
    <input type="checkbox" onclick="hoverFunction()">
     <span class="slider" alt="toggle switch button"></span>
  </label>
 Checked</div>
</body>

这个问题是浏览器的自动表单数据恢复特性导致的——浏览器会默认记住用户对表单元素（比如checkbox）的操作状态，刷新页面时自动恢复。要强制开关每次加载都处于未勾选状态，有两种简单有效的修复方式：

方法1：添加autocomplete="off"属性 #

直接给checkbox标签加上autocomplete="off"属性，明确告诉浏览器不要保存该输入框的状态：

<input type="checkbox" onclick="hoverFunction()" autocomplete="off">

方法2：页面加载时强制重置状态 #

通过JavaScript在页面完全加载后，强制将checkbox的checked属性设为false。在</body>标签前添加以下脚本：

<script>
window.addEventListener('load', function() {
  document.querySelector('.switch input').checked = false;
});
</script>

效果验证 #

使用任意一种方法后，不管是刷新页面、重新打开页面还是回访网站，开关都会回到未勾选的初始状态，完全符合项目要求。

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