• 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

🌿 스토리지와 JSON 저장

JSON이란?

JSON(JavaScript Object Notation)은 데이터를 저장하고 전송하기 위한 경량 데이터 형식입니다. 주로 웹 애플리케이션에서 서버와 클라이언트 간의 데이터를 교환할 때 사용됩니다.

객체를 문자열로 바꾸어 로컬스토리지에 저장(JSON.stringify)

const JS_과일담기기능 = () => {
const 과일담는통 = {
	사과: 3,
	바나나: 2,
	딸기: 10
}
const 문자열로바뀐객체 = JSON.stringify(과일담는통)
	localStorage.setItem("과일바구니", 문자열로바뀐객체)
}

• JSON.stringify(과일담는통)를 사용하여 과일담는통 객체를 JSON 문자열로 변환합니다.
• localStorage.setItem("과일바구니", 문자열로바뀐객체)를 사용하여 변환된 JSON 문자열을 로컬스토리지에 "과일바구니"라는 키로 저장합니다.

로컬스토리지에서 객체 불러오기(JSON.parse)

const JS_과일꺼내기기능 = () => {
	const 과일바구니문자열 = localStorage.getItem("과일바구니")
	const 과일바구니객체 = JSON.parse(과일바구니문자열)
	console.log(과일바구니객체)
}

• localStorage.getItem("과일바구니")를 사용하여 로컬스토리지에 저장된 JSON 문자열을 가져옵니다.
• JSON.parse(과일바구니문자열)를 사용하여 가져온 JSON 문자열을 다시 자바스크립트 객체로 변환합니다.

📝 실습 코드