javascript - 将本地存储添加到任务列表

Question

我用过 w3schools tutorial创建任务列表的代码，并根据我的需要对其进行了更改。

我想做的是，一旦我按下 .toolbar 顶部的保存按钮并刷新，添加的任务就会保留。

我通过将 class 或 id 添加到 li 并将其引用到本地存储，但到目前为止我还没有成功。

附加代码:

var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "taskClose";
  span.appendChild(txt);
  myNodelist[i].appendChild(span);
}

var close = document.getElementsByClassName("taskClose");
var i;
for (i = 0; i < close.length; i++) {
  close[i].onclick = function() {
    var div = this.parentElement;
    div.style.display = "none";
  }
}

var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
  if (ev.target.tagName === 'LI') {
    ev.target.classList.toggle('checked');
  }
}, false);

function addTask() {
  var li = document.createElement("li");
  var inputValue = document.getElementById("input").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
  if (inputValue === '') {} else {
    document.getElementById("taskList").appendChild(li);
  }
  document.getElementById("input").value = "";
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "taskClose";
  span.appendChild(txt);
  li.appendChild(span);

  for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
      var div = this.parentElement;
      div.style.display = "none";
    }
  }
}

var modal = document.getElementById("modalSet");
var btn = document.getElementById("modalOpen");
var span = document.getElementsByClassName("modalClose")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

/*
    ~ Copyright (c) Summit Learning Management System (made by students, for students). 2019.
*/

html>body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  font-family: "Trebuchet MS", sans-serif;
}

::-webkit-scrollbar {
  display: none;
}

* {
  box-sizing: border-box;
}

#wrapper {
  min-height: 100vh;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
  background: #FFFFFF;
}

#navigation {
  max-width: 40px;
  min-height: 100%;
  background: #1B315E;
}

#navigation>a {
  display: block;
  margin: 12px 0 12px 4px;
  padding: 12px 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  text-align: center;
  font-size: 18pt;
  color: #FFFFFF;
}

#navigation>a.current {
  background: #FFFFFF;
  color: #1B315E;
}

#navigation>a:not(.current):hover {
  background: #FFFFFF;
  opacity: 0.75;
  color: #1B315E;
}

#navigation>.navLinks {
  position: absolute;
  bottom: 40px;
  left: 2px;
}

#navigation>.navLinks>button {
  display: block;
  margin: 0 0 8px 0;
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  font-size: 14pt;
  color: #FFFFFF;
}

.buffer {
  display: block;
  margin: 0 0 120px 0;
}

.modalSet {
  display: none;
  position: fixed;
  z-index: 1;
  padding: 100px 0 0 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.4);
}

.modalWrap {
  animation-name: modalTrans;
  -webkit-animation-name: modalTrans;
  animation-duration: 0.5s;
  -webkit-animation-duration: 0.5s;
  position: relative;
  margin: auto;
  padding: 0;
  width: 50%;
  color: #1B315E;
  border: 2px solid #BBBBBB;
  background: #DDDDDD;
}

@keyframes modalTrans {
  from {
    top: -300px;
    opacity: 0;
  }
  to {
    top: 0;
    opacity: 1;
  }
}

.modalHeader {
  padding: 2px 16px;
  color: #1B315E;
  font-size: 16pt;
  font-weight: bold;
  text-align: center;
  border-bottom: 2px solid #BBBBBB;
  background: #CCCCCC;
}

.modalClose {
  cursor: pointer;
  float: right;
  line-height: 25px;
  font-size: 24pt;
}

.modalMain {
  padding: 2px 16px;
  font-size: 12pt;
  color: #FF0000;
}

.column {
  float: left;
  font-size: 10pt;
  width: 25%;
}

.column>a {
  display: block;
  padding: 6px;
  text-decoration: underline;
  color: #1B315E;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

#workspaceMain {
  display: flex;
  flex-direction: column;
  width: 75%;
  min-height: 100%;
  border: 2px solid #FFFFFF;
  border-top: none;
  border-bottom: none;
  background: #FFFFFF;
}

#pagename {
  float: left;
  width: 100%;
  font-size: 14pt;
  background: #FFFFFF;
  color: #1B315E;
}

