보관함은 나중에 사용할 수 있도록 물건을 보관하는 공간입니다. 웹 애플리케이션 관점에서 스토리지는 크게 서버 측 스토리지 와 클라이언트 측 스토리지의 두 가지 유형으로 분류될 수 있습니다 . 서버측 스토리지란 SQL, MYSQL, MongoDB 등과 같은 다양한 유형의 데이터베이스 스토리지를 의미합니다. 클라이언트측 스토리지는 서버측 데이터베이스를 요청하지 않고도 필요할 때 사용할 수 있도록 브라우저 자체에 데이터를 저장하는 것을 의미합니다.

로컬 저장소는 웹 애플리케이션용 클라이언트측 저장소입니다. 현재 브라우저 탭 세션 동안 지속되는 세션 저장소와 달리 삭제되지 않는 한 해당 위치에 유지됩니다. 로컬 저장소는 각 도메인에 별도로 할당되는 최대 5MB의 저장소를 제공합니다. 예를 들어 www.abc.com 웹사이트의 로컬 저장소는 www.xyz.com과 다릅니다.

로컬 저장소 사용

로컬 저장소는 원하는 거의 모든 것을 저장하는 데 사용할 수 있습니다 . JSON 웹 토큰, 사용자 기본 설정 및 테마와 같은 애플리케이션 설정을 저장하는 데 가장 일반적으로 사용됩니다. 로컬 저장소 API는 저장소를 저장, 검색, 제거 및 지우는 몇 가지 방법을 제공합니다. 이러한 방법을 사용하는 방법을 살펴보겠습니다.

setItem 메소드를 사용하면 로컬 저장소에 값을 추가할 수 있습니다. 키-값 쌍을 사용하여 데이터를 저장합니다. 예를 들어:

localStorage.setItem('token','xhja787')

위 코드는 브라우저의 로컬 저장소 내부에 있는 토큰이라는 키에 xhja787 데이터를 저장합니다. 참고: localStorage는 문자열 값만 저장합니다. 객체나 배열을 저장하려면 먼저 JSON.stringify를 사용하여 이를 문자열로 변환해야 합니다. 이제 getItem을 사용하여 저장된 데이터에 액세스하는 방법을 살펴보겠습니다.

getItem을 사용하면 동일한 키를 사용하여 로컬 저장소에 저장된 데이터를 다시 읽을 수 있습니다. 예를 들어 키 토큰을 사용하여 저장된 데이터를 가져오려면 다음 방법을 사용할 수 있습니다.

localStorage.getItem('token')

로컬 저장소의 데이터 사용을 마친 후에는 RemoveItem 메서드를 사용하여 해당 데이터를 제거할 수 있습니다. 예를 들어:

localStorage.removeItem('token')

슬레이트를 깨끗하게 지우는 Clear 메서드를 사용하여 로컬 저장소에서 모든 데이터를 지울 수 있습니다.

localStorage.clear()

이제 로컬 저장소에 액세스하기 위한 일반 JavaScript 코드가 모두 끝났습니다. Angular에서 로컬 저장소를 사용하는 것도 다르지 않습니다. 먼저 Angular 애플리케이션을 만든 다음 localStorage API 위에 서비스 래퍼를 만듭니다.