ダイナミックボタンを使用してlocalStorageから配列オブジェクトを削除するにはどうすればよいですか？ [JSのみ]

ここにJSを新しくして、ここで数時間苦労しています。ダイナミックボタンを使用してlocalStorageから配列オブジェクトを削除するにはどうすればよいですか？ [JSのみ]

私は、オブジェクトをlocalStorage内の配列に格納するボタンと、コンテンツと削除ボタンを含む動的リストアイテムを作成するボタンを使用してリストを作成しました。削除ボタンをクリックすると、動的リスト項目は削除されますが、それはlocalStorageから削除されません。私はlocalStorageの特定の配列インデックスに各ボタンを割り当てる方法を理解できません。

https://codepen.io/jupiterisland/pen/ooPXWV

var taskList = []; //build array 
 

 
    if(localStorage.taskList){ //call func to recreate li's on refresh 
 
    taskList = JSON.parse(localStorage.taskList) || []; 
 
    createTasks(taskList) 
 
    } 
 

 
    function submitFunc() { 
 
    var task = { //build objects 
 
     desc: document.getElementsByTagName("textarea")[0].value, 
 
     date: document.getElementsByTagName("input")[0].value, 
 
     time: document.getElementsByTagName("input")[1].value, 
 
     important: document.getElementsByTagName("input")[1].checked 
 
    }; 
 

 
    if(task.desc && task.date !== ""){ 
 
     taskList[taskList.length] = task; //put objects inside array 
 
     localStorage.taskList = JSON.stringify(taskList); //store array with stringify 
 
     newTaskList = JSON.parse(localStorage.taskList); //retrieve array with parse 
 

 
     createTasks(newTaskList) 
 

 
     document.getElementById("error").style.display = "none"; 
 
     return false; //prevent submit 
 
    } else { 
 
     document.getElementById("error").style.display = "block"; 
 
     document.getElementById("error").innerHTML = "Please enter a task description and a date."; 
 
     return false; 
 
    } 
 
    } 
 

 
    function createTasks (newTaskList){ 
 

 
    for (i = 0; i < newTaskList.length; i++) { // display objects in list items 
 

 
     var currentTask = newTaskList[i]; 
 
     var taskIndex = newTaskList.indexOf(currentTask); 
 
     newElement(); 
 

 
     function newElement() { 
 
     var liNode = document.createElement("li"); 
 
     var titleNode = document.createElement("h3"); 
 
     var dNode = document.createElement("p"); 
 
     var tNode = document.createElement("p"); 
 
     var delNode = document.createElement("button") 
 

 
     liNode.className = "liNode"; 
 
     titleNode.className = "titleNode"; 
 
     dNode.className = "dNode"; 
 
     tNode.className = "tNode"; 
 
     delNode.className = "delete"; 
 
     delNode.innerText = "Delete"; 
 

 
     var titleText = newTaskList[i].desc; 
 
     var dateText = newTaskList[i].date; 
 
     var timeText = newTaskList[i].time; 
 

 
     var descNode = document.createTextNode(titleText); 
 
     var dateNode = document.createTextNode(dateText); 
 
     var timeNode = document.createTextNode(timeText); 
 

 
     titleNode.appendChild(descNode); 
 
     dNode.appendChild(dateNode); 
 
     tNode.appendChild(timeNode); 
 
     liNode.appendChild(titleNode); 
 
     liNode.appendChild(dNode); 
 
     liNode.appendChild(tNode); 
 
     liNode.appendChild(delNode); 
 

 
     document.getElementById("taskBoard").appendChild(liNode); 
 

 
     if (taskBoard.childElementCount > newTaskList.length) { //remove excess divs 
 
      for (n = 0; taskBoard.childElementCount - 2; n++) { 
 
      taskBoard.removeChild(taskBoard.firstChild); 
 
      } 
 
     } 
 

 
      function deleteTasks(){ 
 
      var listItem = this.parentNode; 
 
      var ul = listItem.parentNode; 
 
      ul.removeChild(listItem); 
 
      } 
 
     delNode.addEventListener("click", deleteTasks); 
 
     } 
 
    } 
 
    }

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 
    <title>Document</title> 
 
</head> 
 
<body> 
 
    <h1>My Task Board</h1> 
 
    <div class="container"> 
 
    <form onsubmit="return submitFunc()"> 
 
    <div> 
 
     <label for="">Task:</label> 
 
     <textarea name="name" rows="8" cols="80"placeholder="Please enter your task description"></textarea> 
 
     </div> 
 
     <div> 
 
     <label for="">Deadline:</label> 
 
     <input type="date" placeholder="Choose a date"> 
 
     <input type="time" placeholder="Set time"> 
 
     </div> 
 
     <div> 
 
     <label for="">Important:</label> 
 
     <input type="checkbox" name="" value=""> 
 
     </div> 
 
     <button type="submit" name="button">Add Task</button> 
 
     <div id="error"></div> 
 
    </form> 
 
    </div> 
 
    
 
    <div> 
 
     <ul id="taskBoard"></ul> 
 
    </div> 
 
