posted by 희정냥★ 2012. 6. 30. 00:04

* HTML5 WebStorage


클라이언트측에 데이터를 저장할 수 있는 기능이다.

키/값 쌍으로 데이터가 저장되고 키를 기준으로 데이터를 조회한다.


로컬스토리지(Local Storage): 영구 데이터를 저장하는 용도로 사용

window 전역객체의 localStorage 컬렉션을 이용해서 접근할 수 있다.


세션스토리지(Session Storage): 브라우저 컨텍스트에서만 유지.

window 전역객체의 sessionStorage 컬렉션을 이용해서 접근할 수 있다.


기존의 쿠키와 많이 비슷하지만 다음과 같은 점이 개선되었다.


1. 네트워크 트래픽 감조: 웹스토리지는 저장된 데이터를 서버에 전송되지 않는다.

2. 더 많은 저장 용량: 쿠키는 데이터의 개수와 용량에 제한(한사이트당 20개,4KB)을 두고 있지만, 

무제한은 아니지만 훨씬 더 큰 자료를 저장할 수 있도록 제약이 적다.

3. 더 긴 데이터 보존 기간: 만료기간이 없으므로 한번 저장한 데이터는 영구적으로 보관된다.

4. 객체 저장: 쿠키는 문자열만 저장 가능하지만 웹스토리지는 객체를 저장할 수 있다.


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>HTML5-WebStorage</title>
<script type="text/javascript">


//Local Storage에 데이터 저장
function setLocalStorage(){
if(!!window['localStorage']){
var textBox = document.querySelector('#textBox1');
window.localStorage['key1'] = textBox.value;
}
}


//Local Storage 조회
function getLocalStorage(){
if(!!window['localStorage']){
var textBox = document.querySelector('#textBox2');
textBox.value = window.localStorage['key1'];
}
}

//Session Storage에 데이터 저장

function setSessionStorage(){
if(!!window['sessionStorage']){
var textBox = document.querySelector('#textBox3');
window.sessionStorage['key1'] = textBox.value;
}
}

//Session Storage 조회
function getSessionStorage(){
if(!!window['sessionStorage']){
var textBox = document.querySelector('#textBox4');
textBox.value = window.sessionStorage['key1'];
}
}
</script>
</head>
<body>
<input type="text" id="textBox1">
<button onclick="setLocalStorage()">Local Storage에 데이터 저장</button>
<br>
<input type="text" id="textBox2">
<button onclick="getLocalStorage()">Local Storage 조회</button>
<hr>

<input type="text" id="textBox3">
<button onclick="setSessionStorage()">Session Storage에 데이터 저장</button>
<br>
<input type="text" id="textBox4">
<button onclick="getSessionStorage()">Session Storage 조회</button>
</body>
</html>

'Computer > Web' 카테고리의 다른 글

반응형 웹(Responsive Web)  (0) 2012.07.07
구글 페이지랭크(PageRank) 알고리즘  (0) 2012.07.06
HTML5 WebStorage  (1) 2012.06.30
HTML5 주요기술  (0) 2012.06.29
HTML5 웹소켓  (4) 2012.06.29
CSS Box Model  (0) 2011.09.18

댓글을 달아 주세요

  1. 문정규 2012.07.17 20:30  Addr  Edit/Del  Reply

    좋은자료 잘 보고 갑니다.
    VD 근무하시군요? 반가워요.^^