localStorage개념 및 특징과 JSON.stringify / JSON.parse() 개념

 

🔍  개념정리 : localstorage 란? - 웹스토리지(저장소)

    LocalStorage는 웹 브라우저에서 제공하는 웹 스토리지(Web Storage) API의 한 종류로,

    클라이언트(사용자 브라우저)에 데이터를 영구적으로 저장할 수 있는 방법 중 하나이다. 

 

👉 "클라이언트(사용자의 브라우저)에 저장한다"는 의미는 즉, 저장된 데이터는 오직 사용자의

웹 브라우저 안에만 존재하며, 서버와는 아무 관련이 없다.

 

 

✅ LocalStorage 특징

저장 위치	클라이언트(브라우저)
데이터 수명	브라우저나 탭을 닫아도 삭제되지 않음 (명시적으로 제거해야 함)
저장 용량	보통 약 5MB (브라우저마다 다름)
접근 방식	키-값(Key-Value) 쌍
지원 타입	문자열(string)만 저장 가능 (JSON.stringify 필요)
동기적	데이터는 동기적으로 저장되고 읽힘

 

 

📌 주요 메서드

// 저장
localStorage.setItem('key', 'value');

// 불러오기
const value = localStorage.getItem('key');

// 삭제
localStorage.removeItem('key');

// 전체 삭제
localStorage.clear();

 

📌 사용 예시

// 객체를 저장하고 싶을 경우
const user = { name: 'Alice', age: 30 };
localStorage.setItem('user', JSON.stringify(user));

// 불러올 때는 다시 객체로 파싱
const savedUser = JSON.parse(localStorage.getItem('user'));
console.log(savedUser.name); // 'Alice'

 

 

✅ localStorage는 언제 사용할까

- 사용자 설정 저장이 필요한 경우 

   ex. 다크모드 여부, 언어설정, 글꼴 크기 등의 사용자 선호 설정

 

- 사용자 데이터를 저장해야할 때

  ex. 간단한 사용자 정보 (이름, 이메일)등을 저장해 페이지 이동 시에도 상태를 유지

 

- 어플리케이션 상태 저장할 때

  ex. 장바구니 정보, 게임 진행 상태 등 클라이언트 측 어플리케이션 상태 저장

 

- 임시 데이터를 저장할 때

  ex. 서버와의 통신없이 간단히 데이터를 저장하고 복구할 때 사용할 수 있다.

  

✅ localStorage는 세션 간 공유가 가능하다.

즉:

• 같은 브라우저 내에서 여러 탭, 여러 창을 열어도
• 같은 도메인(origin)이라면
• localStorage에 저장된 데이터는 공통으로 접근이 된다.

예시:

1. 첫 번째 탭에서 localStorage.setItem('token', 'abc123') 실행
2. 두 번째 탭에서 localStorage.getItem('token') 실행 → 'abc123' 반환

이처럼 브라우저의 모든 탭/창에서 공유되기 때문에 "세션 간 공유된다"고 표현한다.

 

 

그렇다면 질문!

response를 통해서 { token : '1234555' } 이런 형식으로 데이터가 넘어왔을 때
localStorage.setItem('token', response.token); 으로 받으면, token값이 string형태로 변환이 될까?

 

=> 그렇다! 

정확히, 말하면  이 코드를 실행하면 response.token의 값(예: '1234555')은 자동으로 문자열(string) 형태로 저장이 된다.

localStorage.setItem('token', response.token);

 

🔍 이유는?

localStorage는 모든 값을 문자열(string)로 저장하기 때문이다, 
즉, 어떤 타입의 값을 저장하려고 해도 내부적으로 문자열로 변환해서 저장된다.

localStorage.setItem('number', 12345);
localStorage.getItem('number'); // "12345" ← 문자열로 반환됨

 

심지어 true, false, null, undefined, 숫자 등도 다 문자열로 변환된다.

 

 

✅ 객체나 배열을 저장하고 싶을 땐?

객체는 바로 저장하면 **"[object Object]"**로 변환되므로 반드시 JSON.stringify()가 필요하다.

// 저장
const user = { name: 'Alice', age: 30 };
localStorage.setItem('user', JSON.stringify(user));

// 불러올 때
const savedUser = JSON.parse(localStorage.getItem('user'));
console.log(savedUser.name); // "Alice"

 

 

 

 

 

 

여기서 잠깐, 

✅ JSON.stringify(user)란? 👉 JavaScript 객체를 JSON 문자열로 변환하는 함수이다.

 

const user = { name: 'Alice', age: 30 };
const jsonString = JSON.stringify(user);
console.log(jsonString); // '{"name":"Alice","age":30}'

 

이렇게 하면 JavaScript 객체가 "{"name":"Alice","age":30}"라는 문자열이 된다. 

 

🔄 왜 필요할까

• localStorage는 **문자열(string)**만 저장할 수 있기 때문에
• 객체를 저장하려면 문자열로 변환해줘야 한다.
• 나중에 다시 사용할 땐 JSON.parse()로 되돌릴 수 있다.

// 저장
localStorage.setItem('user', JSON.stringify(user));

// 불러오기
const savedUser = JSON.parse(localStorage.getItem('user'));
console.log(savedUser.name); // "Alice"

 

 

✅ 그렇다면 JSON.parse()란? 👉 JSON 형식의 문자열을 JavaScript 객체로 변환하는 함수이다.

const jsonString = '{"name":"Alice","age":30}';
const user = JSON.parse(jsonString);

console.log(user.name); // "Alice"
console.log(typeof user); // "object"

 

• jsonString은 그냥 **문자열(string)**이다.
• JSON.parse(jsonString)을 하면 → **객체(object)**로 바뀐다.

 

✅ 언제 사용하나요?

• 주로 localStorage나 서버 응답에서 JSON 문자열을 받을 때 사용한다.

// 저장할 때
const user = { name: 'Alice', age: 30 };
localStorage.setItem('user', JSON.stringify(user));

// 꺼낼 때
const savedUser = JSON.parse(localStorage.getItem('user'));
console.log(savedUser.name); // "Alice"

 

 

⚠️ 주의할 점

• 파싱하려는 문자열이 정확한 JSON 형식이어야 한다.
• 잘못된 형식이면 에러가 발생한다.

JSON.parse("hello"); 
// ❌ SyntaxError: Unexpected token h in JSON at position 0

JSON.parse("{name: 'Alice'}"); 
// ❌ SyntaxError: name must be double-quoted

✔️ 항상 " 큰따옴표를 써야 JSON으로 인식됩니다.

 

 

📌 요약

JSON.stringify()	객체 → 문자열
JSON.parse()	문자열 → 객체

 

 

 

✅ 서버와 클라이언트 간의 통신은 기본적으로 문자열 기반이다.

• HTTP 프로토콜은 텍스트 기반이기 때문에,
• 서버가 클라이언트에 보내는 데이터도, 클라이언트가 서버에 보내는 데이터도
• 대부분 **문자열(JSON 문자열, HTML, XML 등)**로 전달된다.

 

🔄 그래서 우리가 하는 일은?

서버에 객체 전송	JSON.stringify()로 문자열로 변환해서 전송
서버에서 응답 수신	JSON.parse()로 문자열을 객체로 변환해서 사용