[Javascript] 로컬스토리지 localStorage

localStorage

localStorage는 웹 브라우저에서 데이터를 클라이언트 측에 영구적으로 저장할 수 있는 Javascript API입니다. 사용자가 페이지를 새로고침하거나 브라우저를 닫았다가 다시 열어도 데이터가 유지됩니다.

주요 특징

• key-value 쌍으로 데이터를 저장합니다. 이때 key와 value 값은 모두 문자열이어야 합니다.
• 데이터는 사용자가 지우기 전까지 유지되는 영구적 저장소 입니다.
• 도메인 단위로 동작합니다. 즉, 특정 도메인에서 저장한 데이터는 다른 도메인에서 접근할 수 없습니다.

데이터 저장 : localStorage.setItem('key', 'value');

localStorage.setItem("myName","minjae");

데이터 가져오기 : localStorage.getItem('key');

const myName = localStorage.getItem("myName"); // 'minjae'

데이터 삭제 : localStorage.removeItem('key');

localStorage.removeItem("myName");

모든 데이터 삭제

localStorage.clear();

JSON 데이터 저장

localStorage는 문자열만 저장할 수 있기 때문에 객체나 배열 같은 JSON 데이터를 저장할 때는 JSON.stringify()로 문자열로 변환해야 합니다. 마찬가지로 데이터를 가져올 때는 JSON.parse()로 다시 객체로 변환해야 합니다.

데이터 저장

const user = {name:'minjae', age:27};
localStorage.setItem('user', JSON.stringify(user));

데이터 가져오기

const user = JSON.parse(localStorage.getItem('user'));

데이터는 사용자의 디스크에 저장되기 때문에 민감한 정보는 localStorage에 저장하지 않는 것이 좋습니다.

---

✅ 참고

• https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage