JavaScript and LocalStorage and JSON

자바스크립트에서 데이터를 브라우저에 반영구적으로 저장할 수 있는 핵심 저장소인 로컬 스토리지(LocalStorage)의 사용법과 JSON과의 연계 방법에 대해 알아보겠습니다.

로컬 스토리지는 사용자가 브라우저 창을 닫거나 컴퓨터를 재부팅해도 데이터가 지워지지 않고 유지되는 독자적인 저장 공간입니다.

1. Web Storage의 종류

브라우저가 제공하는 기본 저장소는 크게 두 가지가 있습니다.

• LocalStorage (로컬 스토리지): 만료 기한이 없습니다. 사용자가 직접 지우거나 코드로 삭제하지 않는 한 데이터가 반영구적으로 유지됩니다.
• SessionStorage (세션 스토리지): 브라우저 탭을 닫으면 데이터가 즉시 휘발(삭제)됩니다.

2. LocalStorage의 4대 핵심 메소드

로컬 스토리지는 데이터를 Key와 Value의 쌍으로 저장하는 단순한 구조를 가지고 있습니다.

1) 데이터 저장: setItem(key, value)

JavaScript

 

localStorage.setItem('username', 'Kim');

2) 데이터 읽기: getItem(key)

JavaScript

 

const name = localStorage.getItem('username');
console.log(name); // "Kim"

3) 특정 데이터 삭제: removeItem(key)

JavaScript

 

localStorage.removeItem('username');

4) 전체 데이터 초기화: clear()

JavaScript

 

localStorage.clear(); // 해당 도메인의 모든 로컬 스토리지 데이터 삭제

3. ⚠️ 핵심: LocalStorage와 JSON의 연계 (가장 중요)

로컬 스토리지는 아주 치명적인 제한 사항이 있습니다. 오직 문자열(String) 데이터만 저장할 수 있다는 점입니다.

만약 자바스크립트의 객체(Object)나 배열(Array)을 그대로 집어넣으면, 브라우저가 강제로 문자로 변환하여 "[object Object]"라는 깨진 데이터로 저장해 버립니다.

이를 해결하기 위해 바로 전 단계에서 배운 JSON.stringify()와 JSON.parse()를 활용해야 합니다.

🖥️ 올바른 객체 저장 및 복원 예제 코드

JavaScript

 

// 1. 저장할 자바스크립트 객체 데이터
const userProfile = {
  id: 1004,
  theme: "dark",
  favorites: ["HTML", "JS"]
};

/* --- [에러 방지] 객체를 문자열로 직렬화하여 저장 --- */
localStorage.setItem('user', JSON.stringify(userProfile));


/* --- [데이터 복원] 저장된 문자열을 가져와 다시 객체로 변환 --- */
const savedData = localStorage.getItem('user');

// 반드시 parse를 거쳐야 다시 마침표(.)로 프로퍼티에 접근할 수 있습니다.
const userObj = JSON.parse(savedData); 

console.log(userObj.theme); // "dark" 출력 완료!
console.log(userObj.favorites[0]); // "HTML" 출력 완료!

📋 로컬 스토리지 특징 요약표

특징 요소	내용 및 제약 사항
저장 용량	도메인당 약 5MB 내외 (텍스트 데이터 저장에 충분한 크기)
보안성	클라이언트 측에 그대로 노출되므로 비밀번호, JWT 토큰 등 민감 정보 저장 금지
동기적 실행	모든 명령이 동기(Synchronous)로 처리되므로, 너무 거대한 데이터를 다루면 화면이 버벅일 수 있음

학습 정리

• 로컬 스토리지에 객체나 배열을 넣을 때는 **JSON.stringify()**를, 꺼낼 때는 **JSON.parse()**를 세트 메뉴처럼 무조건 같이 사용하세요.
• 자동 로그인 여부, 다크모드/라이트모드 테마 설정, 최근 본 상품 아이디 목록 등을 저장할 때 최적의 효율을 보여줍니다.

브라우저의 미니 데이터베이스인 로컬 스토리지를 완벽하게 다룰 수 있게 되셨습니다!

---