세션스토리지 예제

HTML 웹 저장소는 클라이언트에 데이터를 저장하기 위한 두 가지 개체를 제공합니다. 웹 저장소에는 두 가지 유형이 있습니다: HTML5 로컬 저장소는 최대 5MB 데이터를 저장할 수 있으며 쿠키와 같은 클라이언트 측에 다를 수 있습니다. 그러나 쿠키는 최대 4kb 데이터만 저장할 수 있으며 데이터는 문자열 유형에만 저장됩니다. 로컬 저장소는 키-값 쌍으로 데이터를 저장할 수 있습니다. 로컬 저장소 데이터는 쿠키보다 구문 분석하기 쉽습니다. 이를 로컬 저장소에 통합하기 전에 양식과 목록 작업을 살펴보겠습니다 . 우리는 아무 데도 항목을 저장하지 않기 때문에, 당신은 닫거나 브라우저를 새로 고치면, 항목은 사라집니다. 마지막 단계는 데이터가 유지되도록 로컬 저장소에 통합하는 것입니다. 이전에는 이러한 유형의 로컬 임시 데이터를 기억하는 유일한 옵션인 쿠키가 있었습니다. 로컬 저장소는 저장소 제한(5MB 대 4KB)이 상당히 높으며 모든 HTTP 요청과 함께 전송되지 않으므로 클라이언트 측 저장소에 더 나은 옵션이 될 수 있습니다. sessionStorage “속성”은 저장소 개체의 속성 및 메서드가 적용되는 저장소 영역 개체의 인스턴스를 제공합니다. 세션 저장소는 클라이언트 측에 데이터를 저장할 수 있지만 현재 세션에 대해서만 저장할 수 있습니다. 즉, 웹 브라우저 탭을 닫으면 모든 세션 저장소 데이터가 지워집니다.

브라우저의 새 탭에서도 세션 저장소 데이터에 액세스할 수 없습니다. 세션 저장소 데이터는 키-값쌍에도 저장됩니다. 브라우저 탭을 새로 고치거나 다시 로드해도 세션 데이터를 제거할 수 없습니다. 팁: HTML5의 웹 저장 기능은 파이어 폭스 와 같은 모든 주요 현대 브라우저에서 지원 됩니다., 크롬, 오페라, 사파리와 인터넷 익스플로러 8+. 로컬 저장소를 확인하려면 하나의 매개 변수를 사용하여 localStorage.getItem() 메서드를 사용합니다. 또는 localStorage.key. api/웹 저장소/Storageapis/웹 저장소/저장소의 속성 현재 최상위 검색 컨텍스트에 특정 저장소 개체를 제공합니다. 브라우저를 다시 시작하면 저장소가 지워집니다. 영구 저장소가 필요한 경우 api/웹 저장소/저장소/로컬저장소를 사용합니다. 그러나 전체 저장소를 제거하려는 경우 localStorage.clear()와 같은 clear() 메서드를 사용합니다. clear() 메서드는 localStorage에서 모든 키/값 쌍을 한 번에 지우므로 사용하기 전에 신중하게 생각하십시오.

HTML5 로컬 및 세션 저장소는 HTML4 기반 브라우저에서 지원되지 않습니다. 그러나 우리는 IE 8 이하와 같은 html4 기반 브라우저에서 대신 쿠키를 사용할 수 있습니다. 웹 저장소에는 범위와 수명이 다른 두 가지 유형의 웹 저장소가 있습니다. 하나의 원본에서 모든 페이지는 동일한 데이터를 저장하고 액세스할 수 있습니다. 쿠키와 달리 저장 한도는 훨씬 더 크며(최소 5MB) 정보는 서버로 전송되지 않습니다. 참고: 웹 저장소 데이터(로컬 및 세션 모두)는 다른 브라우저 간에 제공되지 않습니다(예: Firefox 브라우저에 저장된 데이터는 Google 크롬, 인터넷 익스플로러 또는 기타 브라우저에서 사용할 수 없습니다). 이제 앱에 몇 가지 기능을 더 추가합니다. 첫째, 양식을 제출할 때마다 입력 값을 localStorage에 추가하고 프런트 엔드에 표시해야 합니다. 또한 기존의 모든 로컬 저장소 항목을 반복하여 목록의 맨 위에 표시하려고 합니다.

마지막으로 “모두 지우기” 버튼이 로컬 저장소와 프런트 엔드에서 모든 항목을 제거하기를 원합니다. 웹 저장소 API의 일부인 localStorage 및 sessionStorage는 키/값 쌍을 로컬로 저장하는 두 가지 훌륭한 도구입니다. 이 게시물 의 상단에 있는 저장 버튼을 클릭하면 localStorage저장은 저장된 게시물을 저장하는 데 사용됩니다.