#toolbar {
  width: 100%;
  border-bottom: 2px solid #BBBBBB;
  background: #CCCCCC;
}

#toolbar>button {
  margin: 0 0 0 4px;
  padding: 4px 4px;
  cursor: pointer;
  border: none;
  outline: none;
  background: none;
  text-transform: uppercase;
  font-size: 10pt;
  color: #1B315E;
}

#toolbar>#panelAction {
  float: right;
}

@media print {
  body {
    visibility: hidden;
  }
  #contentMain {
    visibility: visible;
  }
}

#contentMain {
  width: 100%;
  height: calc(100vh - 79px);
  overflow-y: auto;
}

[contenteditable]:focus {
  outline: none;
}

*:focus {
  outline: none;
}

.mainHeader {
  margin: 8px 0 8px 0;
  padding: 2px;
  font-size: 14pt;
  color: #1E8449;
  background: #7DCEA0;
}

.gridSet {
  width: 100%;
  margin: 0 0 32px 0;
}

.gridSet,
th,
td {
  border-collapse: collapse;
  border: 2px solid #7DCEA0;
  text-align: center;
  font-size: 8pt;
}

th,
td {
  padding: 16px;
}

.gridLinks {
  text-decoration: underline;
  color: #1E8449;
}

.dashlets {
  margin: 8px 0 8px 0;
  margin-bottom: 0px;
  padding: 4px 4px;
  text-align: center;
  background: #7DCEA0;
  color: #FFFFFF;
}

.dashlets:after {
  content: "";
  display: table;
  clear: both;
}

.dashName {
  font-weight: bold;
  font-size: 12pt;
}

.dashlets>input {
  float: left;
  padding: 4px;
  margin: 0;
  width: 95%;
  border: none;
  font-size: 10pt;
}

.dashlets>.addTask {
  float: left;
  cursor: pointer;
  padding: 4px;
  width: 5%;
  background: #CCCCCC;
  font-size: 10pt;
}

ul {
  margin: 0;
  padding: 0;
}

ul>li {
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
  position: relative;
  padding: 8px 8px 8px 32px;
  list-style-type: none;
  font-size: 10pt;
  background: #EEEEEE;
}

ul>li:hover {
  background: #DDDDDD;
}

ul>li.checked {
  text-decoration: line-through;
  background: #999999;
  color: #FFFFFF;
}

ul>li.checked::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 12px;
  border-style: solid;
  border-width: 0 2px 2px 0;
  border-color: #FFFFFF;
  transform: rotate(45deg);
  height: 15px;
  width: 7px;
}

.taskClose {
  position: absolute;
  top: 0;
  right: 0;
  padding: 8px 16px 8px 16px;
}

.taskClose:hover {
  background: #7DCEA0;
  color: #FFFFFF;
}

#tabs {
  width: 100%;
  height: 30px;
  margin-top: auto;
  border-top: 2px solid #BBBBBB;
  background: #CCCCCC;
}

#tabs>a {
  float: left;
  display: block;
  margin: 0 0 0 4px;
  padding: 4px 4px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 10pt;
  color: #1B315E;
}

#tabs>a.current {
  background: #FFFFFF;
  color: #1B315E;
}

#tabs>a:not(.current):hover {
  background: #FFFFFF;
  opacity: 0.75;
  color: #1B315E;
}

#workspaceSide {
  display: flex;
  flex-direction: column;
  width: 25%;
  min-height: 100%;
  border: 4px solid #1B315E;
  border-bottom: none;
  border-right: none;
  border-top: none;
  background: #1B315E;
}

#tabsPanel {
  width: 100%;
  height: 30px;
  margin-top: auto;
  border-top: 2px solid #BBBBBB;
  background: #CCCCCC;
}

#tabsPanel>button {
  display: block;
  margin: 0 auto;
  padding: 4px 8px;
  cursor: pointer;
  background: none;
  border: none;
  outline: none;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  text-align: center;
  font-size: 10pt;
  color: #1B315E;
}

#tabsPanel>button.current {
  background: #FFFFFF;
  color: #1B315E;
}

#contentSide {
  width: 100%;
  height: calc(100vh - 30px);
}

#contentSide>iframe {
  width: 100%;
  height: calc(100vh - 30px);
}

