HTML5 로컬 저장 기술에 대해 이야기_html5 튜토리얼 기술

로컬 캐싱은 HTML5에서 등장한 새로운 기술로, 이 기술의 등장으로 모바일 웹의 발전이 가능해졌습니다. 고성능 모바일 앱을 구축하려면 속도가 중요하다는 사실은 모두가 알고 있습니다. HTML5 이전에는 쿠키만 데이터를 저장할 수 있었고 크기는 4kb에 불과했습니다. 이로 인해 애플리케이션 파일의 저장이 심각하게 제한되어 웹에서 개발된 모바일 애플리케이션의 로딩 시간이 길어집니다. 로컬 스토리지를 사용하면 웹 모바일 애플리케이션이 네이티브에 더 가까워질 수 있습니다.

브라우저에서는 window.localStorage를 통해 로컬 저장소를 호출합니다. 브라우저가 로컬 저장소를 지원하는지 확인하는 코드는 다음과 같습니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. if(window.localStorage){
2. Alert('이 브라우저는 localStorage를 지원합니다.')
3. }그 외{
4. Alert('이 브라우저는 localStorage를 지원하지 않습니다.')
5. } 

데이터를 로컬에 저장하려면 가장 쉬운 방법은 윈도우를 사용하는 것입니다. localStorage에 속성을 추가하고 값을 할당합니다. 예를 들어 값이 Tom인 데이터 이름을 저장하려는 경우 다음과 같은 방법으로 이를 달성할 수 있습니다.

XML/HTML 코드클립보드에 콘텐츠 복사

1. window.localStorage.name = “톰”

여기서 문자열 변수에는 따옴표가 필요하다는 점에 유의하세요. 로컬 저장소에서 데이터를 검색하려면 getItem 메서드를 사용할 수 있습니다. 전체 코드 과정은 다음과 같습니다.

JavaScript 코드클립보드에 콘텐츠 복사

1. var 저장소 = window.localStorage
2. storage.name = “톰”
3. //이름 데이터 가져오기
4. var name1 = Storage.getItem(“이름”)
5. 경고(이름1)

Chrome 브라우저 콘솔에 이 코드가 표시되는 결과는 Tom을 보여주는 프롬프트 상자입니다. 이런 식으로 데이터를 올바르게 저장하고 읽었음을 알 수 있습니다.

저장된 데이터를 삭제하려면 RemoveItem 메소드를 사용할 수 있습니다. 위 코드에 다음 코드를 추가합니다.

JavaScript 코드클립보드에 콘텐츠 복사

1. storage.removeItem(“이름”)

이때, 다시 알림을 보내면 데이터가 삭제되었기 때문에 null이 표시됩니다.

기본적인 로컬 스토리지 사용법과 아이디어를 이해한 후 로컬 스토리지를 체계적으로 소개하겠습니다.

로컬 저장소는 localStorage/sessionStorage/로컬 데이터베이스

의 세 가지 주요 범주로 나뉩니다.

localStorage와 sessionStorage의 사용법, 기능, 호출 방식 등은 동일하며 의미만 다릅니다. 그 중 localStorage에 저장된 데이터는 오랫동안 유효한 반면, sessionStorage에 저장된 정보는 각 세션이 닫힐 때 파기됩니다(일반인의 관점에서는 페이지가 닫히면 데이터가 자동으로 파기됩니다).

둘의 특성이 다르기 때문에 적용 시나리오도 매우 다릅니다. 일반적으로 장기간 보관해야 하는 일부 사용자 구성 항목 및 기타 데이터 정보를 저장해야 하는 경우, 오래 지속되는 특성을 활용하여 localStorgae를 사용하여 이를 저장해야 합니다. 이에 따라 장바구니와 같은 세션 기반 기능을 구현해야 하는 경우 sessionStorage를 사용해야 합니다.

localStorage와 sessionStorage의 사용법은 동일하므로 localStorage를 예로 들어 두 가지 방법을 소개하겠습니다.

1. 데이터 setItem 설정
localStorage.setItem("key", "value")으로 사용법은 키에 값을 전달한다는 의미입니다. (sessionStorage.setItem의 사용법은 동일하므로 아래에서 하나씩 소개하지 않겠습니다)

2. 데이터 getItem
사용법은 localStorage.getItem("key")입니다. 해당 키 값을 입력하면 해당 값을 가져올 수 있습니다.

3. 특정 데이터 삭제removeItem
해당 키에 해당하는 데이터를 삭제하는 방법은 localStorage.removeItem(key) 입니다.

4. 모든 데이터 지우기 Clear
의 사용법은 localStorage.clear()이며, 이는 스토리지 시스템의 모든 데이터를 지우는 것을 의미합니다.

위 내용은 가장 기본적인 sessionStorage/localStorage 사용법 중 일부입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.