JSON 파일의 특징과 Storage에서 데이터 주고 받기

JSON

• 자바스크립트의 데이터를 나타내는 포맷 ⇒ 키: 값 (key : vaule)
• 데이터 타입 중 undefined 는 사용 불가능
• JSON 은 하나의 데이터이기 때문에, 데이터 타입을 혼용해서 사용 불가
• 정확하게 말하자면 JSON 파일은 자체는 문자 데이터이다. (type of 하면 string 으로 나옴)
• JS 파일로 import 해서 사용하면, 작성한 데이터 타입으로 읽혀짐(객체면 객체, 배열이면 배열)
• JavaScript 값이나 객체를 JSON.stringify() 를 통해 JSON 문자열로 변환
• JSON 문자열의 구문을 분석하고JSON.parse() 를 통해 JavaScript 값이나 객체를 생성

Storage

• sessionStorage : 데이터가 페이지 세션이 끝날 때, 즉 페이지를 닫을 때 사라진다.

• localStorage : 사이트에 종속이 되어 관리되며, 데이터가 만료되지 않는다.

  • 데이터 추가하기

  localStorage.setItem('myCat', 'Tom');
  localStorage.setItem('myCat', JSON.stringify('myCat'));
  // myCat 을 로컬 스토리지에 보관하는데, json 파일로 변환해서 보관한다. 

  • 항목 읽기, 가져오기

  const cat = localStorage.getItem('myCat');
  const newCat = JSON.parse('myCat');
      // JSON 데이터를 가져와서 객체 데이터화 시켜서 변수에 할당

  • 제거

  localStorage.removeItem('myCat');

  • localStorage 항목의 전체 제거

  localStorage.clear();