[api] HTML5 - Web Storage - 웹저장소 (= 웹스토리지) (IE8 이상) ※ 마우스 클릭횟수 점검

1. Web Storage 예제 - localStorage에 텍스트 저장
2. Web Storage 정의
3. Web Storage 객체종류
4. localStorage 예제 - 클릭횟수 구하기
5. 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 이전엔 서버 요청 응용프로그램 데이터를 쿠키에 저장해야 했으나, 
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>

 

결과보기