티스토리 뷰
세션 스토리지 : 세션 동안의 데이터를 기억하고있음. 세션이 끝나면 데이터가 삭제됨 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();
크롬에서 확인한 모습.
로컬 스토리지 : 세션이 끝나도 계속 기억하고있음. 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
- JS
- Mobile
- CSS
- rowspan
- 프로시저
- ASP.NET
- 저장프로시저
- 셀렉터
- 자바스크립트
- Ajax
- html5
- Excel
- Style
- json
- drag&drop
- jquery chart
- IE
- WebApi
- css3
- Chart
- 제이쿼리
- jQuery
- radius
- jQuery Mobile
- grid
- MSSQL
- WCF
- workbook
- JavaScript
- SVG
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
글 보관함