求助：点击后永久禁用HTML按钮，页面刷新后恢复可用的解决方法

嘿，我懂你的困扰！你当前的代码只是在页面运行时临时禁用了按钮，一旦刷新页面，浏览器会重新加载所有HTML元素，之前的禁用状态就消失了。要实现永久禁用（直到用户主动清除浏览器存储），咱们得借助浏览器的本地存储功能——localStorage，它能把数据持久保存在用户的浏览器里。

下面是修改后的完整代码，我会一步步解释：

<body>
  <input type="submit" value="ok" class="btn btn-default" id="butn" onclick="fn()"/>

  <script type="text/javascript">
    // 页面加载完成后，检查本地存储的状态并设置按钮
    window.onload = function() {
      // 从localStorage读取状态，注意存储的是字符串，所以要判断是否等于'true'
      const isButtonDisabled = localStorage.getItem('buttonDisabled') === 'true';
      document.getElementById('butn').disabled = isButtonDisabled;
    };

    function fn(){
      const btn = document.getElementById("butn");
      btn.disabled = true;
      // 将禁用状态存入localStorage，确保刷新后能读取到
      localStorage.setItem('buttonDisabled', 'true');
    }
  </script>
</body>

关键改动说明： #

• 页面加载时恢复状态：新增的window.onload函数会在页面所有元素加载完成后执行，它会检查localStorage里的buttonDisabled值，如果之前点击过按钮，这个值就是'true'，按钮会直接被设置为禁用状态。
• 点击时持久化状态：在fn函数里，除了禁用按钮，还通过localStorage.setItem把状态存起来，这样即使刷新页面，下次加载时也能读取到这个状态。

测试与恢复： #

如果你想测试按钮重新可用的情况，可以打开浏览器的开发者工具（按F12），在控制台里输入以下命令并回车，然后刷新页面：

localStorage.removeItem('buttonDisabled')

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