@media screen and (max-width: 768px) {
  #workspaceMain {
    width: 100%;
  }
  #workspaceSide {
    display: none !important;
  }
}

<!DOCTYPE HTML>
<!--
    ~ Copyright (c) Summit Learning Management System (made by students, for students). 2019.
-->
<html lang="en-AU">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
  <title>Dashboard &#8212; Summit &#8212; Kempsey Adventist School</title>
  <link rel="stylesheet" type="text/css" href="../style.css">
  <!-- Internal Stylesheet -->
  <script src="https://kit.fontawesome.com/1de2bd6ce5.js"></script>
  <!-- Font Awesome (Pro) -->
</head>

<body onload="checkEdits()">
  <div id="wrapper">

    <!-- Navigation (Side) -->
    <div id="navigation">
      <div class="buffer"></div>
      <a class="current" href="#" title="Home Workspace"><i class="fal fa-home"></i></a>
      <!-- Home Workspace -->
      <a href="#" title="Learning Workspace"><i class="fal fa-book"></i></a>
      <!-- Learning Workspace -->
      <a href="#" title="Student Management Workspace"><i class="fal fa-user"></i></a>
      <!-- Student Management Workspace -->
      <a href="#" title="Administration Workspace"><i class="fal fa-cog"></i></a>
      <!-- Administration Workspace -->
      <div class="navLinks">
        <button id="modalOpen" title="Quick Links"><i class="fal fa-bookmark"></i></button>
        <!-- Quick Links -->
        <button title="Sign Out"><i class="fal fa-sign-out-alt"></i></button>
        <!-- Sign Out -->
      </div>
    </div>

    <!-- Modal (Quick Links) -->
    <div id="modalSet" class="modalSet">
      <div class="modalWrap">
        <div class="modalHeader">
          <i class="fal fa-bookmark"></i> Quick Links
          <!-- Header Title -->
          <span class="modalClose" title="Close Quick Links">&times;</span>
        </div>
        <div class="modalMain">
          <i class="fal fa-exclamation-circle"></i> <i>Warning: these links open within a new browser tab.</i>
          <div class="row">

            <div class="column">
              <a href="#" target="_blank" title="KAS Website">KAS Website</a>
              <a href="#" target="_blank" title="SEQTA Learn">SEQTA Learn</a>
              <a href="#" target="_blank" title="SEQTA Engage">SEQTA Engage</a>
            </div>
            <div class="column">
              <a href="#" target="_blank" title="LIC Secondary Blog">LIC Secondary Blog</a>
              <a href="#" target="_blank" title="Britannica">Britannica</a>
              <a href="#" target="_blank" title="KAS Webzone">KAS Webzone</a>
            </div>
            <div class="column">
              <a href="#" target="_blank" title="NESA Students Online">NESA Students Online</a>
              <a href="#" target="_blank" title="Flexischools">Flexischools</a>
              <a href="#" target="_blank" title="School Interviews">School Interviews</a>
            </div>
            <div class="column">
              <a href="#" target="_blank" title="Classroom">Classroom</a>
              <a href="#" target="_blank" title="Drive">Drive</a>
              <a href="#" target="_blank" title="Email">Email</a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Workspace (Main) -->
    <div id="workspaceMain">

      <!-- Page Name -->
      <div id="pagename"><i class="fal fa-chart-line"></i> Dashboard</div>

      <!-- Toolbar -->
      <div id="toolbar">
        <button onclick="saveEdits()" title="Save Changes"><i class="fal fa-save"></i> Save</button>
        <!-- Save -->
        <button onclick="window.print();" title="Print Page"><i class="fal fa-print"></i> Print</button>
        <!-- Print -->
        <button id="panelAction" title="Expand / Collapse Panel"><i class="fal fa-compress-wide"></i></button>
        <!-- Expand / Collapse Side Panel -->
      </div>

      <!-- Content (Main) -->
      <div id="contentMain">

        <div class="dashlets">
          <!-- Task List -->
          <div class="dashName"><i class="fal fa-tasks"></i> Task List</div>
          <input type="text" id="input" placeholder="Add Task Here">
          <span class="addTask" onclick="addTask()" title="Add Task"><i class="fal fa-plus"></i></span>
        </div>
        <ul id="taskList">
        </ul>

      </div>

      <!-- Navigation (Bottom) -->
      <div id="tabs">
        <a href="#" title="Notices"><i class="fal fa-newspaper"></i> Notices</a>
        <!-- Notices -->
        <a href="#" class="current" title="Dashboard"><i class="fal fa-chart-line"></i> Dashboard</a>
        <!-- Dashboard -->
        <a href="#" title="Timetable"><i class="fal fa-calendar-alt"></i> Timetable</a>
        <!-- Timetable -->
        <a href="/Pages/welcome.php" title="Welcome"><i class="fal fa-door-open"></i> Welcome</a>
        <!-- Welcome -->
      </div>
    </div>

    <!-- Workspace (Side) -->
    <div id="workspaceSide">

      <!-- Content (Side) -->
      <div id="contentSide"><iframe src="/Assets/News/index.html" frameborder="0"></iframe></div>
      <!-- Summit News -->

      <!-- Panel Tabs (Bottom) -->
      <div id="tabsPanel">
        <button class="current" title="Summit News"><i class="fal fa-newspaper"></i></button>
        <!-- Summit News -->
      </div>
    </div>
  </div>
