Question

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

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({
    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

    });
});

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

Answer 1

您可以使用jQuery Storage API保存字段中的数据，然后检查是否在页面加载时设置了密钥。 https://github.com/julien-maurel/jQuery-Storage-API

也请查看本教程 http://blog.teamtreehouse.com/storing-data-on-the-client-with-localstorage

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

1 个答案: