Question

我将一些数据检索到JSON数组中，然后将其显示到HTML表中，该表包含超链接中包含的一些数据。即一些列＆＃39;数据是可点击的，一旦点击它就会显示另一个JSP页面（比如第2页），其中包含更多数据，这些数据保存在JSON数组本身上。

现在这个页面2有一个＆＃39; Back＆＃39;按钮功能 - 预期的行为是用户点击“返回”按钮时的行为。按钮应该返回到显示HTML表数据的第1页，用户应该能够看到他们首次获取的数据。即应该有一些方法来记住从我的初始AJAX请求中获取的数据，并检索用户从第2页的子页面返回该页面时在第1页中获取的相同数据。

当用户输入帐号＃和帐户类型时会触发AJAX通话 - 我会相应地获取数据，并在“回复”中获得结果。对象并整齐地显示在html表上，但是当用户从该页面移动并再次点击后退按钮后，我看到没有表格的页面＃1。现在我再也不能要求用户重新输入详细信息以查看他们之前检索到的数据。这很烦人。

请给我一个解决这个问题的方法。谢谢大家。

欣赏花时间阅读本文。

这是代码的一部分：

$(document).ready(function () {
    var flag = "1";

    $('#accountType').bind('change', function (event) {

        var accountType = $('#accountTypeSelect').val();
        var account = $('#accountText').val();

        jQuery.ajax({
            type: 'POST',
            url: '${pageContext.request.contextPath}' + "/Page1.spr", //request page
            cache: false,
            dataType: "json",
            data: {
                "accountType": accountType,
                "account": account,
                "flag": flag
            }, //data sent to request page    
            success: function (response) {
                // code to display the data into the html table
            },

            error: (function (message) {
                console.log("error message : " + message);
            }),

            statusCode: {
                404: function () {
                    alert("page not found");
                }
            }
        });
    });

Answer 1

您可以使用HTML5方法将数据保存在sessionStorage localStorage或setItem中，如下所示：

success: function(response) {
     sessionStorage.setItem("result", response)
     // code to display the data into the html table
}

稍后使用getItem()访问它。当您返回到

这样的页面时

var prevResponse = JSON.parse(sessionStorage.getItem("result"));
if(prevResponse)
  {
    // code to be executed when old dats is found
  }
else{

}

理想情况下，您在第一页加载的代码将类似于

var prevResponse = JSON.parse(sessionStorage.getItem("result"));
if(prevResponse)
{
    // data exists : code to be executed when old dats is found
}
else{
  jQuery.ajax({}) // send the AJAX request to fetch data
}

您可以阅读有关会话和本地存储here

的更多信息

Browser support用于网络存储API。

<强>更新

如果您没有HTML5支持，则可以使用jQuery cookie插件（还有很多其他）在客户端存储数据。

您可以按如下方式将数据存储到cookie中：

$.cookie("result", response);

然后从cookie中获取它：

$.cookie("result");

Answer 2

您可以通过jquery使用cookie。但是用户必须启用浏览器的cookie。它通常在默认设置下启用。

添加：

$.cookie("key1", data1);
$.cookie("key2", data2);

阅读：

$.cookie("key1");

要删除：

$.removeCookie("key1");

因此，您可以尝试读取cookie以加载表数据，如果没有数据，则调用ajax :)

Answer 3

另一种方法是将其保存在隐藏的输入中：

success: function(response){
      $("#hiddenInput").val(JSON.stringify(response));
}

如何存储/记住从ajax调用中获取的数据？

3 个答案: