JavaScript로 로컬 스토리지 활용하기 💻

웹 개발을 배우는 여러분, JavaScript에서 데이터를 사용자의 브라우저에 저장하는 방법을 알고 싶으신가요? 오늘은 바로 그 방법인 '로컬 스토리지'에 대해 알아볼 거예요. 로컬 스토리지를 사용하면 웹 페이지를 닫았다가 다시 열어도 정보를 유지할 수 있어요. 간단하면서도 매우 유용한 기능이죠!

로컬 스토리지란?

로컬 스토리지는 웹 브라우저에 정보를 저장할 수 있는 공간을 말해요. 이 공간에 저장된 데이터는 브라우저를 닫고 다시 열어도 사라지지 않아요. 사용자가 직접 삭제하지 않는 한 계속 유지된답니다.

데이터 저장하기

로컬 스토리지에 데이터를 저장하는 것은 정말 쉬워요. 다음과 같은 코드를 사용하면 됩니다:

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

여기서 'key'는 저장할 데이터의 이름이고, 'value'는 그 데이터의 값이에요. 예를 들어, 사용자의 이름을 저장하고 싶다면 다음과 같이 작성할 수 있어요:

localStorage.setItem('name', 'Alice');

데이터 불러오기

저장된 데이터를 불러오고 싶을 때는 다음 코드를 사용하세요:

localStorage.getItem('key');

앞서 저장한 사용자의 이름을 불러오려면 이렇게 하면 돼요:

let name = localStorage.getItem('name');
console.log(name); // 'Alice' 출력

데이터 삭제하기

저장된 데이터를 삭제하고 싶다면, 다음 두 가지 방법 중 하나를 사용할 수 있어요:

• 특정 데이터만 삭제하기:

localStorage.removeItem('key');

예를 들어, 'name' 데이터를 삭제하고 싶다면:

localStorage.removeItem('name');

• 모든 데이터 삭제하기:

localStorage.clear();

이 명령어는 로컬 스토리지에 저장된 모든 데이터를 삭제해요.

실습해보세요!

이제 여러분 차례예요. 로컬 스토리지를 사용하여 간단한 데이터를 저장하고, 불러오고, 삭제하는 작업을 직접 해보세요. 이 기능을 활용하면 사용자 경험을 향상시키는 데 큰 도움이 될 거예요.

JavaScript로 로컬 스토리지를 활용하는 방법은 여기까지예요. 이 기술을 사용하여 멋진 웹 애플리케이션을 만들어 보세요! 🚀