JSON (2)

◉ JSON.stringify()

 - JSON의 일반적인 사용 용도 : 웹 서버와 데이터 교환 

 - 웹 서버에 데이터를 보낼 때, 데이터는 문자열 형태여야 함 

 - JSON.stringify() : 자바스크립트 객체 데이터 → 문자열로 변환 

 

 

1. JS 객체를 JSON 데이터로 변경하기 

 - [ originData ]에 자바스크립트 객체를 담고, alert()를 이용해 데이터와 타입 확인하기 

    : 오브젝트 객체로 출력됨 

 

- [ changeData ]에는 객체를 JSON 데이터로 담고, 데이터와 타입 확인하기 

   → JSON.stringify() 이용 

   : 데이터는 문자열이라 값 자체가 반환되고, 타입은 string으로 출력됨 

 

∴ JSON 데이터는 문자열이다!

 

 

 

2. JS 배열을 JSON 데이터로 변경하기 

 

 - [ originDataArray ]에 자바스크립트 배열을 담고, 데이터와 타입을 확인하기 

    • 데이터 확인 : 배열 데이터만 출력 

 

  • 타입 확인 : 객체로 출력 

 

 

 - [ changeDataObject ]에 배열을 JSON 데이터로 담고, 데이터와 타입 확인하기 

  • 데이터 확인 : 문자열 → 대괄호 안에 큰 따옴표로 감싸서 반환 

 

 

  • 타입 확인 : string 

 

 - 비교 

 

 

---

◉ 데이터 저장 

 - 데이터를 저장할 때는 저장 위치에 관계없이 텍스트는 항상 

 - JSON을 사용하면, 자바스크립트 객체를 텍스트로 저장 가능함 

 

 - 일단, 데이터를 저장하기 전에 [ Web Storage API ]라는 것을 보도록 하자. 

 

 

 

1. Web Storage API

 

 - API : Application Programming Interface의 약자 

 - 라이브러리와 비교 

  • 라이브러리 : 함수들의 집합 

  • API : 라이브러리에 접근하기 위한 규칙을 정의한 것 

  → 즉, 개발자가 라이브러리가 제공하는 함수를 이용하여 프로그램을 작성할 때, 내부 구조를 알 필요 없이 단순히 API에 정의된 입력값을 주고 결과값을 사용할 수 있게 해줌 

 

 - Open API

  • 특정 서비스를 제공하는 서비스 업체가 자신들의 서비스에 접근할 수 있도록 그 방법을 외부에 공개한 것으로, 해당 서비스로 접근하기 위한 규칙을 정의한 것 

  • 그 중 Web Storage API라는 브라우저에서 데이터를 저장하고 검색하기 위한 간단한 구문으로 사용하기 매우 쉬움 

 

 - 예시 

localStorage.setItem("name", "구름");
localStorage.getItem("name");

 ▪︎ localStorage 객체 

    • 특정 웹 사이트의 로컬 저장소에 대한 접근을 제공함 

    • 해당 도메인에 대한 데이터 항목을 저장, 읽기, 추가, 수정 및 삭제 가능 

    • 데이터 : 만료일 없이 저장됨, 브라우저 닫아도 삭제되지 않음 

 

 ▪︎ setItem() 메서드 

    • 저장소에 데이터 항목을 저장함 

    • 매개변수 : 이름과 값 사용 

 

 ▪︎ getItem() 메서드

    • 저장소에서 데이터 항목을 검색함 

    • 매개변수 : 이름 사용 

 

 ▪︎ sessionStorage 객체는 localStorage 객체와 동일

    • 하지만, sessionStorage 객체는 한 세션에 대한 데이터를 저장하기 때문에, 브라우저 닫으면 데이터 삭제됨 

 

 

 

 

2. 로컬 저장소에 데이터 저장 

 

 

 

---

◉ 예외 

 

1. 날짜의 문자열화 

 

 - JSON에서는 날짜 객체가 허용되지 않음 

 - 만약 사용하면 모든 날짜를 문자로 반환함 

 

 - [ today ] 속성에 [ new Date() ]를 담아 자바스크립트 오늘 날짜 객체를 담아보자. 

    : 날짜 형식의 모든 것이 큰 따옴표 내에 들어가 있는 것을 확인할 수 있음 

 

 

 

2. 객체의 함숫값 

 

 - JSON에서는 함수는 객체 값으로 허용되지 않음 

 - [ JSON.stringify() ]로 데이터 변환 시, 함수는 키와 값 모두 제거됨 

 - 만약 문자열로 값을 변환하고 싶다면, 미리 문자열로 변경하면 됨 

 

 - ① 데이터를 JSON.stringify()로 변환한 후 출력해보기 

        : 함수를 담은 age key까지 생략됨 

 

- ② [ toString() ] 메서드로 함수 유형을 문자열로 변경 후 호출해보기 

       : 함수를 문자열 즉, 큰 따옴표에 담아 그대로 반환함