javaScriptで制作したToDoアプリをlocalストレージで管理したい

前提・実現したいこと

javaScriptでHTML上ではToDOアプリが完成しました。
ストレージに入れて管理する際に、追加ボタンを押したらストレージにpushして、削除ボタンを押したらspliceしたいです。
pushで１個ずつ入れることはできてもspliceの際に、該当のデータと紐づけすることができませんでした。
HTML上とストレージが同じになるようにしたいです。

発生している問題・エラーメッセージ

spliceに与えるデータとして、data.indexなどとしてみましたが
定義されていない、undefindなどが出てきます。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3 <head>
4   <title>To Do アプリ</title>
5   <link rel="stylesheet" href="src/styles.css">
6   <meta charset="UTF-8" />
7 </head>
8
9 <body>
10   <div class="input-area">
11       <input id="add-text" type="text" placeholder="TODOを入力">
12       <button id = "add-button">追加</button>
13   </div>
14   
15     <div class="imcomplete-area">
16         <p class="title">未完了のTODOです</p>
17         <div id="imcomplete-list">
18           <ul>
19
20           </ul>
21         </div>
22     </div>
23     <div class="complete-area">
24       <p class="title">完了したTODO</p>
25           <div id="complete-list">
26               <ul>
27
28               </ul>
29           </div>
30     </div>
31   
32   <script src="src/index.js"></script>
33 </body>
34</html>
35

import "./styles.css";

const onClickAdd = () => {
 // テキストを取得
 const inputText = document.getElementById("add-text").value;
 document.getElementById("add-text").value = "";
 creteIncompleteList(inputText);
 addStrage();
}

// 未完了リストに追加する関数
const creteIncompleteList = (text) => {
 // divタグの生成
 const div = document.createElement("div");
 div.className = "list-row";

 // liタグの生成

 const li = document.createElement("li");
 li.innerText = text

 // divタグの子要素にliを設定
 div.appendChild(li);

 //未完了のリストに追加
 document.getElementById("imcomplete-list").appendChild(div);

 // button(完了)タグを生成
 const completeButton = document.createElement("button");
 completeButton.innerText = "完了";
 completeButton.addEventListener("click", ()=>{
   // 押された完了ボタンの親divを未完了リストから削除
   deleteFromCompleteButton(completeButton.parentNode);
   deleteStrage();

   //完了リストに追加
   const addTarget = completeButton.parentNode;

   //TODO内容のテキストの取得
   const text = addTarget.firstElementChild.innerText;

   //div以下を初期化
   addTarget.textContent = null;
   
   // liを生成
   const li = document.createElement("li");
   li.innerText = text;

   // 戻るボタン
   const backButton = document.createElement("button")
   backButton.innerText = "戻す";

   // 
   // backButtonにイベントを追加
   backButton.addEventListener("click",()=>{
     const backTarget = backButton.parentNode;
     const text = backTarget.firstChild.innerText;
    
     // 削除
     document.getElementById("complete-list").removeChild(backTarget);
     creteIncompleteList(text);
   })

   const IncompleteButton = document.createElement("button");
   IncompleteButton.innerText ="削除";
   // backButtonにイベントを追加
   IncompleteButton.addEventListener("click",()=>{
 
     // 削除
     document.getElementById("complete-list").removeChild(IncompleteButton.parentNode);
     })

   // divタグの子要素に各要路を追加
   addTarget.appendChild(li);
   addTarget.appendChild(backButton);
   addTarget.appendChild(IncompleteButton);
   
  
   //完了のリストに追加
   document.getElementById("complete-list").appendChild(addTarget);
 })

 const deleteButton = document.createElement("button");
 deleteButton.innerText = "削除";
 deleteButton.addEventListener("click", ()=>{
   // 押された削除ボタンの親divを未完了リストから削除
   deleteFromCompleteButton(deleteButton.parentNode);

 })

 div.appendChild(completeButton);
 div.appendChild(deleteButton);


};

// 未完了リストから指定の要素を削除

const deleteFromCompleteButton = (target)=>{
 document.getElementById("imcomplete-list").removeChild(target);
}

document.getElementById("add-button").addEventListener("click", () => onClickAdd());




function getStrage() {
    let list = localStorage.getItem("TodoList");
    if (list === null) {
      return [];
    } else {
      return JSON.parse(list);
    }
  }
  
  function addStrage(item) {
    let list = getStrage();
    list.push(item);
    setLocal(list);
  }
  
  function deleteStrage(index) {
    let list = getStrage();
    list.splice(index, 1);
    localStorage.setItem("TodoList", JSON.stringify(list));
  }
  
  function setStrage(list) {
    localStorage.setItem("TodoList", JSON.stringify(list));
  }

試したこと

deleteStrage()の引数を与えるために
forで回してdata-indexの値を取得して、
data.indexで値を取得できればと考えましたが、undefindや定義されてないと出ていきます。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

yambejp

2021/12/27 02:29

「ストレージ」という曖昧な言葉は使わないほうがよいでしょう localStorageなら文書中もそう書いてください

行動規範の内容に同意します

回答1件

ベストアンサー

とりあえず完了/未完了は割愛しこんな感じで

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  const data=localStorage.data?JSON.parse(localStorage.data):[];
4  const add=document.querySelector('#add-text');
5  const viewData=()=>{
6    const ul=document.querySelector('#list ul');
7    ul.innerHTML="";
8    data.map(x=>[
9      document.createTextNode(x),
10      Object.assign(document.createElement('input'),{type:'button',value:'del',className:'del'}),
11      ].reduce((x,y)=>(x.appendChild(y),x),document.createElement('li'))).forEach(x=>ul.appendChild(x));
12  }
13  viewData();
14  document.addEventListener('click',e=>{
15    const t=e.target;
16    if(t.closest('.del')){
17      const idx=[...document.querySelectorAll('.del')].indexOf(t);
18      data.splice(idx,1);
19    }
20    if(add.value!=="" && t.id=='add-button'){
21      data.push(add.value);
22    }
23    if(t instanceof HTMLInputElement){
24      localStorage.data=JSON.stringify(data);
25      viewData();
26    }
27  });
28});
29</script>
30<input id="add-text" type="text" placeholder="TODOを入力">
31<input type="button"  id="add-button" value="追加">
32<div id="list">
33<ul></ul>
34</div>