javascript - 单击时如何更改按钮的颜色，即使重新加载也始终保持激活状态

Question

我想在按钮单击时更改按钮颜色，并且我还想保留更改，我的意思是即使重新加载页面时按钮是否被激活。

这是我的代码---

<a id="mylink" class="allow" href="#"><button class="btn btn-default btn-xs">{% trans %}Allow{% endtrans %}</button></a>

这是脚本---

<script type="text/javascript">
window.onload = function() {
  document.getElementById('mylink').onclick = function() {
    this.style.color = 'green';
  }
}
</script>

但它不会改变颜色，也不会在重新加载时显示它是否处于事件状态。谁能帮我解决这个问题。非常感谢先进。

Answer 1

如果不将状态存储在服务器上，您需要使用 sessionStorage或 localStorage

实质性更新:我知道您也在使用 color而你应该使用 background-color .使用 $(document).ready()和 jquery:

<script type="text/javascript">
$( document ).ready(function() {
  if(localStorage.getItem('isCliked'){
      $('#mylink').css('background-color','green');
  }
  $('#mylink').on('click',function() {
    $('#mylink').css('background-color','green');
    // set the value upon clicking
    localStorage.setItem('isCliked', true)
  });
});

</script> 

此外，由于您使用的是 Bootstrap，因此您可以使用 jquery 中的类操作

<script type="text/javascript">
$( document ).ready(function() {
  if(localStorage.getItem('isCliked'){
      $( "#mylink" ).addClass( 'btn-success' );

      $( "#mylink" ).removeClass( 'btn-default' );
  }
  $('#mylink').on('click',function() {
    $( this ).addClass( 'btn-success' );

    $( this ).removeClass( 'btn-default' );
    // set the value upon clicking
    localStorage.setItem('isCliked', true)
  });
});

</script> 

重要:如果用户更换设备，此解决方案将不工作，因为按钮状态存储在本地。如果你想要一个强大的解决方案，你需要将状态存储在服务器上。

  $('#mylink').on('click',function() {
    <AJAX CALL TO SERVER TO STORE STATE>
  });

在这种情况下，您的初始按钮呈现应该已经考虑到这一点(在提供您的 <a> 之前检查服务器) - 或者 - 您将需要对 $(document).ready() 进行另一个 ajax 调用.这取决于您的设计和要求。

<script type="text/javascript">
$( document ).ready(function() {

  <AJAX CALL TO QUERY THE SERVER ABOUT THE BUTTON STATE>
  <RENDER BUTTON ACCORDING TO RESULTS>

  $('#mylink').on('click',function() {
   <AJAX CALL TO SERVER TO STORE STATE>
  });
});

</script>