로컬 스토리지를 활용한 웹 데이터 저장 방법 📦

웹 개발을 배우는 여러분, 웹 사이트에서 사용자의 정보를 임시로 저장하는 방법에 대해 궁금해하신 적 있나요? 오늘은 바로 그 방법 중 하나인 '로컬 스토리지'에 대해 알아보겠습니다. 로컬 스토리지를 사용하면 사용자의 브라우저에 데이터를 저장할 수 있어, 사용자가 웹 사이트를 다시 방문했을 때 이전의 활동이나 선호도를 기억할 수 있습니다. 복잡한 기술 용어는 잠시 뒤로하고, 쉽게 이해할 수 있는 방법으로 설명해 드리겠습니다.

로컬 스토리지란?

로컬 스토리지는 웹 브라우저에 정보를 저장하는 방법 중 하나로, 사용자가 브라우저를 닫았다가 다시 열어도 정보가 유지됩니다. 쿠키와 비슷하지만, 더 많은 데이터를 저장할 수 있고, 서버로 자동 전송되지 않는다는 장점이 있습니다.

로컬 스토리지 사용 방법

로컬 스토리지를 사용하는 방법은 매우 간단합니다. 기본적으로 '저장하기', '불러오기', '삭제하기' 세 가지 동작을 할 수 있습니다. 아래는 각 동작을 수행하는 기본적인 자바스크립트 코드입니다.

데이터 저장하기

웹 사이트에 방문한 사용자의 이름을 저장하고 싶다면, 다음과 같이 코드를 작성할 수 있습니다.

localStorage.setItem('userName', '홍길동');

이 코드는 사용자의 이름을 '홍길동'으로 설정하여 로컬 스토리지에 저장합니다.

데이터 불러오기

저장된 데이터를 불러오고 싶다면, 다음과 같이 작성합니다.

var userName = localStorage.getItem('userName');
console.log(userName); // '홍길동'이 출력됩니다.

이 코드는 로컬 스토리지에서 'userName' 키에 해당하는 값을 불러와서 콘솔에 출력합니다.

데이터 삭제하기

더 이상 필요 없는 데이터를 삭제하고 싶다면, 다음과 같이 코드를 작성합니다.

localStorage.removeItem('userName');

이 코드는 'userName' 키와 그에 해당하는 값을 로컬 스토리지에서 삭제합니다.

실용적인 팁

• 로컬 스토리지는 텍스트 형식의 데이터만 저장할 수 있습니다. 객체나 배열을 저장하려면, JSON 형식으로 변환하여 저장해야 합니다.
• 로컬 스토리지의 용량은 대략 5MB 정도입니다. 이보다 더 많은 데이터를 저장해야 한다면, IndexedDB를 고려해보세요.
• 보안이 중요한 데이터는 로컬 스토리지에 저장하지 마세요. 로컬 스토리지는 보안에 취약할 수 있습니다.

로컬 스토리지를 활용하면, 사용자의 브라우저에 데이터를 효과적으로 저장하여 웹 사이트의 사용성을 높일 수 있습니다. 오늘 배운 내용을 통해 여러분의 웹 개발 프로젝트에 적용해보세요!