✏️ TIL

To DoリストをlocalStorageに保存し、保存したリストを画面に出力します.

📚 Algorithm

1.先頭に「todos」配列を作成する

配列形式の待機事項リストを格納します.
やるべきことは一つではなく、たくさんのことだからです.

2.やるべきことが生成されるたびに、「toDos」配列に追加されます。

2-1. このため、「toDoobj」objectを作成します.

  const toDoObj = {
text : text,
id : toDos.length + 1 }; // 1
toDos.push(toDoObj); // 2

任意の配列がある場合のarray.lengthで配列の長さを知ることができます.
ただし**これはtodos配列にプッシュする前に(配列は空)
id上のtoDos.長さ+1.

pushを使用して、todos配列にtodoobjを挿入します.

3.ボタンをクリックすると、削除すべき項目をユーザーに知らせる<li>

3-1. <li>にもidが追加されています.

li.id = toDos.length + 1

4.localStorageにtoDosを格納する関数を作成します。

4-1. 1の「toDos」配列を取得し、ローカルストレージの「saveToDos」を作成します.

function saveToDos (){
`localStorage.setItem(TODOS_LS, toDos); }

4-2. ただしlocalStorageにはJSデータ(X)しか格納できません.だからjsobjectをstringのJSONに変換stringgifyを使用します.

function saveToDos (){
localStorage.setItem(TODOS_LS, JSON.stringify(toDos)); }

💡 JSON.stringify
:JSONオブジェクトをStringに変換します.

5.localStorageに格納されているtoDosを読み込みます。

5-1. 読み込んだtoDosはstiringなのでstring>objectのためにJSONを再利用します.

const parsedToDos = JSON.parse(loadedToDos);

💡 JSON.parse
:StringをJSONオブジェクトに変換します.

6.localStorgeからロードしたParsedToDosを画面に出力します。

6-1. ParsedToDosからロードされた配列内のすべてのオブジェクトに対してforEachを使用してpaintToDosを実行します.

parsedToDos.forEach(function(toDo) {paintToDo(toDo.text);
} );

💡 forEach
:arrayの関数として、arrayの各関数に対して1回実行します.array.forEach(function(callback) { function (currentValue.text)以下に要約する.

const parsedToDos = JSON.parse(loadedToDos);
// loadedToDos로 배열을 불러옴.
parsedToDos.forEach(function(toDo)
// array.forEach (function (callback함수명)
// 함수 이름을 function name () 이 아니라 function(name) 이라고 지정해 줬다고 생각하면 됨
{paintToDo(toDo.text);
// { 실행할 function (  currentValue . 배열의 Key);
// currentValue = 위에서 지정한 Function
// paintToDo가 화면출력함수라서 배열의 모든 요소 중 text라는 key가 forEach를 통해 출력된 것
} );