[Eric's JS] localStorage 사용방법 🤔

JavaScript의 localStorage 활용하기

여러분 안녕하세요! Eric입니다.

오늘은 웹 페이지에서 데이터를 로컬에 저장하는 방법 중 하나인 localStorage를 활용하는 방법에 대해 알아보겠습니다.

추가로 JSON.stringify()와 JSON.parse()의 사용법도 함께 다룰 예정입니다.

1. localStorage란?

localStorage는 웹 페이지의 데이터를 브라우저에 저장하는 방법 중 하나로, 사용자가 브라우저를 닫거나 페이지를 새로 고침해도 데이터가 사라지지 않습니다.
각 데이터는 key-value 쌍으로 저장되며, 문자열 형태로 저장됩니다.

2. localStorage에 데이터 저장하기

localStorage에 데이터를 저장하는 방법은 간단합니다.

localStorage.setItem('myKey', 'myValue');

위 코드를 실행하면 'myKey'라는 키에 'myValue'라는 값을 저장합니다.

3. localStorage에서 데이터 불러오기

저장된 데이터를 불러올 때는 다음과 같이 합니다.

let data = localStorage.getItem('myKey');
console.log(data);  // "myValue"

4. localStorage에서 데이터 삭제하기

데이터를 삭제할 때는 다음과 같이 합니다.

localStorage.removeItem('myKey');

5. localStorage의 모든 데이터 삭제하기

모든 데이터를 한번에 삭제하려면 다음과 같이 합니다.

localStorage.clear();

6. JSON과 localStorage 함께 사용하기

localStorage는 기본적으로 문자열만 저장할 수 있습니다.

그렇기 때문에 객체나 배열과 같은 복잡한 데이터 구조를 저장하고자 할 때는 JSON.stringify()와 JSON.parse()를 활용해야 합니다.

객체를 localStorage에 저장하기

let user = {
    name: "Eric",
    age: 22
};

localStorage.setItem('user', JSON.stringify(user));

localStorage에서 객체 불러오기

let data = localStorage.getItem('user');
let user = JSON.parse(data);

console.log(user.name);  // "Eric"
console.log(user.age);   // 22

이처럼 JSON.stringify()는 자바스크립트 객체나 배열을 문자열로 변환해주며, JSON.parse()는 문자열을 다시 객체나 배열로 변환해줍니다.

결론

localStorage는 간단한 데이터 저장을 위한 좋은 방법입니다.

사용자의 설정, 로그인 정보, 임시 저장 데이터 등 다양한 용도로 활용될 수 있습니다.
JSON과 함께 사용하면 복잡한 데이터 구조도 손쉽게 저장하고 불러올 수 있습니다. 다만, 보안에 민감한 데이터를 저장하는 데에는 적합하지 않으므로 주의해야 합니다.

다음 시간에는 다른 웹 스토리지인 sessionStorage에 대해서 알아보겠습니다. 그럼 즐거운 코딩 되세요! 🚀

PS. 제 블로그의 다크모드도 localStorage 를 통하여 다크모드 상태가 저장한답니다! 😉