* 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>
|
출처: http://cutewebi.tistory.com/712?category=100304 [cutewebi 희정냥★]