티스토리 뷰

프로그래밍/HTML5

스토리지 (Storage) sessionStorage, localStorage

쇠주는참이슬 2012. 3. 22. 11:03
세션 스토리지 : 세션 동안의 데이터를 기억하고있음. 세션이 끝나면 데이터가 삭제됨 sessionStroage 객체를 사용
 
로컬 스토리지 : 세션이 끝나도 계속 기억하고있음. localStorage 라는 객체를 사용 



저장

sessionStorage.setItem(key, value);
localStorage .setItem(key, value);

ex)  sessionStorage.setItem('1', 데이터1);

삭제
sessionStorage.removeItem(key);
localStorage. removeItem (key);

sessionStorage.clear();
localStorage . clear();  




크롬에서 확인한 모습.


<!DOCTYPE html> 
<html> 
<head> 
<title>Web Storage</title> 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" > 
<style> 
body{
background-color:#2B2B2B;
color: white;
font-family: Lucida Grande;
}
 h2, h3 {
color: #F5F5F5;
}
#displaysession, #displaylocal {
padding:5px;
border:1px solid #FFC;
margin:10px;
width:350px;
height:auto;
}
a, a:hover, a:visited{
text-decoration: none;
color: white;
font-weight: bold;
}
#session_storage_info{
padding-top: 5px;
padding-bottom: 5px;
margin-bottom:10px;
border-bottom: 2px dotted white;
}
 
 
</style> 
<script type="text/javascript"> 
window.onload  = function(){
  gettheSession(); //세션 스토리지 데이터 가져오기
  gettheLocal(); //로컬 스토리지 데이터 가져오기
};
 
 
function savetheSession(){
var first = document.getElementById("first"); //해당 id 요소 가져오기
var thevalue = first.value; //값 가져오기
sessionStorage.setItem(1, thevalue); //키 1에 해당하는 값 저장하기
gettheSession(); //값 가져와서 화면에 보여주는 함수
}
function gettheSession(){
var data;
var thediv = document.getElementById("displaysession"); //해당 id 요소 가져오기
data = sessionStorage.getItem(1); //키가 1인 값 가져오기
if (data){ //값이 있으면
thediv.innerHTML = "저장된 값:" + data; // innerHTML 수정해서 문장 안에 그 값을 보여주기 
}
 
}

function savetheLocal(){
var second = document.getElementById("second");
var thevalue = second.value;
localStorage.setItem(1, thevalue);
gettheLocal();
}
function gettheLocal(){
var data;
var thediv = document.getElementById("displaylocal");
data = localStorage.getItem(1);
if (data){
thediv.innerHTML = "저장된 값:"+data;
}
 
}
 </script> 
</head> 
<body> 
 
<h2>세션 스토리지(Session Storage)</h2> 
  
<input type="text" name="" value="" id="first" /> 
 
<button onclick="javascript:savetheSession();">저장!</button>
 
<div id="displaysession">비어있음</div>  
 
<h2>로컬 스토리지(Local Storage)</h2> 
 
<input type="text" name="" value="" id="second" /> 
 
<button onClick="jascript:savetheLocal();">저장!</button> 
 
<div id="displaylocal">비어있음</div> 
 
</div> 
 
</body> 
 
</html>

'프로그래밍 > HTML5' 카테고리의 다른 글

Drag & Drop (드래그 앤 드롭)(2)  (0) 2012.03.22
Drag & Drop (드래그 앤 드롭)(1)  (0) 2012.03.22
HTML5 Canvas를 이용한 간단한 그림판 만들기.  (0) 2012.03.21
1. HTML5를 이용한 간단한 웹폼화면 만들기  (0) 2012.03.20
HTML5 태그를 익스플로러에서 인식시키기 위한 방법  (0) 2012.03.19
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함