JavaScript의 localStorage

JavaScript의 localStorage는 웹 브라우저에서 제공되는 웹 스토리지 API 중 하나임 localStorage를 사용하면 클라이언트 측에서 작은 데이터를 로컬에 저장할 수 있으며, 웹 페이지가 새로고침되거나 브라우저를 종료해도 데이터가 유지가 가능함

저장된 데이터 형식

localStorage에 저장된 데이터는 모두 문자열 형태로 저장가능함, 따라서 number타입이나 boolean 같은 다른 데이터 타입도 문자열로 변환되어 저장

데이터 저장 및 불러오기

localStorage에 데이터를 저장하려면 setItem() 메소드를 사용함

예시코드

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

위 코드에서 name은 저장할 데이터의 key, John은 저장할 데이터의 값임
저장된 데이터를 불러오려면 getItem() 메소드를 사용함.

예시코드

const name = localStorage.getItem('name');

위 코드에서 'name'은 가져올 데이터의 key임 getItem() 메소드는 해당 key에 대한 값으로 저장된 데이터를 반환함

데이터 삭제

localStorage에서 데이터를 삭제하려면 removeItem() 메소드를 사용함

예시코드

localStorage.removeItem('name');

다른 메소드들

localStorage에는 clear() 메소드가 있음
이 메소드를 사용하면 localStorage에 저장된 모든 데이터를 삭제할 수 있음
그리고 key() 메소드를 사용하면 해당 인덱스에 위치한 key를 반환할 수 있음

활용

localStorage를 사용하면 웹 페이지에서 간단한 데이터를 로컬에 저장할 수 있으며, 이를 활용하여 로그인 정보나 사용자 설정 등을 저장할 수 있음