[ JS ] 브라우저의 웹 API_localStorge

 

 

localStorage에서 사용하는 함수들

---

1. localStorage란

• 브라우저에 key-value 형태의 문자열 데이터를 영구적으로 저장할 수 있음.
• 브라우저를 꺼도 데이터가 남아 있음 (반영구적 저장).
• 용량은 대략 5~10MB.
• 데이터는 문자열(string)만 저장 가능합니다. (객체는 JSON으로 변환 필요)

// 로그인 시
const user = { id: 1, name: "챗지회피티" };
localStorage.setItem("user", JSON.stringify(user));

// 새로고침 시 로그인 유지
const saved = localStorage.getItem("user");
if (saved) {
  const user = JSON.parse(saved);
  console.log(user.name); // 챗지회피티
}

// 로그아웃 시
localStorage.removeItem("user");
// 또는 localStorage.clear(); → 모든 저장 정보 제거

---

2. localStorage에서사용하는 메서드 4가지

 

2.1 setItem(key,  value)

 

localStorage에 데이터를 저장할 때 사용

- key: 문자열로 된 키 이름
- value: 문자열이어야 함 -> 객체는 JSON.stringify()로 변환 필요

localStorage.setItem("name", "챗지회피티");
localStorage.setItem("user", JSON.stringify({ id: 1, name: "챗지회피티" }));

 

2.2 getItem(key)

 

key에 해당하는 값을 불러옴

존재하지 않는 키면 null 반환
저장된 값은 항상 문자열 형태로 불러와짐

const name = localStorage.getItem("name"); // "챗지회피티"
const user = JSON.parse(localStorage.getItem("user")); // { id: 1, name: "챗지회피티" }​

 

2.3 remoteItem(key)

 

특정 key의 값을 삭제함

삭제 후 다시 getItem("name")하면 null이 됨

localStorage.removeItem("name");

 

2.4 clear()

 

localStorage의 모든 데이터를 한 번에 삭제함

매우 강력한 메서드이므로, 보통 전체 로그아웃 시에만 사용함

localStorage.clear();