</body> 
 
</html>

出典

2017-11-27 user8477893

var taskList = []; //build array 

    if(localStorage.taskList){ //call func to recreate li's on refresh 
    taskList = JSON.parse(localStorage.taskList) || []; 
    createTasks(taskList) 
    } 
function fakeGuid() { 
    function s4() { 
    return Math.floor((1 + Math.random()) * 0x10000) 
     .toString(16) 
     .substring(1); 
    } 
    return s4() + s4() + '-' + s4() + '-' + s4() + '-' + 
    s4() + '-' + s4() + s4() + s4(); 
} 
    function submitFunc() { 
    var task = { //build objects 
     desc: document.getElementsByTagName("textarea")[0].value, 
     date: document.getElementsByTagName("input")[0].value, 
     time: document.getElementsByTagName("input")[1].value, 
     important: document.getElementsByTagName("input")[1].checked, 
     id :fakeGuid() 
    }; 

    if(task.desc && task.date !== ""){ 
     taskList[taskList.length] = task; //put objects inside array 
     localStorage.taskList = JSON.stringify(taskList); //store array with stringify 
     newTaskList = JSON.parse(localStorage.taskList); //retrieve array with parse 

     createTasks(newTaskList) 

     document.getElementById("error").style.display = "none"; 
     return false; //prevent submit 
    } else { 
     document.getElementById("error").style.display = "block"; 
     document.getElementById("error").innerHTML = "Please enter a task description and a date."; 
     return false; 
    } 
    } 

    function createTasks (newTaskList){ 

    for (i = 0; i < newTaskList.length; i++) { // display objects in list items 

     newElement(i); 

     function newElement(currentIndex) { 
     var liNode = document.createElement("li"); 
     var titleNode = document.createElement("h3"); 
     var dNode = document.createElement("p"); 
     var tNode = document.createElement("p"); 
     var delNode = document.createElement("button") 

     liNode.className = "liNode"; 
     titleNode.className = "titleNode"; 
     dNode.className = "dNode"; 
     tNode.className = "tNode"; 
     delNode.className = "delete"; 
     delNode.innerText = "Delete"; 

     var titleText = newTaskList[i].desc; 
     var dateText = newTaskList[i].date; 
     var timeText = newTaskList[i].time; 

     var descNode = document.createTextNode(titleText); 
     var dateNode = document.createTextNode(dateText); 
     var timeNode = document.createTextNode(timeText); 

     titleNode.appendChild(descNode); 
     dNode.appendChild(dateNode); 
     tNode.appendChild(timeNode); 
     liNode.appendChild(titleNode); 
     liNode.appendChild(dNode); 
     liNode.appendChild(tNode); 
     liNode.appendChild(delNode); 

     document.getElementById("taskBoard").appendChild(liNode); 

     if (taskBoard.childElementCount > newTaskList.length) { //remove excess divs 
      for (n = 0; taskBoard.childElementCount - 2; n++) { 
      taskBoard.removeChild(taskBoard.firstChild); 
      } 
     } 
      function deleteTasks(node, currentTask) { 
      var listItem = node.parentNode; 
      var ul = listItem.parentNode; 
      ul.removeChild(listItem); 
      taskList = taskList.filter(function(t) { 
       return t.id !== currentTask.id; 
      }); 
      localStorage.taskList = JSON.stringify(taskList); //store array with stringify 
      } 
      var currentTask = newTaskList[currentIndex]; 
     delNode.addEventListener("click",() => deleteTasks(delNode, currentTask)); 
     } 
    } 
    }

DOM要素を操作するためにインデックスを使用しないでください。代わりに、一意のIDを使用してください。この場合、私は偽のGUIDを作成しました。
続きを読む。関数にインデックスを渡すことができないのは、インデックスが別のコンテキストにバインドされているためです。
ローカルストレージ用にJSONを文字列化する理由は何ですか？あなたは単に配列を格納することができます。

出典

2017-11-27 14:44:19 Zanko

返信いただきありがとうございます！私はこのコードを試しましたが、2つのタスクを追加して削除すると、何らかの理由で1つしか削除されませんでした... – user8477893

@ user8477893ちょっとマイナーなバグ:) – Zanko

ありがとうございました！あなたが追加した数学の全部が私のレベルではあまりにも複雑で、私はそれを理解しているとは思えませんが、私はベストを尽くします – user8477893

ダイナミックボタンを使用してlocalStorageから配列オブジェクトを削除するにはどうすればよいですか？ [JSのみ]

答えて

関連する問題