7장 Web Storage
여러분들은 다양한
쇼핑몰에서 여러분의 필요에 따라서 온라인 구매를 하거나 혹은 당장 구매하지는 않더라도 추후에 구매할 생각으로 보관함에 보관해두곤 합니다.
이러한 과정에서 발생하는 데이터들은 기본적으로 여러분들이 파이어폭스나 익스플로러 같은 브라우저를 통해 접속한 쇼핑몰을 관리하는 웹서버에
저장되게 됩니다. 그리고 여러분의 컴퓨터에는 이와 관련한 간단한 정보들이 쿠키(Cookie)의 형태로 저장되는 형태로 사용해왔습니다. 하지만 쿠키(Cookie)는 오늘날 같은 웹 환경에서 발생하는 많은 데이터들을 처리하기에는 기본적으로 저장 가능한 데이터
공간이 4KB로 처리하는데는 무리가 있는 것이 사실입니다.
따라서 W3C에서 이에 대한 대안으로 작년(2011년)까지만 해도 Web SQL, IndexDB, Web Storage 크게 3 부분으로 열심히 논의해 오다가 얼마 전 Web SQL은 더 이상
진행하지 않는 것으로 결론을 내렸고 IndexDB는 MS쪽에서
연구중이며 마지막으로 Web Storage가 현재로서는 거의 대세인 상황입니다.
그래서 여기서는 Web Storage를 다루었으며 “http://dev.w3.org/html5/webstorage/”에
관련 API들이 정의되어 있습니다.
Web Storage는 localStorage와
sessionStorage로 구분할 수 있으며 모두 window 객체(object)의 속성(property)으로 접근이 가능합니다.
먼저 localStorage는 일종의 클라이언트 단의 키(key)-값(value)의 조합으로 사용자의 브라우저 내에 저장됩니다. 다시 말해서
해당 정보는 사용자의 컴퓨터에서 동작하는 브라우저 내에 저장된다는 것을 의미하며 컴퓨터를 기준으로 저장되는 것이 아니고 브라우저를 기준으로 최대 5MB까지 저장 가능하며 저장되는 데이터는 삭제하지 않는 한 유지가 됩니다.
다음으로 sessionStorage는
localStorage와 마찬가지로 키(key)-값(value)의
조합으로 브라우저 창이나 탭을 닫기 전까지만 데이터를 한시적으로 저장하는데 사용됩니다. 다시 말해서 사용자가 쇼핑이나 웹 검색이 끝나 웹 브라우저 창이나 탭을 닫을 경우 sesssionStorage 객체(object)에 저장되어 있던 데이터는
사라진다는 것을 의미합니다.
예를 들어 여러분이 동일한 웹 사이트를 2개의 브라우저 창을 열어 방문할 경우 각각의 브라우저
창은 독자적인 session storage 객체를 가지게 되며 관련 데이터들은 독립적으로 관리되며 다른
웹사이트 페이지로 이동하는 경우에는 해당 데이터는 유지됩니다.
“http://dev.w3.org/html5/webstorage/”에는 Storage 인터페이스를 다음과 같이 정의하고
있습니다.
interface Storage {
readonly attribute unsigned long
length;
DOMString key(unsigned long index);
getter DOMString getItem(DOMString key);
setter creator void setItem(DOMString key, DOMString value);
deleter void removeItem(DOMString key);
void clear();
};
위의 명세를 이해하기 쉽도록 정리하여 표로 나타내면 다음과 같습니다.
|
속성 및 메서드 |
설명 |
|
length |
저장되어 있는 “key/value” 쌍의 수를 나타냄 |
|
key(index) |
index에 해당하는 키(key) 검색 |
|
getItem(key) |
key에 해당하는 값을 검색 |
|
setItem(key, value) |
새로운 “key/value”
쌍을 추가하거나 이미 해당 key가 존재하면 |
|
removeItem(key) |
key에 해당하는 “key/value”를 제거 |
|
clear() |
저장되어 있는 “key/value” 쌍들을 모두 제거 |
1. localStorage
localStorage는 앞에서 설명한대로 클라이언트 단의 키(key)-값(value)의 조합으로 사용자의 브라우저 내에 데이터를 저장, 검색, 삭제하는 작업이 가능하도록 합니다.
1.1 데이터 저장
및 수정
브라우저에 데이터를 저장하기 위해서 방금 전 Storage 인터페이스를
표로 나타낸 메서드 중 setItem(key, value) 메서드를 사용하여 새로운 “키/값”을 저장하거나 기존에 key 존재할 경우는 기존 key의 값(value)이 수정되게 되며 사용 형식은 다음과 같습니다.
localStorage.setItem(key, value);
예를 들어 local storage에 키(key)는 “shoesize”이고 값(value)은 “265”인 데이터를 저장한다면 다음과 같이 간단하게 저장할 수 있습니다.
localStorage.setItem(“shoessize”, “265”);
그리고 다시 local storage에 키(key)는 “shoesize”이고 값(value)은 “265”에서 “270”으로
수정하고자 한다면 위 식에서 value 값만 “270”으로
바꿔주면 됩니다.
1.2 데이터 읽기
저장된 데이터를 읽기 위해서는 getItem(key) 메서드는
문자열 형태의 key를 입력 파라미터로 받는 getItem(key) 메서드를
이용하여 해당 키(key)와 연관된 값을 검색할 수 있으며 사용방법은 다음과 같이 간단합니다.
localStorage.getItem(key);
예를 들어 local storage에 키(key)는 “shoesize”이고 값(value)은 “265”인 데이터를 저장되어 있다면 다음과 같이 간단하게 검색할 수 있습니다.
var mysize = localStorage.getItem(“shoessize”);
1.3 데이터 삭제
데이터 삭제는 키(key)를 기준으로 해당 키(key)와 데이터만 삭제하는 removeItem(key) 메서드와
전체 데이터를 삭제하는 clear() 메서드를 사용할 수 있으며 사용 형식은 다음과 같습니다.
localStorage.removeItem(key);
localStorage.clear();
예를 들어 local storage에 키(key)는 “shoesize”이고 값(value)은 “265”인 데이터를 저장되어 있다면 다음과 같이 간단하게 삭제할 수 있습니다.
localStorage.removeItem(“shoessize”);
localStorage를 이용한 데이터
저장, 수정, 검색, 삭제에
대해서 정리하면 데이터를 저장, 수정하려면 setItem() 메서드를, 데이터를 검색하려면 getItem() 메서드를 사용하면 됩니다. 그리고 마지막으로 데이터를 삭제하려면 removeItem() 메서드나 clear() 메서드를 사용하면 됩니다.
이제 이와 관련한 예제를 해볼까요? 메모장을 열어서
다음과 같이 코드를 작성합니다.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=ko">
<title>localStorage 예제</title>
<script
type="text/javascript">
</script>
</head>
<body>
<h1>localStorage</h1>
키(key):
<input id="inkey" type="text">
값(value) : <input id="invalue" type="text">
<input type="button" value="저장" ><br /><br />
키(key): <input id="getkey" type="text">
<input type="button" value="데이터 보기" >
<input type="button" value="삭제" ></body>
</html>
위와 같이 작성한 후 “localStorageEx.html”로 저장하고 이를 htdocs 디렉토리에 복사합니다. IE9를 실행한 후 다음과 같이 URL 창에 “http://localhost/localStorageEx.html”로 입력하면 다음과 같이 나타납니다.
이제 제일 위의
키(key) 옆에 있는 input에 shoessize, 값(value) 옆의 input에는 265
형태로 입력하고 저장 버튼을 클릭하면 실제 데이터가 저장되도록 해봅니다.
실제로 localStorage에 저장되도록 하기 위해서
value 속성값이 “저장”인 input 요소 태그 내에 onclick 이벤트와 함께 호출할 함수이름을
다음과 같이 명시합니다.
<input type="button"
value="저장" onclick="InsertData()">
그 다음 호출할 함수를 <script
type="text/javascript"> </script> 사이에 다음과 같이 작성하면 됩니다.
<script
type="text/javascript">
function
InsertData()
{
var inkey = document.getElementById("inkey").value;
var invalue = document.getElementById("invalue").value;
localStorage.setItem(inkey, invalue);
document.getElementById("inkey").value="";
document.getElementById("invalue").value="";
}</script>
다음으로 getItem() 메서드를 이용하여 localStorage에 저장된 데이터를 보기 위해서 value 속성값이 “데이터 보기”인 input 요소 태그 내에 onclick 이벤트와 함께 호출할 함수이름을 명시합니다.
<input type="button" value="데이터 보기" onclick="SearchData()">
같은 방법으로
호출할 SeachData() 함수를 <script
type="text/javascript"> </script> 사이에 다음과 같이 작성합니다.
function SearchData()
{
var inkey = document.getElementById("getkey").value;
var invalue = localStorage.getItem(inkey);
alert(inkey+"키와 연관된 값은" + invalue);
document.getElementById("getkey").value="";
}</script>
마지막으로 removeItem() 메서드를 이용하여 해당 키(key)에 대한 데이터를 삭제하기 위해서 value 속성값이 “삭제”인 input 요소 태그 내에 onclick 이벤트와 함께 호출할 함수이름을 명시합니다.
<input type="button" value="삭제" onclick="DeleteData()">
호출할 DeleteData() 함수를 <script type="text/javascript"> </script> 사이에 다음과 같이 작성합니다.
function DeleteData()
{
var inkey = document.getElementById("getkey").value;
var invalue = localStorage.removeItem(inkey);
alert(inkey+"키와 연관된 값은" + invalue);
}</script>
이제 “localStorageEx.html”을 재저장하여 변경사항을 반영한 후 이 파일을 htdocs 디렉토리에 복사하여 기존의 “localStorageEx.html” 파일을 덮어쓴 후 IE9를 실행한 후 다음과 같이 URL 창에 “http://localhost/localStorageEx.html”로 입력하면 웹페이지를 띄운 후 다음과 같이 키(key), 값(value)을 입력하고 저장 버튼을 클릭합니다.
그러면 키(key), 값(value) 요소에 입력한 값들이 InsertData() 함수에 명시된 코드들에 의해서 지워져서 나타나게 됩니다.
여기서 현재는 관련 이벤트에 대해서 설명하지 않았으므로 이벤트 부분에서 설명하기로 합니다.
데이터가 저장되었다는 전제하에 데이터 보기 버튼 라인에 있는 키(Key)의 input 요소에 다음과 같이 shoessize로 입력하고 데이터
보기 버튼을 클릭하면 localStorage에 저장되어 있는 shoessize에
연관된 값(value)를 나타내게 됩니다.
다음으로 삭제 기능을 확인하기 위해서 삭제 버튼 라인의 키(Key)의 input 요소에 다음과 같이 shoessize로 입력하고 삭제 버튼을 클릭하면 해당 데이터는 삭제가 되므로 undefined로 나타나게 되며 다시 shoessize로 입력한 후 데이터 보기 버튼을 클릭하면 다음과 같이 null로 나타나게 됩니다.
마지막으로 localStorage에 저장된 데이터는 삭제하지 않는 한 유지된다고 했습니다. 다시 말해서 웹 브라우저를 종료하고 다시 열어서 검색해도 저장된 데이터가 검색된다는 것인데 확인을 위해서 IE9를 실행한 후 다음과 같이 URL 창에 “http://localhost/localStorageEx.html”로 입력하여 웹페이지를 연 후 다음과 같이 입력하고 저장하고 데이터 보기 버튼 옆에 userID를 입력하고 데이터 보기를 클릭하면 “userID키와 연관된 값은775vf9”의 형태로 알림창에 나타냅니다.
이제 웹 브라우저를
닫고 다시 IE9를 실행한 후 URL 창에 “http://localhost/localStorageEx.html”로
입력하여 웹페이지를 연 후 다음과 같이 데이터 보기 버튼 옆에 userID를 입력하고 데이터
보기를 클릭합니다.
그러면 위와
같이 “userID키와 연관된 값은775vf9”의 형태로
알림창에 나타냅니다. 이를 통해 localStorage는
저장된 데이터가 지속성을 띠는 것을 알 수 있습니다.
1.4 키-값으로 이루어진 다수의 데이터 출력
localStorage에 저장되어
있는 키(key0-값(value)의 쌍으로 이루어진 다수의
데이터를 검색하는 방법은 for문과 key(), getItem() 메서드를
이용하여 쉽게 구현할 수 있습니다.
메모장으로 “localStorageEx.html” 파일을 연 후 먼저 <body> …</body> 블록 부분의 마지막 부분에 다음과 같이 코드를 한 줄 추가합니다.
<input type="button" value="모든 데이터 보기" onclick="ShowAllData()">
</body>
“모든 데이터 보기” 버튼을 클릭하면 ShowAllData() 함수가 호출되도록 하는 코드입니다. 다음으로 <script>…</script> 블록 부분에 ShowAllData() 함수를 다음과 같이 작성합니다.
function ShowAllData()
{
document.write("키(key) - 값(value)"+"<br />");
for(var i=0; i < localStorage.length; i++){
var keyName = localStorage.key(i);
document.write( keyName + "-" + localStorage.getItem(keyName)+"<br />");
}
}
</script>
다른 이름으로
저장을 선택하여 “localStorageShowAll.html”로 저장한 후 IE9로 연결하여 키(key0-값(value)의
쌍으로 이루어진 여러 개의 데이터쌍을 입력한 후 “모든 데이터 보기”
버튼을 클릭하면 다음과 같이 localStorage에 저장되어 있는 데이터 쌍들을 출력합니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 해당 부분을 그대로를 공개하는
것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을
알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| Box Model을 이용한 게시판 형태 만들기 (0) | 2013.08.08 |
|---|---|
| 2.sessionStorage (0) | 2013.08.08 |
| 6장 Drag and Drop (0) | 2013.08.08 |
| 2. Video (0) | 2013.08.07 |
| 1. Audio (0) | 2013.08.07 |
