Store multiple checked checkbox ids into local storage

I have a custom data table with pagination. In my data table I have some users. My objective is to check all / individual users and then store the selected users values into local storage. Also update the local storage if there is changes in checkboxes.

Here is my HTML code:

   <table id="usersTable">
    <thead>
      <tr>
        <th>
          <!------- Check / Uncheck All Checkboxes ------->
          <input type="checkbox" id="checkAll">
          <!-------/ Check / Uncheck All Checkboxes ------>
        </th>
        <th>Name</th>
      </tr>
    </thead>
    <tbody>
        <tr>
          <td>
            <!----- Checkbox To Select Each User ----->
            <input type="checkbox" class="box" value="1">
            <!-----/ Checkbox To Select Each User ---->
            <td>User 1</td>
          </td>
          <td>
            <!----- Checkbox To Select Each User ----->
            <input type="checkbox" class="box" value="2">
            <!-----/ Checkbox To Select Each User ---->
            <td>User 2</td>
          </td>
          <td>
            <!----- Checkbox To Select Each User ----->
            <input type="checkbox" class="box" value="3">
            <!-----/ Checkbox To Select Each User ---->
            <td>User 3</td>
          </td>
        </tr>
    </tbody>
  </table>
</div>

    <!--
    Paginator: It will work from server side and refreshes on clicking on the pages.
    -->
    <nav aria-label="Page navigation example">
     <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#">Previous</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">Next</a></li>
     </ul>
    </nav>

    <script>
    </script>

I followed several approaches but no one is fully fit for the scenario. Is it possible to help me to achieve it? It is noteworthy that checking all check boxes did not work properly with clicking on another pages of pagination.

So, I need these all together:

• Check / Uncheck All Checkbox.
• Store selected user values like [1,2,3] in local storage.
• Persist checked status of checkboxes even refreshing pages.

Vanilla JavaScript / jQuery, any solution will be appreciated.