JSON.stringify(), JSON.parse()

概要

ToDoリストの作成中に、Todoリスト配列情報(Data)をlocalStorageに格納することにした.バニラJSを勉強するためにDBを書くと…無理です.localStorageでも十分です.
しかし問題が発生した.localStorageでは配列を保存できません.localStorageには文字列値(文字列)しか格納できません.解決策は意外に簡単だ.配列をstring値に変換し、書き込むときにオブジェクト化して取り出して書き込むだけです.

const toDos = [];
// 새로운 할 일 목록이 생길때마다 toDos라는 배열에 push 하고 싶다.
// 웹이 새로 로드되면 배열은 항상 비어있는 상태로 시작한다.

function saveToDos(){
    // 이게 실행되는 시점에는 배열에 toDo가 저장되어 있다

    // localStorage.setItem("todos", toDos);
    // 이렇게 하면? todos: "1,2,3" 이렇게 나온다.

    localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
    // 이렇게 하면? todos: "[\"1\",\"2\",\"3\"]" 이렇게 나온다. 
}

上記のコードのコメントに示すように、私が初めて思ったように

   localStorage.setItem("todos", toDos); 

localStorageに格納されている場合は、配列を保存できません.
todos:結果は「1,2,3」です.ということで、JSON.stringgifyという名前の関数でstring(文字列)値に変換して保存します.

JSON

JSON (JavaScript Object Notation)

テキストベースのデータフォーマット

、構造化データを表す

JavaScriptでオブジェクトを作成するときに使用する

XMLの代わりにデータ転送によく使用されます.他のプログラミング言語を使用しても簡単に作成でき、ほとんどのプログラミング言語ではJSON形式のデータを処理するライブラリが提供されています.
JSON内蔵オブジェクトは、JavaScriptオブジェクトとJSON文字列の相互変換を実現するための2つの方法を提供します.

JSON.stringify()

メソッド

は、JavaScriptファイルからJSON形式(フォーマット、構文)の文字データに特定のデータを変換するために使用される.

JSONは、JavaScriptの全領域の任意の場所で使用できるグローバルオブジェクトです.

JSONオブジェクト上でstringfyというメソッドを実行すると、元のオブジェクトデータはJSON化されます.

const user = {
  name : "zwon",
  city : "Busan",
  job : "student"
}
const str = JSON.stringify(user); 
// 객체에서 문자로 데이터 변환

console.log('str', str); // str {"name":"zwon","city":"Busan","job":"student"}
console.log(typeof str); // string

ローカルストレージでは、todo listはアレイを文字列(String)として格納します.それを出すためには、再び客体化しなければなりません.

const savedToDos = localStorage.getItem(TODOS_KEY);

if(savedToDos !== null) {
  // 로컬 스토리지가 비어있지 않을 때
  
    const parsedToDos = JSON.parse(savedToDos);
  	// savedToDos는 String이고 변환 후 parsedToDos는 객체이다.

    toDos = parsedToDos;
    //지금 로컬스토리지에 있는거 값 저장해두고(toDos 배열에)

    parsedToDos.forEach(paintToDo);
    //parsedToDos 가 array 라서 foreach 가 가능(아이템 별로 순회)

    // parsedToDos.forEach(sayHello);  이거랑
    // parsedToDos.forEach((items) 
    // => console.log(`this is turn of ${item})); 
    // 이거랑 똑같다 <arrow function>
}

JSON.parse()

メソッド

では、JavaScriptで使用可能なデータにデータを変換できます.

JSONオブジェクト上でparseというメソッドを実行すると、元の文字データはJavaScriptで加工して使用できるデータに変換されます.

const obj = JSON.parse(str) // 문자에서 객체로 데이터 변환
console.log('obj', obj); // obj {name:"zwon",city:"Busan",job:"student"}
console.log(typeof obj); // object

出力結果を見ると、JavaScriptオブジェクトとJSON文字列の違いを見つけることができます.JSON文字列では、キー(キー)は二重引用符で囲まれ、JavaScriptオブジェクトには二重引用符はありません.

整理する

localStorage.setItem('obj', JSON.stringify({name: 'jooing', id: '1'})) 
JSON.parse(localStorage.getItem('obj')) 
// {name : 'jooing', id: '1'} 

localStorage.setItem('nums', JSON.stringify([1, 2, 3])) 
JSON.parse(localStorage.getItem('nums')) 
// [1, 2, 3]

上のコードでは、上の3行はlocalStorageにオブジェクトを格納する方法を示し、次の3行は配列をローカルストレージに格納する方法を示しています.
「データの書き込み(保存)」セクション(setItem)でJSON.stringfiy()は、受信したデータをJSON形式でシリアル化することを意味する.
すなわち,Javascriptオブジェクトは配列をJSON文字列に変換する.
次に「データ部分の読み取り」(getItem)を見るとJSONが表示されます.parse()は、JSON文字列に変換されたデータを解析し、元のJavaScript値またはオブジェクトを生成するために使用されます.
逆シーケンス化は、簡単に言えばJavaScriptから元のデータを直接読み込むことです.