[JS:実習:A To Do Listを作成(3)]

📍 Javascriptを勉強している間に、学習ノートに整理したものを運んできました.

Making a To Do List (3)

JSON

“JavaScript Object Notation”
すなわち,データを渡す際にobjectに変換し,JavaScriptがデータを処理できるようにすることができる.
「JSを格納できないデータをローカルに格納!」
JSはlocalstorageのすべてのデータをstringとして格納しようとした.すなわち、ローカルストレージはstringのみを格納できます.
Step 4. JSON.stringfyを使用して、jsに値を保存してみます.

function saveToDos() {
    ❌ localStorage.setItem(TODOS_LS, toDos); ❌
    /* Local storage에는 JS의 data를 저장할 수가 없기 때문에 JSON.stringfy를 적용해보자.*/
    localStorage.setItem(TODOS_LS, JSON.stringify(toDos)); 
}

JSON.stringfyはJSobject(data)をstringに変換します!
JSON.stringfyを使用してvalue値をコミットすると、はvalue値(やるべきこと1、やるべきこと2)をstringとして格納し、各id値に1つずつ格納することができる.

function loadToDos() {
    const loadedToDos = localStorage.getItem(TODOS_LS);
    if (loadedToDos !== null) {
    console.log(loadedToDos);
    // 출력해보면 
    }
}

リフレッシュしてもvalue値(やるべきこと1,やるべきこと2)がstringとして格納され、id値ごとに1つずつ存在すると決定できます.
Step 5. JSON.parseを使用して、jsに格納されている文字列形式の値をオブジェクト形式に変換しようとします.

function loadToDos() {
    const loadedToDos = localStorage.getItem(TODOS_LS);
    if (loadedToDos !== null) {

/* JSON.stringify를 이용하여 불러온 것이 string 이므로, string에서 object로 변환해야 한다. 이때 쓰는 방법이 JSON.parse 이다.*/ 
    const parsedToDos = JSON.parse(loadedToDos);
    console.log(parsedToDos); 
    // 출력해보면 
    }
}

再度リフレッシュすると、文字列形式で格納された値(やるべきこと1、やるべきこと2)がobject(data)に保存されているのが表示されます.
~比較してみる~
1. JSON.解析が適用されていない場合:stringとして保存されます.
JSON.parseを適用する場合:object(データ)に変換-格納します.
localstorageからロードされたデータを画面に表示してみましょう.つまり、pardeToDosのデータに対してpaintToDo関数が実行されます.このときarrayのコマンドarrayを使用します.ForEachです

forEach

デフォルトでは、関数が実行され、配列に含まれる各関数が1回実行されます.
Step 6. array.forEachを使用して、text value値(やるべきこと1、やるべきこと2)をそれぞれ出力してみます.

function loadToDos() {
    const loadedToDos = localStorage.getItem(TODOS_LS);
    if (loadedToDos !== null) {
    const parsedToDos = JSON.parse(loadedToDos);
    parsedToDos.forEach(function(toDo) {
    console.log(toDo.text);
    // 출력해보면
    }
}

ParsedToDosの各toDo(text)はコンソールです.ログ出力を確認できます.
tip.

parsedToDos.forEach(function(toDo) {
    console.log(toDo.text);

この方式は他の方法でも適用できる.

function something(toDo) {
    console.log(toDo.text);
}
function loadToDos() {
    const loadedToDos = localStorage.getItem(TODOS_LS);
    if (loadedToDos !== null) {
    const parsedToDos = JSON.parse(loadedToDos);
    parsedToDos.forEach(something);
    // 출력해보면
    }
}

可視出力は同じです.
を返します.paintToDo()、toDoを使用します.textをホームページから印刷します.

function loadToDos() {
    const loadedToDos = localStorage.getItem(TODOS_LS);
    if (loadedToDos !== null) {
    const parsedToDos = JSON.parse(loadedToDos);
    parsedToDos.forEach(function(toDo) {
        paintToDo(toDo.text);
    }
}

整理すると、

function loadToDos() {
    const loadedToDos = localStorage.getItem(TODOS_LS);
    // 1. toDos(TODOS_LS)를 localStorage에서 가져온 뒤
    if (loadedToDos !== null) {
    const parsedToDos = JSON.parse(loadedToDos);
    // 2. JSON.parse를 이용하여 string에서 object로 변환시키고,
    parsedToDos.forEach(function(toDo) {
    // 3. 각각의 text 값(해야할 일1, 해야할일 2)에 대해서
        paintToDo(toDo.text);
    // 4. 웹페이지 상에서 출력되도록 만드는 paintToDo라는 function함수가 실행될 것이다.
    }
}

リフレッシュにより、text value値(やるべきこと1、やるべきこと2)が画面に出力されたことを自動的に決定できます.