📒Javascript JSON :)

zooyaho·2022년 4월 25일

study with me

목록 보기

13/19

자바스크립트의 객체 표기법

: package.json파일을 자동으로 생성함

ex)
import myData from './myData.json'
: .json확장자 필수 작성

👾
ex) const str = JSON.stringify(user)
const user = {...}
console.log(typeof str) // string

JSON.stringify(데이터): 문자데이터화 시킴
--> json화 시킴(하나의 메모리만 참조할 수 있는 문자데이터로 경량화됨.)
--> js에서 생성한 객체 데이터를 하나의 문자데이터로 변경하여 localStorage에 저장할 때 사용함!!
JSON.parse(데이터): 데이터를 분석하여 원래의 데이터 타입으로 반환시킴
--> 실제 자바스크립트 데이터처럼 변경시킴

Window.localStorage
: Document 출처의 Storage객체에 접근할 수 있음
: localStorage에 저장된 데이터는 해당 도메인에 종속되어 저장이됨
: sessionStorage에 비해 데이터가 만료되지 않음
(= 즉, 페이지를 닫을 때 사라지지 않음->반영구)
: 하나의 사이트에 종속이 됨
localStorage.setItem('Key', 'Value')
: 문자데이터로 저장하는 것을 권고함
: 객체는 JSON.stringify(데이터)를 사용하여 문자로 변경하면 됨
: localStorage에서 가져오는 데이터는 JSON.parse(데이터)로 변경하여 사용하면 됨
localStorage.getItem('Key')
: 읽어오는 방법, key값만 인수로 작성
localStorage.removeItem('Key')
: 삭제하는 방법, key값만 인수로 작성
localStorage에 저장된 데이터 변경
👾
ex)
const user = {..., age = 12, ...} // 객체형
const str = localStorage.getItem('user') //문자
const obj = JSON.parse(str) // 객체형
obj.age = 22 // 값변경
console.log(obj)
localStorage.setItem('user',JSON.stringify(obj))