🌱 기초 프론트엔드
로컬 스토리지가 뭔가요?
쉽게 이해하기
스마트폰의 메모장 앱을 떠올려보세요. 메모를 써두면 앱을 껐다 켜도, 심지어 폰을 껐다 켜도 메모가 남아있죠. 로컬 스토리지도 마찬가지로 웹사이트가 브라우저에 정보를 저장해두면, 나중에 다시 방문해도 그 정보가 남아있습니다.
핵심 정리
브라우저에 데이터를 저장해서 나중에도 계속 쓸 수 있게 해주는 공간입니다.
자세히 알아보기
로컬 스토리지는 브라우저가 제공하는 저장 공간으로, 웹사이트가 사용자 컴퓨터에 데이터를 저장할 수 있게 해줍니다. 쿠키와 비슷해 보이지만 더 많은 데이터를 저장할 수 있고(보통 5~10MB), 만료 기간이 없어서 사용자가 직접 지우지 않는 한 계속 남아있습니다.
주로 사용자 설정을 저장하는 데 씁니다. 예를 들어 다크 모드 설정, 언어 선택, 장바구니 내용, 임시 저장한 글 등을 로컬 스토리지에 넣어두면 페이지를 새로고침하거나 나중에 다시 방문해도 그대로 유지됩니다.
실무에서는 localStorage.setItem()으로 데이터를 저장하고, localStorage.getItem()으로 불러옵니다. 문자열만 저장할 수 있어서, 객체나 배열을 저장하려면 JSON.stringify()로 문자열로 바꿔서 넣고, 꺼낼 때는 JSON.parse()로 다시 객체로 변환해야 합니다.
다만 중요한 정보(비밀번호, 신용카드 번호 등)는 절대 로컬 스토리지에 저장하면 안 됩니다. 브라우저의 개발자 도구로 누구나 볼 수 있기 때문이에요. 민감한 정보는 서버에서 관리해야 합니다.