HTML5-웹 저장소

HTML5는 HTTP 세션 쿠키와 유사한 두 가지 메커니즘을 도입하여 클라이언트 측에 구조화 된 데이터를 저장하고 다음과 같은 단점을 극복합니다.

모든 HTTP 요청에 쿠키가 포함되어 동일한 데이터를 전송하여 웹 애플리케이션 속도를 늦 춥니 다.
쿠키는 모든 HTTP 요청에 포함되어 인터넷을 통해 암호화되지 않은 데이터를 전송합니다.
쿠키는 약 4KB의 데이터로 제한됩니다. 필요한 데이터를 저장하기에 충분하지 않습니다.

두 저장소는 session storage 과 local storage 다양한 상황을 처리하는 데 사용됩니다.

거의 모든 브라우저의 최신 버전은 Internet Explorer를 포함한 HTML5 저장소를 지원합니다.

세션 저장

세션 스토리지는 사용자가 단일 트랜잭션 실시되는 시나리오에 대한 설계, 그러나 동시에 다른 창에서 여러 트랜잭션을 수행 할 수있다.

예

예를 들어 사용자가 동일한 사이트를 사용하여 두 개의 다른 창에서 비행기 표를 구매하는 경우입니다. 사이트가 쿠키를 사용하여 사용자가 구매 한 티켓을 추적 한 경우 사용자가 두 창에서 페이지를 클릭 할 때 현재 구매중인 티켓이 한 창에서 다른 창으로 "누출"되어 잠재적으로 사용자가 실제로 눈치 채지 않고 동일한 항공편에 대해 두 장의 티켓을 구입하십시오.

HTML5 는 세션 저장소에 데이터를 추가하기 위해 사이트에서 사용 하는 sessionStorage 속성을 도입했으며 , 해당 창에서 열린 동일한 사이트의 모든 페이지에 액세스 할 수 있습니다.session 창을 닫 자마자 세션이 손실됩니다.

다음은 세션 변수를 설정하고 해당 변수에 액세스하는 코드입니다.

<!DOCTYPE HTML>

<html>
   <body>
      <script type = "text/javascript">
         
         if( sessionStorage.hits ) {
            sessionStorage.hits = Number(sessionStorage.hits) +1;
         } else {
            sessionStorage.hits = 1;
         }
         document.write("Total Hits :" + sessionStorage.hits );
      </script>
	
      <p>Refresh the page to increase number of hits.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

이것은 다음 결과를 생성합니다-

로컬 스토리지

로컬 저장소는 그 스팬 여러 개의 창을 저장을 위해 설계되었으며, 현재 세션을 넘어 지속된다. 특히 웹 응용 프로그램은 성능상의 이유로 전체 사용자 작성 문서 또는 사용자의 사서함과 같은 메가 바이트의 사용자 데이터를 클라이언트 측에 저장하려고 할 수 있습니다.

다시 말하지만, 쿠키는 모든 요청과 함께 전송되기 때문에이 경우를 잘 처리하지 못합니다.

예

HTML5는 시간 제한없이 페이지의 로컬 스토리지 영역에 액세스하는 데 사용되는 localStorage 속성을 도입 했으며이 로컬 스토리지는 해당 페이지를 사용할 때마다 사용할 수 있습니다.

다음은 로컬 저장소 변수를 설정하고이 페이지에 액세스 할 때마다 해당 변수에 액세스하는 코드입니다. 다음에 창을 열 때도 마찬가지입니다.

<!DOCTYPE HTML>

<html>
   <body>
      <script type = "text/javascript">
         
         if( localStorage.hits ) {
            localStorage.hits = Number(localStorage.hits) +1;
         } else {
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
      </script>
		
      <p>Refresh the page to increase number of hits.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

이것은 다음 결과를 생성합니다-

웹 저장소 삭제

민감한 데이터를 로컬 시스템에 저장하는 것은 위험 할 수 있으며 보안 허점을 남길 수 있습니다.

세션 저장 데이터는 세션이 종료됩니다 직후 브라우저에 의해 삭제 될 것입니다.

로컬 저장소 설정을 지우려면 다음을 호출해야합니다. localStorage.remove('key'); 여기서 'key'는 제거하려는 값의 키입니다. 모든 설정을 지우려면 전화를해야합니다.localStorage.clear() 방법.

다음은 완전한 로컬 저장소를 지우는 코드입니다.

<!DOCTYPE HTML>

<html>
   <body>

      <script type = "text/javascript">
         localStorage.clear();

         // Reset number of hits.
         if( localStorage.hits ) {
            localStorage.hits = Number(localStorage.hits) +1;
         } else {
            localStorage.hits = 1;
         }
         document.write("Total Hits :" + localStorage.hits );
			
      </script>
		
      <p>Refreshing the page would not to increase hit counter.</p>
      <p>Close the window and open it again and check the result.</p>

   </body>
</html>

이것은 다음 결과를 생성합니다-