목차
Web Storage 예제 - localStorage에 텍스트 저장 Web Storage 정의 Web Storage 객체종류 localStorage 예제 - 클릭횟수 구하기 sessionStorage 예제 - 클릭횟수 구하기 (현재세션에서)
Web Storage 예제 - localStorage에 텍스트 저장
<div id="demo"></div>
<script>
if (typeof(Storage) !== "undefined") { // Web Storage 지원여부 체크
localStorage .setItem("site", "홈짱닷컴 Homzzang.com"); // 저장
document.getElementById("demo").innerHTML = localStorage .getItem("site"); // 호출 및 출력
} else {
document.getElementById("demo").innerHTML = "localStorage 지원 않는 브라우저는 개나 줘버려.";
}
</script>
결과보기
[참고1]
localStorage.site = "홈짱닷컴 Homzzang.com"; // 저장
document.getElementById("demo").innerHTML = localStorage.site; // 호출 및 출력
[참고2]
localStorage.removeItem("site"); // 삭제
Web Storage 정의
웹 애플리케이션이 사용자 브라우저 내에 로컬로 데이터 저장 가능.
1.
웹스토리지는 쿠키보다 낫음.
HTML5 이전엔 서버 요청 응용프로그램 데이터를 쿠키 에 저장해야 했으나, 웹 스토리지 이용해 웹 사이트 성능에 영향 안 주고 대량 데이터를 로컬에 안전 하게 저장 가능.
1-1.
쿠키와 달리, 웹스토리지 용량 한도는 훨씬 큼. (최소 5MB 이상).
1-2.
웹스토리지에 담긴 정보는 서버로 절대로 전송 안 됨.
2.
웹 저장소는 원본(도메인 및 프로토콜별)로 제공됨.
3.
IE8 이상 주요 최신 브라우저 모두 지원 .
Web Storage 객체종류
window.localStorage
소멸 기간 없이 데이터 저장 - 영구저장
window.sessionStorage
한 세션에 대한 데이터 저장. (브라우저 탭 닫으면 데이터 손실) - 임시저장
localStorage 예제 - 클릭횟수 구하기
<script>
function homzzang() {
if (typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = localStorage.clickcount + " 번 클릭";
} else {
document.getElementById("result").innerHTML = "web storage 안 되는 브라우저는 개나 줘버려.";
}
}
</script>
<button onclick="homzzang()" type="button">Click me!</button>
<div id="result"></div>
결과보기
sessionStorage 예제 - 클릭횟수 구하기 (현재세션에서)
<script>
function homzzang() {
if (typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = sessionStorage.clickcount + " 번 클릭 (현재세션상태에서)";
} else {
document.getElementById("result").innerHTML = "web storage 안 되는 브라우저는 개나 줘버려";
}
}
</script>
<p><button onclick="homzzang()" type="button">클릭</button></p>
<div id="result"></div>
결과보기
