将分页的列表信息从一页传递到另一页

Question

在一张 Bootstrap 4 卡中，我有一张桌子，该桌子列出了三列的书，其中第一列包含每本书的复选框。用户选择的书的 count 显示在卡的页脚中。

var countChecked = function() {

  var $checkBox = $(this),
    $checkContainer = $checkBox.closest('table'),
    $checkedBoxes = $checkContainer.find('input[type=checkbox]:checked'),
    checkedCount = $checkedBoxes.length;

  $("#books_count").text(checkedCount);

};

$("#books").find("input[type='checkbox']").on('change', countChecked);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container p-0">
  <div id="books" class="card mx-1 my-1">
    <div class="card-header">Pick books</div>
    <div class="card-body p-0">
      <table class="table table-bordered table-sm m-0">
        <thead>
          <tr>
            <th>Select</th>
            <th>Title</th>
            <th>Author</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input class="add" type="checkbox" name="add_1" value="1"></td>
            <td>Don Quixote</td>
            <td>Miguel de Cervantes</td>
          </tr>
          <tr>
            <td><input class="add" type="checkbox" name="add_2" value="2"></td>
            <td>Ulysses</td>
            <td>James Joyce</td>
          </tr>
          <tr>
            <td><input class="add" type="checkbox" name="add_3" value="3"></td>
            <td>The Great Gatsby</td>
            <td>F. Scott Fitzgerald</td>
          </tr>
          <tr>
            <td><input class="add" type="checkbox" name="add_4" value="4"></td>
            <td>War and Peace</td>
            <td>Leo Tolstoy</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="card-footer border-top-0">
      You selected <strong id="books_count">0</strong> books
    </div>
  </div>
</div>

问题在于，在现实生活中，图书清单是分页的，我需要将图书 count 从一页传递到另一页（并更新以及每页上选择的书籍），以便能够获得正确的计数。

我该如何实现？