How do I save my checkbox tick to local storage

My question is how do I save the checkbox so that when i reopen or reload the page it stays like that for example when i tick it, it stays tick and when i untick it it stays untick

what i have so far:

html>

head>

title>MY DATABASE/title>

meta charset="UTF-8">

style>

        #myInput {
            background-image: url('http://ift.tt/2shp6Na');
            background-position: 10px 10px;
            background-repeat: no-repeat;
            width: 100%;
            font-size: 16px;
            padding: 12px 20px 12px 40px;
            border: 1px solid #ddd;
            margin-bottom: 12px;
        }

        #myTable {
            border-collapse: collapse;
            width: 100%;
            border: 1px solid #ddd;
            font-size: 18px;
        }

        #myTable th, #myTable td {
            text-align: left;
            padding: 12px;
        }

        #myTable tr {
            border-bottom: 1px solid #ddd;

        }

        #myTable tr.header, #myTable tr:hover {
            background-color: #f1f1f1;

        }

        * {
            box-sizing: border-box;
        }
</style>

/head>

body>

<h2>DATABASE</h2>

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for an name.." title="Type in an name">

<table id="myTable">
    <tr class="header">
        <th style="width:60%;">Anime</th>
        <th style="width:40%;">Email</th>
        <th style="width:auto;">PTW</th>
    </tr>
    <tr>
        <td>name1</td>
        <td>email1</td><td><input type="checkbox" id="checkbox" class="checkbox"></td>
    </tr>
    <tr>
        <td>name2</td>
        <td>email2</td><td><input type="checkbox" id="checkbox" class="checkbox"></td>
    </tr>
    <tr>
        <td>name3</td>
        <td>email3</td><td><input type="checkbox" id="checkbox" class="checkbox"></td>
    </tr> 
    </table>
    <!--Search Filter-->
    <script>
        function myFunction() {
          var input, filter, table, tr, td, i;
          input = document.getElementById("myInput");
          filter = input.value.toUpperCase();
          table = document.getElementById("myTable");
          tr = table.getElementsByTagName("tr");
          for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[0];
            if (td) {
              if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
              } else {
                tr[i].style.display = "none";
              }
            }
          }
        }
    </script>
    <script>
enter code for saving checkboxes here
    </script>
</body>
</html>

PS a working version of this on https://54x1.github.io/