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

使用localStorage或sessionStorage。它们之间的区别是localStorage没有设置过期日期，而当页面会话结束时清除sessionStorage，即浏览器窗口或标签关闭。页面会话幸存页面重新加载和恢复。

你可以想到：

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

// some operation later...
if (window.sessionStorage.getItem('addToCartClicked') == 'true') {
  ...
}

Answer 2

您可以使用localStorage。这是小提琴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");
    }
});

Answer 3

如果您需要保存点击事件计数或数据。如果需要从数据库中保存这些详细信息。那么只有你可以使用ajax方法。否则你可以使用其他方法，如..

use sessionStorage or localStorage

使用ajax保存jQuery单击？

3 个答案: