HTML5 로컬 스토리지 사용: 세션 저장소

반응형

최신 브라우저에서는 소량의 텍스트 데이터를 위한 최소 2가지 종류의 클라이언트 측 스토리지가 제공된다.

하나는 로컬 스토리지이고 다른 하나는 세션 스토리지입니다.

둘 다 우리의 자바스크립트 웹 앱에서 다른 용도를 가지고 있습니다.

이 기사에서는 이들 간의 차이점을 살펴보겠습니다.

 

그리고 자바스크립트 코드에서 어떻게 사용하는지도 살펴봅니다.

로컬 스토리지와 세션 스토리지의 차이점

로컬 스토리지와 세션 스토리지는 서로 다른 용도로 사용됩니다.

로컬 스토리지를 사용하면 삭제될 때까지 데이터를 저장할 수 있습니다.

그들은 그 영역에 머무른다.

 

그리고 변경사항은 현재 및 향후의 모든 사이트 방문에 적용됩니다.

세션 스토리지 변경은 탭당만 사용할 수 있습니다.

변경 내용은 닫힐 때까지 해당 탭에서만 사용할 수 있습니다.

저장된 데이터가 닫히면 삭제됩니다.

로컬 저장소 사용

 

로컬 저장소를 사용하려면 localStorage 메서드를 호출하여 데이터를 가져오고 설정할 수 있습니다.

데이터를 추가하려면 localStorage를 호출합니다.setItem 메소드, 이것은 각각 문자열 키와 해당 값을 취합니다.

키와 값 모두 문자열이어야 합니다.

끈이 아니면 끈으로 바뀔 거예요.

데이터를 가져오려면 키로 localStorage.getItem을 호출합니다.

 

주어진 키에 해당하는 값을 반환합니다.

모든 로컬 스토리지 데이터를 삭제하려면 localStorage.clear를 호출합니다.

지정된 키를 사용하여 로컬 저장소 항목을 제거하려면 localStorage.removeItem을 호출합니다.

예를 들어 다음과 같이 쓸 수 있습니다.

localStorage.setItem('foo', 'bar')
console.log(localStorage.getItem('foo'))

 

foo가 키이고 bar가 해당하는 값입니다.

다음과 같이 removeItem을 사용하여 항목을 제거할 수 있습니다.

localStorage.setItem('foo', 'bar')
localStorage.removeItem('foo')
console.log(localStorage.getItem('foo'))

키가 foo인 항목을 제거했으므로 getItem이 null을 반환해야 합니다.

또한 모든 로컬 스토리지 항목을 지우려면 Clear를 호출할 수 있습니다.

 

localStorage.setItem('foo', 'bar')
localStorage.clear()

세션 저장소 사용

세션 저장소를 조작하려면 sessionStorage 가 있는 localStorage 를 제거하십시오.

따라서 다음과 같이 쓸 수 있습니다.

sessionStorage.setItem('foo', 'bar')
console.log(sessionStorage.getItem('foo'))

 

setItem을 사용하여 세션 저장소에 항목을 추가하려면

foo가 키이고 bar가 해당하는 값입니다.

다음과 같이 removeItem을 사용하여 항목을 제거할 수 있습니다.

sessionStorage.setItem('foo', 'bar')
sessionStorage.removeItem('foo')
console.log(sessionStorage.getItem('foo'))

키가 foo인 항목을 제거했으므로 getItem이 null을 반환해야 합니다.

 

또한 Clear를 호출하여 모든 세션 스토리지 항목을 삭제할 수 있습니다.

sessionStorage.setItem('foo', 'bar')
sessionStorage.clear()

결론

로컬 저장소 또는 세션 저장소를 사용하여 적은 양의 텍스트 데이터를 저장할 수 있습니다.

로컬 스토리지 데이터는 삭제될 때까지 저장되며 사이트 전체에서 사용할 수 있습니다.

 

세션 저장소 데이터는 현재 탭에서만 사용할 수 있으며 탭을 닫으면 삭제됩니다.