Question

我使用jquery插件来排序我的html表。它运作良好，但我希望能够保存我的排序＆＃34;离开页面后返回。如果我离开页面并返回 - 排序重新开始。

我想保持排序的状态 - 所以当我回来时 - 我是如何离开的......

这是一个有效的例子...... https://rawgit.com/joequery/Stupid-Table-Plugin/master/examples/basic.html

这是代码......

<!DOCTYPE html>
        <html>
        <head>
      <title>Stupid jQuery table sort</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
      <script src="../stupidtable.js?dev"></script>
      <script>
        $(function(){
            $("table").stupidtable();
        });
      </script>
      <style type="text/css">
        table {
          border-collapse: collapse;
        }
        th, td {
          padding: 5px 10px;
          border: 1px solid #999;
        }
        th {
          background-color: #eee;
        }
        th[data-sort]{
          cursor:pointer;
        }
        tr.awesome{
          color: red;
        }
      </style>
      </style>
    </head>

    <body>

      <h1>Stupid jQuery table sort!</h1>

      <p>This example shows how a sortable table can be implemented with very little configuration. Simply specify the data type on a <code>&lt;th&gt;</code> element using the <code>data-sort</code> attribute, and the plugin handles the rest.</p>

      <table>
        <thead>
          <tr>
            <th data-sort="int">int</th>
            <th data-sort="float">float</th>
            <th data-sort="string">string</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>15</td>
            <td>-.18</td>
            <td>banana</td>
          </tr>
          <tr class="awesome">
            <td>95</td>
            <td>36</td>
            <td>coke</td>
          </tr>
          <tr>
            <td>2</td>
            <td>-152.5</td>
            <td>apple</td>
          </tr>
          <tr>
            <td>-53</td>
            <td>88.5</td>
            <td>zebra</td>
          </tr>
          <tr>
            <td>195</td>
            <td>-858</td>
            <td>orange</td>
          </tr>
        </tbody>
      </table>

    </body>
        </html>

Answer 1

localStorage API易于使用，可以在用户会话之间保留数据。

存储商品：localStorage.setItem('myCat', 'Tom');

并且，要检索项目：localStorage.getItem('myCat');

请记住，所有数据都存储为字符串。

在离开页面之前保存排序的状态

1 个答案: