对HTML表使用LocalStorage

Question

我一直在开发HTML应用程序，以便通过勾选地牢名称旁边的框来跟踪每周在魔兽世界中所做的地牢。

我已经创建了表格和将单击框标记为完成的功能，如果需要也可以将其关闭。

我面临的问题是我不知道如何使用LocalStorage来在页面刷新或关闭时保留该信息。

$(document).ready(function() {
    $(".sjitem").click(function() {
      if ($(this).hasClass("done")) {
        $(this).removeClass("done");
      } else {
        $(this).addClass("done");
      }
      localStorage.setItem("sjitem", "done");
    });
  }

);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
  <a href="D:\BFA_Project\Main_BFA.html">Home</a>
  <title>BFA Tracker</title>
</div>

<div id="Dungeondiv">
  <table class="DungeonTableLayout">

    <tr class="sjtable">
      <th id="th-1" class="sjtable">Dungeons</th>
      <th id="th-2" class="sjtable">Weekly<br />Tracker</th>
    </tr>
    <tr class="sjtable">
      <td class="sjtable trlabel">Freehold</td>
      <td class="sjtable sjitem"></td>
    </tr>
    <tr class="sjtable">
      <td class="sjtable trlabel">Shrine of<br />the Storm</td>
      <td class="sjtable sjitem"></td>
    </tr>
    <tr class="sjtable">
      <td class="sjtable trlabel">Tol Dagor</td>
      <td class="sjtable sjitem"></td>
    </tr>
    <tr class="sjtable">
      <td class="sjtable trlabel">Waycrest<br />Manor</td>
      <td class="sjtable sjitem"></td>
    </tr>
    <tr class="sjtable">
      <td class="sjtable trlabel">Atal'Dazar</td>
      <td class="sjtable sjitem"></td>
    </tr>
    <tr class="sjtable">
      <td class="sjtable trlabel">The<br />MOTHERLODE!!!</td>
      <td class="sjtable sjitem"></td>
    </tr>
    <tr class="sjtable">
      <td class="sjtable trlabel">Temple of<br />Sethraliss</td>
      <td class="sjtable sjitem"></td>
    </tr>
    <tr class="sjtable">
      <td class="sjtable trlabel">The<br />Underrot<br /></td>
      <td class="sjtable sjitem"></td>
    </tr>
    <tr class="sjtable">
      <td class="sjtable trlabel">King's<br />Rest<br /></td>
      <td class="sjtable sjitem"></td>
    </tr>
    <tr class="sjtable">
      <td class="sjtable trlabel">Siege of<br />Boralus<br /></td>
      <td class="sjtable sjitem"></td>
    </tr>
  </table>
</div>