웹 스토리지 ?
- 웹 스토리지 API는 웹 브라우저가 직접 데이터를 저장한다.
- HTML5 이전에는 응용 프로그램이 데이터를 서버에게 요청할 때마다 매번 쿠키(cookie)에 정보를 저장했지만, 웹 스토리지는 사용자 측에서 좀 더 많은 양의 정보를 안전하게 저장할 수 있다.
- 데이터는 모든 서버 요청에 포함되어 있지 않지만, 요구하는 경우에만 사용된다. 이는 웹사이트의 성능에 영향을 주지 않고 대량의 데이터를 저장할 수도 있다.
- 데이터는 key/value 쌍을 저장하고 웹페이지는 자체적으로 저장된 데이터에 액세스할 수 있다.
- 웹 스토리지는 오리진(origin)마다 단 하나씩만 존재한다.
오리진 - 도메인(domain)과 프로토콜(protocol)의 한쌍으로 이루어진 식별자.
웹 스토리지를 활용한 대표적인 기능
- sesstionStorage를 활용해서 사용자가 '입력폼'을 입력하다가 페이지에서 벗어난 경우 백업/복구
- 글쓰기를 하다가 사용자가 창을 벗어난 경우 관련 작성하던 내용 백업/복구
- 웹페이지의 개인화 설정들에 대한 저장과 제공(캐쉬로 활용)
- 현재 읽은 글의 히스토리 저장(카운팅, 읽은 글 표시 등으로 활용)
- Canvas나 이미지에 대한 임시 저장 기능(base64로 변환)
- 웹페이지간 정보 전달(웹서버를 경유하지 않고 정보를 로컬에 유지)
웹 스토리지 객체
- sesstionStorage : 하나의 세션(sesstion)만을 위한 데이터를 저장하는 객체
- localStorage : 보관 기한이 없는 데이터를 저장할 수 있는 객체
예제 - localStorage
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>
<h3>localStorage</h3>
<p>
- 데이터 보존기간에 제한 없음<br>
- 도메인당 하나가 생성<br>
- 쿠키를 이용한 설정을 대신하기 적당
</p>
<p>
<button type="button" onclick="clickCount()">카운트증가</button>
<button type="button" onclick="deleteCount()">삭제</button>
</p>
<hr>
<div id="log"></div>
<script type="text/javascript">
viewCount();
function clickCount() {
// Storage를 지원하지 않으면
if(typeof(Storage) === "undefined") {
return;
}
// 웹 스토리지 값 가져오기
var cnt = localStorage.count; // count는 내가 웹 스토리지에 저장할 때 사용한 이름
// var cnt = localStorage.getItem('count');
if(cnt) {
cnt = Number(cnt) + 1;
} else {
cnt = 1;
}
// 웹 스토리지에 count라는 이름으로 저장
localStorage.count = cnt;
localStorage.setItem("count", cnt);
viewCount();
}
function deleteCount() {
if(typeof(Storage) === "undefined") {
return;
}
delete localStorage.count;
viewCount();
}
function viewCount() {
// Storage를 지원하지 않으면
if(typeof(Storage) === "undefined") {
return;
}
var cnt = localStorage.count;
cnt = cnt ? cnt : "";
document.getElementById("log").innerHTML = "카운터의 현재 횟수 : " + cnt;
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>
<h3>localStorage</h3>
<p>
<input type="text" id="subject" placeholder="좋아하는 과목">
<button type="button" onclick="addLog()">추가</button>
<button type="button" onclick="deleteLog()">삭제</button>
</p>
<div id="log"></div>
<script type="text/javascript">
viewLog();
function viewLog() {
if(typeof(Storage) === "undefined") {
return;
}
var ss = JSON.parse(localStorage.getItem("subject")) || [];
var s = ss.join();
document.getElementById("log").innerHTML = "좋아하는 과목 : " + s;
}
function addLog() {
if(typeof(Storage) === "undefined") {
return;
}
var s = document.getElementById("subject").value.trim();
if(! s) {
return;
}
var ss = JSON.parse(localStorage.getItem("subject")) || [];
// 처음 실행 시, 아무 것도 없어서 undefined.
// 따라서 첫 실행시에는 var ss = []; 가 된다.
ss.push(s);
localStorage.setItem("subject", JSON.stringify(ss));
viewLog();
document.getElementById("subject").value = "";
}
function deleteLog() {
if(typeof(Storage) === "undefined") {
return;
}
delete localStorage.removeItem("subject");
viewLog();
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
.list li {
cursor: pointer;
}
.list li:hover:after, .list li.chk:after {
content: '\2605';
color: tomato;
}
.list li.chk:hover:after {
content: '\2605';
}
</style>
</head>
<body>
<h3>localStorage 예제</h3>
<ul class="list">
<li id="java">자바</li>
<li id="oracle">Oracle</li>
<li id="html">HTML</li>
<li id="javascript">자바스크립트</li>
<li id="spring">스프링</li>
<li id="css">css</li>
</ul>
<script type="text/javascript">
var progs = JSON.parse(localStorage.getItem("progs")) || [];
progs.forEach(function(data) {
document.getElementById(data).className = "chk";
});
document.querySelector(".list").addEventListener("click", function(e) {
var id = e.target.id;
var item = e.target;
var index = progs.indexOf(id);
if(index == -1) {
progs.push(id);
item.className = "chk";
} else {
progs.splice(index, 1);
item.className = "";
}
localStorage.setItem("progs", JSON.stringify(progs));
})
</script>
</body>
</html>
예제 - sesstionStorage
더보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
</head>
<body>
<h3>sessionStorage</h3>
<p>
- 한번의 세션 동안만 유지<br>
- 유효범위와 보존기간이 있다.<br>
- 같은 브라우저도 새로 생성되는 창에서는 세션이 다르므로 다른 스트로지를 가진다.<br>
- 도메인마다 따로 생성된다.<br>
</p>
<p>
<button type="button" onclick="clickCount()">카운트증가</button>
<button type="button" onclick="deleteCount()">삭제</button>
</p>
<hr>
<div id="log"></div>
<script type="text/javascript">
viewCount();
function clickCount() {
// Storage를 지원하지 않으면
if(typeof(Storage) === "undefined") {
return;
}
// 웹 스토리지 값 가져오기
var cnt = sessionStorage.count; // count는 내가 웹 스토리지에 저장할 때 사용한 이름
// var cnt = sessionStorage.getItem('count');
if(cnt) {
cnt = Number(cnt) + 1;
} else {
cnt = 1;
}
// 웹 스토리지에 count라는 이름으로 저장
sessionStorage.count = cnt;
sessionStorage.setItem("count", cnt);
viewCount();
}
function deleteCount() {
if(typeof(Storage) === "undefined") {
return;
}
delete sessionStorage.count;
viewCount();
}
function viewCount() {
// Storage를 지원하지 않으면
if(typeof(Storage) === "undefined") {
return;
}
var cnt = sessionStorage.count;
cnt = cnt ? cnt : "";
document.getElementById("log").innerHTML = "카운터의 현재 횟수 : " + cnt;
}
</script>
</body>
</html>
'쌍용강북교육센터 > 10월' 카테고리의 다른 글
| 1007_CSS : 반응형 웹 만들기 (0) | 2021.10.09 |
|---|---|
| 1006_ JavaScript : ip 기반 위도 경도 확인 (0) | 2021.10.07 |
| 1006_JavaScript : File, FileReader interface 파일관련인터페이스들 (0) | 2021.10.07 |
| 1006_JavaScript : DOM (Document Object Model) 문서 객체 모델 (0) | 2021.10.07 |
| 1005_JavaScript : 정규식(정규 표현식) Regular Expression (0) | 2021.10.05 |