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

Question

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

现在此页面 2 具有“返回”按钮功能 - 预期行为是当用户单击“返回”按钮时，它应该返回到显示 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

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

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));
}