자바스크립트에서 JSON을 사용하여 사용자 정보를 저장하는 방법

10 Sep 2023

javascript

자바스크립트는 웹 개발에서 가장 인기있는 프로그래밍 언어 중 하나이며, JSON (JavaScript Object Notation)은 데이터 교환을 위한 경량 데이터 형식입니다. 자바스크립트에서 JSON을 사용하면 사용자 정보와 같은 데이터를 쉽게 저장하고 전달할 수 있습니다.

JSON의 기본 구조

JSON은 key-value 쌍의 형식을 갖습니다. 기본 구조는 다음과 같습니다:

{
  "key1": "value1",
  "key2": "value2",
  "key3": "value3"
}

JSON 데이터는 중괄호({})로 둘러싸여 있으며, 각 쌍은 콜론(:)으로 구분된 키(key)와 값(value)으로 이루어져 있습니다. 각 쌍은 쉼표(,)로 구분됩니다.

사용자 정보를 JSON으로 저장하는 예제

자바스크립트에서 사용자 정보를 JSON 형식으로 저장하는 예제를 살펴보겠습니다.

// 사용자 정보를 담는 JSON 객체 생성
var user = {
  "name": "John Doe",
  "email": "johndoe@example.com",
  "age": 25
};

// JSON 객체를 문자열로 변환
var userJSON = JSON.stringify(user);

// 로컬스토리지에 사용자 정보 저장
localStorage.setItem("userInfo", userJSON);

위의 예제는 “name”, “email”, “age”라는 키를 갖는 사용자 정보를 JSON 객체로 생성합니다. 그 후 JSON.stringify() 함수를 사용하여 JSON 객체를 문자열로 변환합니다. 이렇게 변환된 JSON 문자열을 localStorage.setItem() 메서드를 사용해서 로컬 스토리지에 “userInfo”라는 키로 저장합니다.

저장된 사용자 정보를 JSON으로 불러오는 예제

저장된 사용자 정보를 JSON으로부터 불러오는 예제를 살펴보겠습니다.

// 로컬 스토리지로부터 사용자 정보 불러오기
var userJSON = localStorage.getItem("userInfo");

// JSON 문자열을 JSON 객체로 변환
var user = JSON.parse(userJSON);

// 사용자 정보 출력
console.log(user.name); // John Doe
console.log(user.email); // johndoe@example.com
console.log(user.age); // 25

위의 예제는 localStorage.getItem() 메서드를 사용하여 로컬 스토리지에서 “userInfo” 키로 저장된 JSON 문자열을 가져옵니다. 그 후 JSON.parse() 함수를 사용하여 JSON 문자열을 다시 JSON 객체로 변환합니다. 이렇게 변환된 JSON 객체를 통해 사용자 정보를 출력할 수 있습니다.

JSON은 자바스크립트에서 데이터 저장 및 교환을 위한 간편하고 유용한 형식입니다. 위에서 살펴본 예제를 기반으로 자신의 프로젝트에 JSON을 적용해 보세요. 자바스크립트와 JSON을 활용하여 데이터를 더 효율적으로 다룰 수 있을 것입니다.

참고 자료: