Jquery使用HTML5 localstorage保存和恢复整个页面状态

在我的项目中，我使用bootgrid插件来显示记录列表（list.php）。 我想知道是否可以保存页面的状态（搜索字段、分页等）-重定向到另一个页面（edit.php），并在返回list.php时使用html5会话存储和本地存储恢复保存的状态

LIST.PHP

<table id="grid" class="table table-condensed table-hover table-striped table-bordered">
<thead>
    <tr>
        <th data-column-id="id" data-visible="false" data-converter="numeric">id</th>
        <th data-column-id="name">Name</th>
        <th data-column-id="version">Version</th>
        <th data-column-id="commands" data-formatter="commands" data-sortable="false">Actions</th>
    </tr>
</thead>

身份证件
名称
版本
行动

JS

var grid=$（“#grid”）.bootgrid({
阿贾克斯：没错，
url:“grid.php”，
行计数：[25,50，-1]，
列选择：false，
格式化程序：{
“命令”：功能（列、行）{
返回“”+
"";
}
},
}).on（“loaded.rs.jquery.bootgrid”，函数（）{
grid.find（“.command edit”）。在（“单击”上，函数（e）{
//保存页面状态并重定向到edit.php
}).end（）.find（“.command delete”）。在（“单击”上，函数（e）{
//做点什么
});
});

---

你可以在我的场景里做吗？我怎么能这么做？有没有插件可以做到这一点？谢谢

您可以使用jQuery存储API保存字段中的数据，然后检查页面加载中是否设置了键。

也可以查看本教程

var grid = $("#grid").bootgrid({
    ajax: true,
    url: "grid.php",
    rowCount        : [25, 50, -1],
    columnSelection : false,
    formatters  : {
       "commands": function(column, row) {
           return "<button type=\"button\" class=\"btn btn-xs btn-warning command-edit\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-edit\"></span></button> " +
                  "<button type=\"button\" class=\"btn btn-xs btn-danger command-delete\" data-row-id=\"" + row.id + "\"><span class=\"glyphicon glyphicon-trash\"></span></button>";
      }
   },
}).on("loaded.rs.jquery.bootgrid", function() {

    grid.find(".command-edit").on("click", function(e) {

    //Save page status and redirect to edit.php

    }).end().find(".command-delete").on("click", function(e) {

    //do something

    });
});