javascript - 即使页面发生变化，在点击时也显示 AJAX 请求？

Question

让我通过让您知道我是一个完整的 AJAX/JSON 菜鸟来作为这个问题的序言。顺便说一句，我试图在我网站的侧边栏中显示 AJAX 响应。到目前为止，我已经完美地工作了，但是，现在我想更进一步。

现在我将 AJAX 查询绑定(bind)到单击事件并且效果很好，但我希望信息在初始单击按钮后保留在 DIV 中，这样如果用户导航到其他页面侧边栏，信息仍会显示，无需再次单击该按钮。我假设这将需要某种 cookie，但也许还有另一种方式。

这是我的 AJAX 调用:

$('#locSearch').click(function() {
    jQuery.ajax({
      type: "GET",
      dataType: "html",
      url: "/search/locations/result.html",
      success: function(closestLoc) {

        jQuery('.locResult').html(closestLoc);

      } // end success

    }); // end ajax
});

这是我的 HTML:

<div class="locinfo">
    <span id="locSearch" class="button">Click here to find the nearest location</span>
    <div class="locResult"></div>
</div>

我假设这需要 cookie 是否正确？还是有更好/更简单的方法，如果有，是什么？谢谢!

Answer 1

它所做的是在本地存储中设置边栏，并在页面加载时检查它是否存在。

if ( localStorage.SideBar == "Clicked" ){
    jQuery.ajax({
      type: "GET",
      dataType: "html",
      url: "/search/locations/result.html",
      success: function(closestLoc) {

        jQuery('.locResult').html(closestLoc);

      } // end success

    }); // end ajax
}

$('#locSearch').click(function() {
    jQuery.ajax({
      type: "GET",
      dataType: "html",
      url: "/search/locations/result.html",
      success: function(closestLoc) {

        jQuery('.locResult').html(closestLoc);

      } // end success

    }); // end ajax
    localStorage.SideBar = "Clicked"
});