자바스크립트 JSON 소개

데이터가 브라우저에서 서버로 전송되면 객체가 JSON(JavaScript Object Notation) 텍스트로 변환됩니다.

아래 예를 참조하십시오.

const person = {
  name: 'Bello',
  age: 27,
  gender: 'male',
  married: null,
  isWebDeveloper: true
};

const toJson = JSON.stringify(person);

console.log(typeof toJson); // string 
// => now the data can be transferred successfully to the server

toJson;

/* 
'{"name":"Bello","age":27,"gender":"male","married":null,"isWebDeveloper":true}'
*/

이 예에서 결과에는 일부 바이트를 저장할 추가 공간이 없습니다.

The resulting JSON string is called either JSON-encoded, serialized, stringified, or marshaled object.

참고: 문자열화된 개체는 큰따옴표로 묶어야 합니다"name":"Bello",....

서버의 문자열화된 개체도 브라우저의 개체로 변환됩니다.

아래 예를 참조하십시오.

const json = '{"name":"Bello","age":27,"gender":"male","married":null,"isWebDeveloper":true}'
const toObj = JSON.parse(json);

console.log(typeof toObj); // object 
// => now the data can be transferred successfully to the browser

console.log(toObj);

/*
{
  name: 'Bello',
  age: 27,
  gender: 'male',
  married: null,
  isWebDeveloper: true
}
*/

JSON.stringify는 배열에서도 사용할 수 있으며 지원되는 기본 데이터 유형 - string number boolean null
아래 예를 참조하십시오.

const toString = JSON.stringify(69);
console.log(typeof toString); // string

console.log( JSON.stringify('JavaScript') ) // "JavaScript" 
// => in double-quotes

const toStr = JSON.stringify(true);
console.log(typeof toStr); // string

const toStr_ = JSON.stringify([ 9, 69, 96 ]); 
console.log(toStr_, typeof toStr_); // [9,69,96] string

JSON은 다음을 포함하는 일부 특정 개체 속성을 건너뜁니다.

기능 속성;

정의되지 않은 속성;

기호 키 및 값

const obj = {
  function() { 
    console.log("skipped function");
  },
  [Symbol("id")]: 123, // skipped
  prop: undefined // skipped
};

console.log( JSON.stringify(obj) ); // {}

마지막으로 순환 참조가 없어야 합니다.

const favNum = {
  favNum1: 69
};

const favLang = {
  favLang: 'Python'
}

favNum.num = favLang; // favNum references favLang
favLang.lang = favNum; // favLang references favNum


JSON.stringify(favNum); // TypeError: Converting circular structure to JSON

서버에서 데이터를 저장하고 검색할 수도 있습니다.

아래 예를 참조하십시오.

// storing data:
const obj = { name: "Bello", age: 27, city: "Lagos" };
const toJson = JSON.stringify(obj); // data moves to the server
localStorage.setItem("testJSON", toJson);

// retrieving data:
const text = localStorage.getItem("testJSON");
const toObj = JSON.parse(text); // data moves to the browser
console.log(toObj.name); // Bello => accessed name

localStorage의 일반적인 용도는 모드(라이트 및 다크) 및 인증 전환입니다.

위의 예에서 setItem의 localStorage는 브라우저에서 데이터를 설정하거나 저장하는 데 사용되고 또한 getItem의 localStorage는 브라우저에서 데이터를 검색하거나 가져오는 데 사용됩니다.



웹 APIwindow.localStorage(및 window.sessionStorage )에 대해서는 나중에 자세히 설명합니다.