웹 스토리지

웹 스토리지

 

쿠키

쿠키는 클라이언트에 간단한 정보를 저장하기 위해 사용합니다.
쿠키는 상당히 간단하고 편리합니다.

쿠키의 단점

쿠키는 데이터 저장 용량이 4kb 밖에 되지 않습니다.

쿠키는 유효기간에 제한이 있으며 여러 가지 보안 문제가 있습니다.

 

웹 스토리지

웹 스토리지는 클라이언트에 간단한 정보를 저장하기 위한 저장 영역을 의미합니다.

웹 스토리지의 역할은 쿠키와 비슷하지만 크기에 제한이 없으며 유효기간도 존재하지 않습니다.

웹 스토리지에 저장되는 데이터는 키와 값으로 구성되어 있습니다.

 

로컬 스토리지

로컬 스토리지는 데이터 저장 시간에 제한이 없어 사용자가 지우지 않는 한 영구적으로 보관이 가능합니다.

로컬 스토리지는 도메인마다 저장 영역이 따로 생성되고, 도메인마다 생성된 로컬 스토리지에는 서로 접근할 수 없습니다.

로컬 스토리지는 같은 도메인에 속해 있는 웹 페이지들은 모두 접근이 가능합니다.

로컬 스토리지 관련 메서드 및 속성

메서드 / 속성	설명
length	저장되어 있는 데이터 수를 반환함
key(index)	인덱스를 지정하여 키를 얻음
getitem(key)	키에 대응하는 값을 얻음
setItem(key, data)	키와 값을 지정하여 데이터를 저장함
removeItem(key)	키에 대응하는 값을 삭제함
clear( )	저장되어 있는 전체 데이터를 삭제함

 

데이터 저장하기

스토리지에 키와 값을 저장하기 위해서는 setItem() 메서드를 사용해야 하지만 키를 통하여 직접 값을 저장할 수도 있습니다.

 

형식

1.  localStorage.setItem(key,  data); 2.  localStorage.key = data; 3.  localStorage[key] = data;

예제

1.  localStorage.setItem("web",  "program"); 2.  localStorage.web = "program"; 3.  localStorage["web"] = "program";

로컬 스토리지에 값을 저장한 후 구글 개발자 도구를 사용하여 저장된 값을 확인 가능합니다.

 

예제

<script type="text/javascript">   window.onload = function()   {      // 브라우저에서 로컬 스토리지를 지원하는지 여부를 판단함      if (window.localStorage)      {         localStorage.setItem("web", "program");      }   }; </script>

 

데이터 읽기

스토리지에 저장되어 있는 값을 읽기 위해서는 getItem( ) 메서드를 사용합니다.

스토리지에 값을 저장할 때와 같이 굳이 메서드를 사용하지 않고 키에 직접 접근하여 값을 가져올 수도 있습니다.

 

형식

1.  localStorage.getItem(key); 2.  localStorage.key; 3.  localStorage[key];

예제

1.  var  value = localStorage.getItem("web"); 2.  var  value = localStorage.web; 3.  var  value = localStorage["web"];

예제

<script type="text/javascript">   window.onload = function()   {      // 브라우저에서 로컬 스토리지를 지원하는지 여부를 판단함      if (window.localStorage)      {         localStorage.setItem("web", "program");         var value = localStorage.getItem("web");         alert(value);  // value 에 해당하는 "program"을 자바 스크립트로 알려줌      }   }; </script>

 

값 삭제하기

스토리지에 저장되어 있는 값을 삭제하기 위해서는 removeItem( ) 메서드를 사용합니다.

저장 값을 삭제하는 방법은 직접 키에 접근하여 삭제가 가능합니다.

 

형식

1.  localStorage.removeItem(key); 2.  delete  localStorage.key; 3.  delete  localStorage[key];

예제

1.   localStorage.removeItem("web"); 2.   delete  localStorage.web; 3.   delete  localStorage["web"];

 

웹 스토리지 실습 프로그램