</body>

</html>

本地存储的

JS:

    function saveEdits() { // Saving UI to Local Storage
    var editElems = {
        'edit1': document.getElementById('edit1').innerHTML,
    };

    localStorage.setItem('userEdits', JSON.stringify(editElems));
}
    function checkEdits() {
        var userEdits = localStorage.getItem('userEdits');
        if(userEdits) {
            userEdits = JSON.parse(userEdits);
            for(var elementId in userEdits) {
                document.getElementById(elementId).innerHTML = userEdits[elementId];
            }
        }
    }

Answer 1

你必须改变你的addTask()对此的功能:-

function addTask() {
  var li = document.createElement("li");
  li.setAttribute("class", "task_item"); //----Here (1)
  var inputValue = document.getElementById("input").value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
  if (inputValue === '') {} else {
    document.getElementById("taskList").appendChild(li);
  }
  document.getElementById("input").value = "";
  var span = document.createElement("SPAN");
  var txt = document.createTextNode("\u00D7");
  span.className = "taskClose";
  span.appendChild(txt);
  li.appendChild(span);

  for (i = 0; i < close.length; i++) {
    close[i].onclick = function() {
      var div = this.parentElement;
      div.style.display = "none";
    }
  }
}

我已为您的列表项 (1) 附加了一个类。这样您以后就可以使用 document.getElementsByClassName('task_item'); 引用所有列表项。那么你的saveEdits()功能将是这样的:-

function saveEdits() {
  localStorage.clear(); //You can change here
  var elements = document.getElementsByClassName('task_item');
  var taskList = []
  for (var i = elements.length - 1; i >= 0; i--) {
    taskList.push(elements[i].innerHTML.split("<span ")[0]);
  };
    var editElems = {
        'edit1': taskList,
    };
    localStorage.setItem('userEdits', JSON.stringify(editElems));
}

在这里，我使用 var elements = document.getElementsByClassName('task_item'); 将您的所有任务引用为一个数组.后来我遍历了所有列表项并使用 innterHTML 创建了 taskList。然后保存。

在 web 控制台这里是本地存储

"{"edit1":["task_3","task_2","task_1"]}"

为了在刷新时填充您的任务列表，更改您的 checkEdits()像这样:-

function checkEdits() {
    var userEdits = JSON.parse(localStorage.getItem('userEdits'));
    if(userEdits) {
        for(var elementId in userEdits.edit1) {
            var li = document.createElement("li");
            li.setAttribute("class", "task_item");
            li.innerHTML = userEdits.edit1[elementId];
              document.getElementById("taskList").appendChild(li);
            var span = document.createElement("SPAN");
            var txt = document.createTextNode("\u00D7");
            span.className = "taskClose";
            span.appendChild(txt);
            li.appendChild(span);
            for (i = 0; i < close.length; i++) {
              close[i].onclick = function() {
                var div = this.parentElement;
                div.style.display = "none";
              }
            }
        }
    }
}

我认为这就是您要找的。

PS:- 您删除任务的方式有问题。检查。