JSON 과 LocalStorage

JSON이란? 

- 데이터를 저장하거나 전송할때 많이 사용되는 경량의 데이터 교환 방식을 말함

- JSON은 데이터 포맷일뿐이며, 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐

- Object와 유사하게 {key : value} 형태로 이루어진 파일 포맷

- 자바스크립트를 이용하여 JSON형식의 문서를 쉽게 자바스크립트 객체로 변환할 수 있음

- 프로그래밍 언어와 플랫폼에 상관없이 독립적으로 사용할 수 있음

 

1. JSON의 구조

JSON은 자바스크립트 객체 리터럴 문법을 따르는 문자열로, name-value 형태의 쌍으로 이루어짐

{
  "students" : [
   {
     "name" : "Jack",
     "major" : "Math"
   },
   {
     "name" : "Anna",
     "major" : "Physics"
   },
  ]
}

JSON 문자열과 프로퍼티 이름 작성 시 큰 따옴표를 사용하여 표기해야한다 (작은 따옴표x)

 

2. JSON.stringify (자바스크립트 객체 -> JSON 텍스트)

자바스크립트 객체를 JSON 문자열로 변환 (serialize 직렬화)

//자바스크립트 객체
const student = {
  name: '홍길동',
  color: 'white',
  age: 12,
  sayHello: function () {
    console.log(`저는 ${this.name}입니다`);
  },
};

const json = JSON.stringify(student);
console.log(json);
//{"name":"홍길동","color":"white","age":12}

여기서 알 수 있는 것은, JSON.stringify 호출 시 함수 프로퍼티 sayHello()는 무시된다는 것!

이 외에도 키가 심볼인 심볼형 프로퍼티와, 값이 undefined인 프로퍼티는 무시됨

 

replacer

JSON으로 인코딩 하길 원하는 프로퍼티가 담긴 배열. 또는 매핑 함수

const json = JSON.stringify(student, ['name', 'color']);
console.log(json); //{"name":"홍길동","color":"white"}

 

3. JSON.parse (JSON 텍스트 -> 자바스크립트 객체)

JSON형식의 텍스트를 자바스크립트 객체로 변환 (deserialize 역질렬화)

JSON 형태로 온 데이터를 추출할때 사용

const json = '{"name" : "홍길동", "age": 32}'; //JSON형식의 문자열
const obj = JSON.parse(json);
console.log(obj); //{name: "홍길동", age: 32} 자바스크립트 객체

reviver

해당 키와 이미 파싱이 끝난 값을 인자로 받아 이를 가공하여 최종값을 반환할 수 있는 함수

JSON.parse('{"num": 5, "str": "hello"}', (key, value) =>
  typeof value === 'number' ? value * 2 : value     // 숫자라면 2배, 나머진 그대로
);
//{num: 10, str: "hello"}

 

4. JSON 관련 유용한 사이트

jsonparser.org/

JSON을 객체 형태로 확인할 수 있는 사이트

tools.learningcontainer.com/json-validator/

유효한 JSON 데이터인지 확인할 수 있는 사이트

---

Web Storage

서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 하는 HTML5의 새로운 기능

종류로는 로컬스토리지(local storage)와 세션 스토리지(session storage)가 존재

 

1. LocalStorage 

- 유효기간이 영구적

- 브라우저를 종료해도 데이터가 유지됨

- 도메인과 브라우저별로 저장 (도메인이 다른 경우에는 로컬 스토리지에 접근 불가능)

- 값은 반드시 문자열(string) 데이터 타입만 지원

 

(1) 데이터 추가하기

localStorage.setItem('name', '홍기동');
localStorage.name = '홍길동';
localStorage['name'] = '홍길동';

(2) 데이터 조회하기

const getValue = localStorage.getItem('name');
const getValue = localStorage.name;
const getValue = localStorage['name'];

console.log(getValue); //홍길동

크롬 개발자 도구 > Application창에서 확인 가능

 

(3) 데이터 삭제하기 (특정 키 값의 이름을 가진 데이터 삭제)

localStorage.removeItem('name');

(4) 모든 데이터 삭제하기

localStorage.clear();

 

**주의) 오직 문자형(string) 데이터 타입만 지원 

localStorage.setItem('num',3);
localStorage.getItem('num') === 3; //false
localStorage.getItem('num'); // "3"
typeof localStorage.getItem('num'); // "string"

해결방법

위와 같은 문제를 피하기 위해 로컬스토리에 쓸 데이터를 JSON형태로 직렬화하고, 읽은 데이터를 역질렬화해주면 원본은 데이터를 그대로 얻을 수 있습니다.

localStorage.setItem('json', JSON.stringify({a: 1, b: 2}));
JSON.parse(localStorage.getItem('json'));
//{a: 1, b: 2}

2. sessionStorage

- localStorage에 비해 자주 사용되지는 않는 편

- 현재 떠 있는 탭 내에서만 유지됨 (여러개의 탭마다 개별적으로 저장됨)

- 세션을 종료하면 데이터가 자동으로 제거됨

- 사용방법은 localStorage와 유사

sessionStorage.setItem('name', '홍기동');
const getValue = sessionStorage.getItem('name');

 

 

---

[References]

www.daleseo.com/js-web-storage/