JavaScript: JSON 데이터, localStorage

Jene Hojin Choi·2021년 4월 24일
3

JavaScript

목록 보기
9/15
post-thumbnail

✅ JSON (JavaScript Object Notation)

  • 구조화된 데이터를 나타내기 위한 텍스트 기반 데이터 형식
  • JavaScript에서 객체를 만들때 사용함

특징

  • XML을 대체하여 데이터 전송에 많이 쓰임
  • 다른 프로그래밍 언어를 이용해서도 쉽게 만들 수 있음. 대부분의 프로그래밍 언어에서 JSON 포맷의 데이터를 핸들링할 수 있는 라이브러리 제공

✅ JSON 텍스트를 JavaScript Object로 변환하는 방법

✔️ JSON.stringify()

JavaScript 객체를 JSON text로 변환

const fruit = {
	name: 'mango',
    color: 'yellow'
}

let fruitStr = JSON.stringify(fruit)
console.log(typeof fruitStr)
// string
console.log(fruitStr)
// '{"name":"mango", "color":"yellow"}'

✔️ JSON.parse()

JSON text를 JavaScript 객체로 변환

// fruitStr = '{"name":"mango", "color":"yellow"}'
let fruitObj = JSON.parse(fruitStr);
console.log(typeof fruitObj);
// object
console.log(fruitObj)
// {name: 'mango', color: 'yellow'}

✅ localStorage

✔️ localStorage의 특징

  • sessionStorage와 함께 webStorage중 하나. 세션이나 쿠키같이 데이터를 저장하는 장소
  • 데이터의 만료기간이 없이 영구 보관 가능
  • 브라우저를 재시작해도, OS를 리부트해도 살아있음.
  • 여러 탭이나 창 간에 데이터가 서로 공유됨

✔️ localStorage 확인하기

내 블로그 메인 페이지에서 개발자모드를 확인한 결과이다.
Application으로 가보면 local storage가 있는 것을 확인할 수 있다.

지금 다른 페이지도 많이 실행중이라 더 많은 데이터들이 저장되어있다.

✔️ 기본 사용 방법

// 키에 데이터 쓰기
localStorage.setItem("key", value)
// 키로 부터 데이터 읽기
localStorage.getItem("key")
// 키의 데이터 삭제
localStorage.removeItem("key")
// 모든 키의 데이터 삭제
localStorage.clear()
// 저장된 키/값 쌍의 개수
localStorage.length

✔️ 주의 사항

웹 스토리지를 사용할 때 주의해야 할 부분:
오직 문자형(string) 데이터 타입만 지원한다는 것!!! 그래서 다른 타입의 데이터를 저장할 시 웹 스토리지는 자동적으로 그 데이터를 문자형으로 변환한다.

예를 들어, 숫자형 데이터를 로컬 스토리지에 쓰고 다시 다시 읽어보면 다음과 같이 본래 숫자가 아닌 문자가 나오는 것을 알 수 있다.

> localStorage.setItem('num', 1)
undefined
> localStorage.getItem('num') === 1
false
> localStorage.getItem('num')
"1"
> typeof localStorage.getItem('num')
"string"

그래서 마찬가지로 객체형 데이터를 저장하려고 할때도 원하는대로 저장이 되지 않을 수 있다.

> localStorage.setItem('obj', {a: 1, b: 2})
undefined
> localStorage.getItem('obj')
"[object Object]"

✔️ 해결 방법

위에 써둔 JSON.stringify, JSON.parse를 써서 데이터를 JSON 형태로 주고 받으면 된다!

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

Reference

0개의 댓글