Html 如果删除阵列中的对象，如何删除localstorage类？

这可能令人困惑，但请听我说完

我有一个网站，每个人都可以添加/编辑/删除“任务”，以跟踪即将到来的项目/测试费用

我设法添加了一个localstorage，每个用户都可以双击一个li元素（由mongoose模式创建并由ejs生成的任务），并在该任务上应用一个类（行通过，不同的颜色），仅适用于该用户设备的web浏览器

问题是，当我删除/创建任务时，localstorage会保留下来，并重新应用到上一个任务所在的索引中。这有什么意义吗

我希望这样，当我删除保存在mongo数据库中的任务时，应用于该任务并存储在localstorage中的类也会被删除。有办法吗

对此我很抱歉，我对编程还相当陌生，我就是不能理解这一点

下面是我的main.js代码：

if (typeof(localStorage) == 'undefined') {
    document.getElementById("result").innerHTML =
      'Your browser does not support HTML5 localStorage. Try upgrading.';
  } else {
      $(".toggle").each(function(i, el) {
        if (localStorage['status' + i] == 'checked') {
          $(this).addClass('done');
        }
      });
  }

  $(document).ready(function() {
    $('.toggle').on('dblclick', function() {
      var $item = $(this).closest('.toggle');
      var index = $('.toggle').index($item);
      $item.toggleClass('done');
      if ($item.hasClass('done')) {
        localStorage.setItem('status' + index, 'checked');
      } else {
        localStorage.removeItem('status' + index);
      }
    });
  });

下面是我的html的一小部分：

<div class="row dates">
        <article class="col-md-6 col-lg-4">
            <div class="col-lg-12 articleBg">
                <h5>COMM110 - Communications for College</h5>
                <ul>
                    <% if(taskOnes.length > 0) { %>
                        <% taskOnes.forEach((task) => { %>
                            <% let date = task.date %>
                            <div class="mb-3">
                                <li class="toggle"><span class="taskName"><%= task.task %></span> - Due <%= date.toString().substring(0,21) %> 
                                    <div class="">
                                        Submit by
                                        <span class="submit">
                                            <%= task.submit %>
                                        </span>
                                    </div>
                                </li>
                                <a href="/one/<%= task.id %>/edit"><i class="fas fa-edit"></i></a>
                                <a href="/one/<%= task.id %>/delete"><i class="fas fa-trash-alt"></i></a>   
                            </div>
                        <% }) %>
                    <% } %>
                    <a href="/one"><i class="fas fa-plus"></i></a>
                </ul>
            </div>
        </article>
    
        <article class="col-md-6 col-lg-4">
            <div class="col-lg-12 articleBg">
                <h5>COMP1100 - Introduction to C++ Programming</h5>
                <ul>
                    <% if(taskTwos.length > 0) { %>
                        <% taskTwos.forEach((task) => { %>
                            <% let date = task.date %>
                            <div class="mb-3">
                                <li class="toggle"><span class="taskName"><%= task.task %></span> - Due <%= date.toString().substring(0,21) %> 
                                    <div>
                                        Submit by
                                        <span class="submit">
                                            <%= task.submit %>
                                        </span>
                                    </div>
                                </li>
                                <% if(currentUser){ %>
                                    <a href="/two/<%= task.id %>/edit"><i class="fas fa-edit"></i></a>
                                <a href="/two/<%= task.id %>/delete"><i class="fas fa-trash-alt"></i></a>
                                <% } %>    
                            </div>
                        <% }) %>
                    <% } %>
                    <% if(currentUser){ %>
                        <a href="/two"><i class="fas fa-plus"></i></a>
                    <% } %>
                </ul>
            </div>
        </article>

如果你需要更多的信息来帮助我，请告诉我

---

提前谢谢。

localStorage不是一个类，这是浏览器的一个功能。我设法在其各自的元素上执行此操作，但每当我从数据库中删除一个元素时，localStorage会收到一个NULL错误，并清除我的选择。有什么想法吗？