• 코드:
​x
 
1
<!DOCTYPE html>
2
<html lang="ko">
3
​
4
<head>
5
    <meta charset="UTF-8">
6
    <title>HTML5 API Web Storage</title>
7
</head>
8
​
9
<body>
10
​
11
    <h1>localStorage 객체를 이용한 데이터의 저장</h1>
12
​
13
    <div id="counter"></div>
14
    <p><button onclick="clickCounter()" type="button">카운터 증가!!</button></p>
15
    <p>브라우저 탭이나 창을 닫아도 카운터의 횟수는 초기화되지 않을 것입니다.</p>
16
​
17
    <script>
18
        function clickCounter() {
19
            if(typeof(Storage) !== "undefined") {
20
                if (localStorage.clickcount) {
21
                    localStorage.clickcount = Number(localStorage.clickcount) + 1;
22
                } else {
23
                    localStorage.clickcount = 1;
24
                }
25
                document.getElementById("counter").innerHTML = "카운터의 현재 횟수는 " + localStorage.clickcount + "입니다!";
26
            } else {
27
                document.getElementById("counter").innerHTML = "이 문장은 사용자의 웹 브라우저가 Web Storage API를 지원하지 않을 때 나타납니다!";
28
            }
29
        }
30
    </script>
31
​
32
</body>
33
​
34
</html>