javascript - 用ajax保存jQuery点击？

Question

我有这段代码，可以在单击另一个按钮后显示不同的按钮。

<a href="#" id="ac-button-top" class="btn btn-success add-to-cart">order</a>
<a href="#" id="ac-button-bottom" class="btn btn-success">test</a>

$('.add-to-cart').click(function() {
  $('#ac-button-top').css("display", "none");
  $('#ac-button-bottom').css("display", "block");
});

这工作正常，但是我需要以某种方式保存此点击事件，因此即使刷新页面，它仍然显示第二个按钮而不是第一个按钮。我的猜测是你会使用 ajax 来做到这一点，但我是 ajax 的新手，当我搜索时找不到任何解决方案，所以是否有人能指出我如何做到这一点的正确方向？ 或者还有其他不使用ajax的方法吗？

Answer 1

您可以使用本地存储。 这是 fiddle https://jsfiddle.net/y0ymqps7/2/

HTML

<a href="#" id="ac-button-top" class="btn btn-success add-to-cart">order</a>
<a href="#" id="ac-button-bottom" class="btn btn-success">test</a>

Javascript

$('.add-to-cart').click(function() {
  $('#ac-button-top').css("display", "none");
  $('#ac-button-bottom').css("display", "block");
  localStorage.setItem("clicked", 1);
});
$( document ).ready(function() {
    if(localStorage.getItem("clicked") == 1){
      $('#ac-button-top').css("display", "none");
      $('#ac-button-bottom').css("display", "block");
    }
});