Local Storage

Local Storage는 웹 브라우저에 데이터를 영구적으로 저장할 수 있는 방법 중 하나이다.
localStorage 객체를 사용해 key-value 쌍으로 데이터를 저장하며, 브라우저를 새로 고쳐도 유지된다.
문자열만 저장 가능하므로, 객체나 배열은 JSON.stringify()로 문자열로 변환한 후 저장해야 한다.
저장된 데이터는 브라우저 개발자 도구 > Application 탭 > Local Storage에서 확인할 수 있다.

주요 메서드

Local Storage 메서드
├── setItem("key", "value"): 저장하기
├── getItem("key"): 가져오기
├── JSON.stringify()
└── JSON.parse()

setItem()

로컬 스토리지에 데이터를 저장할 때 사용한다.

localStorage.setItem("key", "value");

• key : 데이터의 이름
• value : 저장할 실제 데이터 (문자열)

localStorage.setItem("name", "bin");

getItem()

로컬 스토리지에 저장된 데이터를 가져올 때 사용한다.

localStorage.getItem("key");

• key: 지정한 key에 해당하는 값을 반환한다.
• 해당 key가 없으면 null을 반환한다.

JSON.stringify()

객체나 배열을 문자열로 변환해 setItem()을 통해 Local Storage에 저장할 수 있도록 한다.

const user = { name: "milou", age: 20 };
localStorage.setItem("user", JSON.stringify(user));

• Local Storage는 문자열만 저장 가능하므로, 객체나 배열은 반드시 JSON.stringify()로 변환해야 한다.

JSON.parse()

문자열 형태로 저장된 데이터를 객체/배열로 다시 변환한다.

const savedUser = JSON.parse(localStorage.getItem("user"));

console.log(savedUser.name); // "milou"

• Local Storage에서 꺼낸 데이터는 문자열이므로, 원래의 형태(객체/배열)로 되돌리기 위해 JSON.parse()를 사용한다.