將本地存儲添加到任務列表

Question

我使用了w3schools教程代碼來創建任務列表，並對其進行了更改以滿足我的需要。

我要做的是，一旦按下.toolbar頂部的保存按鈕並刷新，添加的任務就會保留。

我已經通過向li添加一個class或id並將其引用到本地存儲進行了一些JS的嘗試，但是到目前為止，我還沒有成功。

附加代碼 ：

 var myNodelist = document.getElementsByTagName("LI"); var i; for (i = 0; i < myNodelist.length; i++) { var span = document.createElement("SPAN"); var txt = document.createTextNode("\×"); 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("\×"); 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');引用所有列表項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');將您的所有任務作為數組引用var elements = document.getElementsByClassName('task_item'); 。 后來，我遍歷了所有列表項，並使用intterHTML創建了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：-刪除任務的方式存在問題。 校驗。