본문 바로가기

HTML5

W3Schools HTML5 튜토리얼 (한글) -8

W3Schools HTML5 튜토리얼

HTML5 홈
HTML5 소개
HTML5 새 엘리먼트 (Elements)
HTML5 비디오 (Video)
HTML5 비디오/Dom (Video/DOM)
HTML5 오디오 (Audio)
HTML5 캔버스 (Canvas)
HTML5 웹 저장공간 (Web Storage)

HTML5 폼 (Forms)

HTML5 입력타입 (Input Types)
HTML5 폼 엘리먼트 (Form Elements)
HTML5 폼 속성 (Form Attributes)

HTML5 참조목록 (Reference)

HTML5 태그 (Tags)
HTML5 속성 (Attributes)
HTML5 이벤트 (Events)
HTML5 2D 캔버스 (Canvas 2d)
HTML 유효 DTD (Valid DTDs)



클라이언트에서 데이터 저장하기

HTML5는 클라이언트가 데이터를 저장할수있는 새로운 두개의 객체를 지원합니다:

  • localStorage -시간제한없이 데이터를 저장함
  • sessionStorage - 한 세션내에 데이터를 저장함

지금껏 이 방식은 쿠키를 통해 구현해왔습니다. 쿠키는 서버를 통해 모든 요청을 처리해야하므로 서버를 느리고 비효율적으로 만들기 때문에 대용량 데이터처리에 적합하지않습니다.

HTML5는 모든 요청값을 서버로 보내지않으며 필요로 할때만 보내기 때문에 웹사이트의 성능에 영향을 주지않고 많은 양의 데이터를 저장하는게 가능합니다.

데이터를 웹사이트마다 다른 공간에 저장되며 하나의 웹사이트는 자신이 저장한 데이터만 접근할수있습니다.

HTML5는 데아터를 저장하고 처리하는데 자바스크립트를 사용합니다.


localStorage 객체

localStorage 객체는 시간제한없이 데이터를 저장합니다. 데이터는 다음날에도 다음주에도 다음해에도 이용가능할것입니다.

localStorage를 생성 및 접근하기:

예제

<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>

직접 해보기 »

다음의 예제는 유저당 페이지 방문횟수를 세어줍니다:

Example

<script type="text/javascript">
if (localStorage.pagecount)
  {
  localStorage.pagecount=Number(localStorage.pagecount) +1;
  }
else
  {
  localStorage.pagecount=1;
  }
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>

직접 해보기 »



sessionStorage 객체

sessionStorage 객체는 하나의 세션에 데이터를 저장합니다. 데이터는 유저가 브라우저를 닫으면 지워집니다.

sessionStorage 생성 및 접근하기:

예제

<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>

직접 해보기 »

다음 예제는 현재 세션내에 유저당 페이지 방문횟수를 세어줍니다:

예제

<script type="text/javascript">
if (sessionStorage.pagecount)
  {
  sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
  }
else
  {
  sessionStorage.pagecount=1;
  }
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>

직접 해보기 »