정미나닷컴

[HTML5] HTML5 Web Storage(Local Storage / Session Storage) 본문

IT

[HTML5] HTML5 Web Storage(Local Storage / Session Storage)

정미나 2011. 3. 25. 11:14
* Web Storage

- 웹 사이트의 데이터를 클라이언트에 저장
- [key/value] 쌍으로 데이터를 저장하고 key를 기반으로 데이터를 조회
- local storage는 영구적, session storage는 임시적
- 사이트의 도메인 단위로 접근 제한


* 브라우저 지원 여부 체크
if( ('localStorage' in window) && window['localStorage'] !== null) {
   alert("현재 브라우저는 WebStorage를 지원합니다")
}else{
   alert("현재 브라우저는 WebStorage를 지원하지 않습니다")
}



* Sample
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">                      
//Local Storage 저장                
function setLocalStorage(){
   var textBox = document.querySelector('#textBox1');
   window.localStorage['key1'] = textBox.value;
}      
//Local Storage 조회
function getLocalStorage(){
   var textBox = document.querySelector('#textBox2');
   textBox.value = window.localStorage['key1'];
}
       
//Session Storage 저장
function setSessionStorage(){
   var textBox = document.querySelector('#textBox3');
   window.sessionStorage['key1'] = textBox.value;
}      
//Session Storage 조회
function getSessionStorage(){
   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>    
<br/>    
<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>
저작자표시 비영리 변경금지

'IT' 카테고리의 다른 글

[ASP] ASP 내장함수: 문자열 처리 함수  (0) 2011.03.28
[ASP] ASP 내장함수: 문자열 서식 함수  (0) 2011.03.28
[Windows] Windows 7에 IIS 설치  (0) 2011.03.22
[HTML5] HTML5 개요  (0) 2011.03.10
[Java] 자바 SNS 연동  (0) 2011.01.26
'IT' Related Articles more