[JAVASCRIPT/WEB API] Storage 인터페이스 : 세션 저장소 데이터 처리하기

■ Storage 인터페이스를 사용해 세션 저장소 데이터를 처리하는 방법을 보여준다.

▶ test1.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            var data;

            function saveData()
            {
                data                = 'html5';
                sessionStorage.data = 'html5';
                localStorage.data   = 'html5';

                document.getElementById('output').innerHTML = '데이터를 저장했습니다.';
            }

            function loadData()
            {
                message =           '자바 스크립트 변수 : ' + data                           + '<br />';
                message = message + '세션 저장소 변수 : '   + sessionStorage.getItem('data') + '<br />';
                message = message + '로컬 저장소 변수 : '   + localStorage.getItem('data');

                document.getElementById('output').innerHTML = message;
            }

            function goToNextPage()
            {
                location.href = 'test2.html';
            }

            function clearData()
            {
                data = '';

                sessionStorage.clear();
                localStorage.clear();

                document.getElementById('output').innerHTML = '데이터를 삭제했습니다.';
            }
        </script>
    </head>
    <body>
        <div id="output">세션 저장소 테스트입니다.</div>
        <p />
        <input type="button" value="데이터 저장" onclick="saveData();"     />
        <input type="button" value="데이터 로드" onclick="loadData();"     />
        <input type="button" value="페이지 이동" onclick="goToNextPage();" />
        <input type="button" value="데이터 삭제" onclick="clearData();"    />
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

var data;

function saveData()

{

data = 'html5';

sessionStorage.data = 'html5';

localStorage.data = 'html5';

document.getElementById('output').innerHTML = '데이터를 저장했습니다.';

}

function loadData()

{

message = '자바 스크립트 변수 : ' + data + '<br />';

message = message + '세션 저장소 변수 : ' + sessionStorage.getItem('data') + '<br />';

message = message + '로컬 저장소 변수 : ' + localStorage.getItem('data');

document.getElementById('output').innerHTML = message;

}

function goToNextPage()

{

location.href = 'test2.html';

}

function clearData()

{

data = '';

sessionStorage.clear();

localStorage.clear();

document.getElementById('output').innerHTML = '데이터를 삭제했습니다.';

}

</script>

</head>

<body>

<div id="output">세션 저장소 테스트입니다.</div>

<p />

</body>

</html>

▶ test2.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <a href="test1.html">이전 페이지로 이동</a>
    </body>
</html>