GaramX

사용자 도구

사이트 도구

현재 위치: home » angular » localstorage
추적: • httpclient
angular:localstorage

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

다음 판		이전 판
angular:localstorage [2023/11/08 04:25] – 만듦 taekguangular:localstorage [2025/04/15 10:05] (현재) – 바깥 편집 127.0.0.1
줄 1: 줄 1:
 +====== Angular Local Storage ======
 + 보관함은 나중에 사용할 수 있도록 물건을 보관하는 공간입니다.
 + 웹 애플리케이션 관점에서 스토리지는 크게 서버 측 스토리지 와 클라이언트 측 스토리지의 두 가지 유형으로 분류될 수 있습니다 .
 + 서버측 스토리지란 SQL, MYSQL, MongoDB 등과 같은 다양한 유형의 데이터베이스 스토리지를 의미합니다.
 + 클라이언트측 스토리지는 서버측 데이터베이스를 요청하지 않고도 필요할 때 사용할 수 있도록 브라우저 자체에 데이터를 저장하는 것을 의미합니다.
  
 +===== 로컬 저장소란 무엇입니까? =====
 +
 + 로컬 저장소는 웹 애플리케이션용 클라이언트측 저장소입니다. 현재 브라우저 탭 세션 동안 지속되는 세션 저장소와 달리 삭제되지 않는 한 해당 위치에 유지됩니다. 로컬 저장소는 각 도메인에 별도로 할당되는 최대 5MB의 저장소를 제공합니다. 예를 들어 www.abc.com 웹사이트의 로컬 저장소는 www.xyz.com과 다릅니다.
 +
 +** 로컬 저장소 사용 **
 +
 +로컬 저장소는 원하는 거의 모든 것을 저장하는 데 사용할 수 있습니다 . **JSON 웹 토큰**, **사용자 기본 설정** 및 **테마**와 같은 애플리케이션 설정을 저장하는 데 가장 일반적으로 사용됩니다.
 +로컬 저장소 API는 저장소를 저장, 검색, 제거 및 지우는 몇 가지 방법을 제공합니다. 이러한 방법을 사용하는 방법을 살펴보겠습니다.
 +
 +
 +==== ▶ localStorage.setItem ====
 +
 +setItem 메소드를 사용하면 로컬 저장소에 값을 추가할 수 있습니다. 키-값 쌍을 사용하여 데이터를 저장합니다. 예를 들어:
 +  localStorage.setItem('token','xhja787')
 +위 코드는 브라우저의 로컬 저장소 내부에 있는 토큰이라는 키에 xhja787 데이터를 저장합니다.
 +참고: localStorage는 문자열 값만 저장합니다. 객체나 배열을 저장하려면 먼저 JSON.stringify를 사용하여 이를 문자열로 변환해야 합니다.
 +이제 getItem을 사용하여 저장된 데이터에 액세스하는 방법을 살펴보겠습니다.
 +
 +
 +==== ▶ localStorage.getItem ====
 +
 +getItem을 사용하면 동일한 키를 사용하여 로컬 저장소에 저장된 데이터를 다시 읽을 수 있습니다. 예를 들어 키 토큰을 사용하여 저장된 데이터를 가져오려면 다음 방법을 사용할 수 있습니다.
 +  localStorage.getItem('token')
 +
 +
 +==== ▶ localStorage.removeItem ====
 +
 +로컬 저장소의 데이터 사용을 마친 후에는 RemoveItem 메서드를 사용하여 해당 데이터를 제거할 수 있습니다. 예를 들어:
 +  localStorage.removeItem('token')
 +
 +==== ▶ localStorage.clear ====
 +
 +슬레이트를 깨끗하게 지우는 Clear 메서드를 사용하여 로컬 저장소에서 모든 데이터를 지울 수 있습니다.
 +  localStorage.clear()
 +이제 로컬 저장소에 액세스하기 위한 일반 JavaScript 코드가 모두 끝났습니다. Angular에서 로컬 저장소를 사용하는 것도 다르지 않습니다. 먼저 Angular 애플리케이션을 만든 다음 localStorage API 위에 서비스 래퍼를 만듭니다.

문서 도구