2.sessionStorage
여러분들이 웹
브라우저를 이용하여 웹 서버에 연결하면 하나의 세션(session)이 시작됩니다. 다시 말해서 여러분이 네이버나 다음 웹사이트를 웹 브라우저를 이용하여 접속하면 하나의 논리적인 연결이 된다는
말입니다.
그래서 여러분들이 웹사이트에 접속한 후 해당 세션(session)에 데이터를 저장할 수
있는데 특정 시간 동안 아무런 작업을 하지 않거나 웹브라우저를 닫으면 자동적으로 세션이 종료되어 세션에 저장되어 있던 데이터들은 삭제되게 됩니다.
HTML5에서는 이러한 작업들을 sessionStorage를 이용하게 되는데 방금 전 설명한 localStorage와 비슷하게 데이터 추가 및 수정, 읽기 등의
작업을 수행할 수 있습니다. 차이점이라면 데이터가 지속적이냐 일시적이냐와 같은 데이터 지속성과 관련된
부분과 sessionStorage는 다수의 브라우저를 실행시켜서 웹 사이트에 연결할 경우 각각 독립적으로
세션(session)이 동작하는 점이 다르다고 볼 수 있습니다.
sessionStorage가 사용하는 메서드나 속성들은 localStorage와 동일하므로
바로 예제로 들어갑니다. 메모장으로 “localStorageEx.html”을
열고 다음과 같이 강조된 부분을 변경합니다.
<!DOCTYPE HTML>
<html>
<head>
<title>sessionStorage 예제</title>
<script type="text/javascript">
function InsertData()
{
var inkey = document.getElementById("inkey").value;
var invalue = document.getElementById("invalue").value;
sessionStorage.setItem(inkey, invalue);
document.getElementById("inkey").value="";
document.getElementById("invalue").value="";
}
function SearchData()
{
var inkey = document.getElementById("getkey").value;
var invalue = sessionStorage.getItem(inkey);
alert(inkey+"키와 연관된 값은" + invalue);
document.getElementById("getkey").value="";
}
function DeleteData()
{
var inkey = document.getElementById("getkey").value;
var invalue = sessionStorage.removeItem(inkey);
alert(inkey+"키와 연관된 값은" + invalue);
}
</script>
</head>
<body>
<h1>sessionStorage</h1>
키(key): <input id="inkey" type="text">
값(value) : <input id="invalue" type="text">
<input type="button" value="저장" onclick="InsertData()"><br /><br />
키(key): <input id="getkey" type="text">
<input type="button" value="데이터 보기" onclick="SearchData()">
<input type="button" value="삭제" onclick="DeleteData()">
</body></html>
이제 다른 이름으로
저장을 선택하여 “sessionStorageEx.html”을 저장하고 이 파일을 htdocs 디렉토리에 복사합니다. IE9를 실행한 후 “http://localhost/sessionStorageEx.html”로 입력하여 웹페이지를 띄웁니다.
그 다음 다시 IE9를 실행한 후 “http://localhost/sessionStorageEx.html”로
입력하면 웹페이지를 띄웁니다. 그래서 다음과 같이 2개의 IE9 웹 브라우저가 나타나도록 합니다.
위에 있는 IE9 웹브라우저에서 저장 버튼 옆에 있는 키(key), 값(value) 옆에 input 요소에 shoessize, 270을 각각 입력하고 저장 버튼을 클릭합니다. 그 다음 데이터 보기 버튼 라인의 키(key) 옆의 input 요소에 shoessize를 입력하고 데이터 보기를 클릭하면 다음과 같이 나타납니다.
이제 아래에
있는 IE9 웹브라우저에서 데이터 보기 버튼 라인의 키(key) 옆의 input 요소에 shoessize를 입력하고 데이터 보기를 클릭하면
다음과 같이 위에 있는 웹 브라우저에서 shoessize를 입력하고 데이터 보기 버튼을 클릭했을 때
나타나던 270이라는 값이 나타나지 않고 null로 나타나는
것을 알 수 있습니다.
이와 같이 sessionStorage는 독립적으로 동작하는 것을 알 수 있습니다.
방금 전 위에 있는 IE9 웹브라우저에서 저장 버튼 옆에 있는 키(key), 값(value) 옆에 input 요소에 shoessize, 270을 각각 입력하고 저장 버튼을 클릭하여 sessionStorage에 저장했던 웹브라우저 창을 닫은 후 다시 IE9를 실행한 후 “http://localhost/sessionStorageEx.html”로 입력하면 웹페이지를 연 후 다음과 같이 방금 전 sessionStorage 저장한 키(key) 값을 이용하여 해당 키와 연관된 데이터 값을 보기 위해서 데이터 보기 버튼을 클릭합니다.
그러면 localStorage와는 달리 shoessize 키와 연관된 데이터 값(value)는 null을 나타냅니다. 즉 해당 데이터는 삭제된 것을 알 수 있습니다.
3. Storage 이벤트
Storage 이벤트는 session Storage나 local Storage에 변화가 있으면
이벤트가 발생하는데 이를 표로 정리하여 나타내면 다음과 같습니다.
|
이벤트 속성 |
설명 |
|
key |
변화된 키(key) 값을 반환 |
|
oldValue |
해당 키(key)와 관련된 이전 값을 반환 |
|
newValue |
해당 키(key)와 관련된 새로운 값을 반환 |
|
url |
변화가 발생한 문서의 URL을 반환 |
|
storageArea |
변화가 발생한 Storage 객체를 반환 |
참고로 여러분들이 storage 관련한 이벤트의 실제 동작을 확인하기 위해서는 기본적으로 웹서버에 올려진 웹페이지 형태로 확인하여야
하며 “file:///페이지.html”로는 정확한 동작을
확인할 수 없습니다. 이제 Storage의 이벤트 관련 예제를 local storage를 이용하여 어떻게 동작하는지 알아봅니다.
메모장으로 “localStorageEx.html”을 열어서 <script>…</script> 블록의 최상단에 다음과 같이 코드를 추가합니다.
window.addEventListener("storage",
function(e) {
alert("Local storage가 변경됨");},
false);
function InsertData()
위와 같이 window 객체에 addEventListener() 메서드를 이용하여 storage 이벤트가 발생하면 알림창을 띄워서 “Local storage가
변경됨”이라는 메시지를 출력하게 합니다.
다른 이름으로 저장을 선택하여 “localStoragewithEvent.html”로 저장하고 IE9를 이용하여 사이트에 연결한 후 다음과 같이 키(key)-값(value)을 입력하고 저장 버튼을 클릭합니다.
그러면 다음과
같이 알림창이 나타나 코드에 작성한 메시지를 출력합니다.
다음으로 Chrome으로 사이트에 연결한 후 방금 전과 동일한 키(key)-값(value)을 입력하고 저장 버튼을 클릭합니다.
그러면 IE9과는 다르게 아무런 일도 나타내지 않습니다. 새로운 탭 열기를
클릭한 후 URL 창에 방금 전과 같이 “http://localhost/localStoragewithEvent.html”
입력하여 사이트에 연결한 후 다시 원래의 조금 전 탭을 열어 다음과 같이 “취미, 여행”를 입력합니다.
그러면 조금 전과 다르게 두 번째 탭이 활성화되면서 다음과 같이 알림창에 메시지를 표시합니다.
이와 같이 브라우저별로 localStorage를 예로 들었을 때 이벤트가 변화한 것에 대해서 해당 window에서 감지하여 나타내는 경우도 있고 다른 window에서 감지해서 나타내는 경우도 있음을 알 수 있습니다. 개발자의 입장이라면 이러한 부분도 고려를 해야 할 것 같습니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 해당 부분을 그대로를 공개하는
것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을
알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 칼라 이미지를 Grayscale 이미지로 나타내기 (0) | 2013.08.08 |
|---|---|
| Box Model을 이용한 게시판 형태 만들기 (0) | 2013.08.08 |
| 7장 Web Storage (0) | 2013.08.08 |
| 6장 Drag and Drop (0) | 2013.08.08 |
| 2. Video (0) | 2013.08.07 |
