HTML5 에서 데이터를 저장했다가 사용하도록 하는 방법이 여러가지가 있습니다.
외부 서버에 접속해서 DB에 있는 데이터를 가져와서 처리하는게 아니라 그냥 Client side에서 데이터를 관리할 수 있도록 제공하는 기능을 말합니다.
이전에는 (정확히는 지금까지 지만..) 쿠키와 세션을 많이 사용했습니다.
이 방법은 client 쪽에 쿠키라는 작은 정보를 넣고 이 쿠키에 접근해서 그 정보를 사용하는 겁니다. 이 경우 쿠키에 접근할 때마다 서버와의 communication이 일어나는데요 Web Storage는 그런 서버와의 커뮤니케이션이 일어나지 않아서 서버의 부담을 줄일 수 있습니다.
Web Storage는 Key와 Value 의 구조로 돼 있습니다.
이 Web Storage는 싸이트 단위로 관리되는 Local Storage와 Browsing Context로 관리되는 Session Storage가 있습니다. 둘 다 똑 같은데요. 그냥 세션 스토리지는 기간의 제한이 있다는 것만 다릅니다.
local Storage는 한 싸이트에 대해 다른 창(탭)을 띄워도 정보가 계속 유지 되는 거구요. Session Storage는 한 창에서만 정보가 유지 되는 겁니다.
뭐 골치아픈 이론은 넘어가고 곧바로 페이지 만드는 것 부터 할께요.
오늘 만들 화면은 왼쪽에 Key 입력하는 textbox와 value 입력하는 text area 그리고 정보를 저장하기 위한 save 버튼을 만들겠습니다.
그리고 오른쪽에는 save 버튼을 누르면 key 와 value 가 표시 되도록 할 거구요.
일단 HTML 로 기본 틀을 잡아 보죠.
<!doctype html>
<html lang="en">
<head>
<title> Dougy's HTML5 Web Storage API</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="webstoragedoug01.css">
<script src="webstoragedoug02.js"></script>
</head>
<body>
<section id="leftbox">
<form>
<p>(key) One: <input type="text" id="one"></p>
<p>(value) Two <textarea id="two"></textarea></p>
<p><input type="button" id="button" value="Save"</p>
</form>
</section>
<section id="rightbox">
Nothing Yet Now!
</section>
</body>
</html>
<input type="text"> 태그와 <textarea> 태그는 기본 html 문법입니다. 따로 설명은 안 할께요. 혹시 이거 모르시는 분은 html 공부부터 시작하시는게 좋을 겁니다.
leftbox,rightbox 라는 id를 갖는 두개의 section을 만들었습니다.
leftbox에는 input, textarea,button 태그들이 있구요. rightbox에는 그냥 글자만 있습니다.
여기까지 하면 이런 화면이 나옵니다.
이제 webstoragedoug01.css 를 작성해서 화면을 꾸며 보겠습니다.
#leftbox{
float:left;
padding:20px;
border:3px solid red;
}
#rightbox{
float:left;
width:250px;
margin-left:20px;
padding:20px;
border:3px solid blue;
}
float를 주어서 왼쪽에서 오른쪽으로 section 을 배치하도록 했습니다.
이제 왼쪽 오른쪽 box들이 제대로 표시되고 있습니다.
그럼 이제 동적인 효과를 위해서 JavaScript를 작성하겠습니다.
function doFirst(){
var button = document.getElementById("button");
button.addEventListener("click",saveData,false);
}
function saveData(){
var one = document.getElementById("one").value;
var two = document.getElementById("two").value;
sessionStorage.setItem(one,two);
display(one);
}
function display(one){
var rightbox = document.getElementById("rightbox");
var two = sessionStorage.getItem(one);
rightbox.innerHTML = "Name : " + one + "<br/> Value : " + two;
}
window.addEventListener("load",doFirst,false);
분석해 볼까요?
1. 우선 맨 밑에 리스너부터 실행이 될 겁니다.
페이지가 load 될 때 doFirst 함수가 Call 됩니다.
2. doFirst() 함수에는 button이라는 지역변소에 html 내의 id가 button인 요소를 대입합니다.
그리고 이 버튼에 리스너를 다는데요. click 이벤트가 발생하면 saveData()함수를 실행합니다. 그러니까 화면에서 save버튼을 누르면 saveData()가 call 되서 실행 될 겁니다.
3. saveData()에는 one,two 두 지역 변수를 만들어서 각각 html 내에 id가 one,two 인 애들의 value 를 이 변수에 집어 넣습니다. 둘 다 input box와 textarea 안에 있는 글자들(values)이 대입 될 겁니다.
그 다음에 바로 오늘 배울 세션 스토리지가 나오네요.
4. sessionStorage.setItem(one,two)의 의미는 one을 key값으로 하고 two를 value 값으로 하는 세션스토리지를 만든다는 의미입니다. one이 key 값이라고 하는 것은 값이 중복되지 않는다는 말입니다. unique 한 key인거죠.
이러면 간단하게 세션스토리지에 원하는 값들을 저장하는 겁니다.
그리고 나서 display함수를 call 하는데요. parameter 로 one 즉 key 값을 던져 줍니다.
5. display() 함수에서는 one을 인자로 받아서 사용할 겁니다.
우선 rightbox라는 지역변수를 만들어서 거기에 html에서 id가 rightbox인 요소를 대입합니다.
6. 다음이 오늘 배우는 세션스토리지 관련한 내용인데요.
saveData()함수에서 set 한 세션스토리지를 불러와서 사용하는 방법입니다.
sessionStorage.getItem(one); 하면 key값이 one인 value를 불러오는 겁니다. 이 값을 two 에 대입합니다.
그리고 나서 HTML 코드를 만들어서 Name에 one을 Value에 two 를 표시하도록 합니다.
이러면 왼쪽에 글을 입력하고 save를 누르면 오른쪽에 그 내용이 표시 됩니다.
그런데 세션스토리지는 해당 정보를 브라우저에 저장해 둔다고 했습니다.
제가 animal2, Cat 치기 전에 animal1, Dog를 쳤었거든요.
근데 그 정보를 볼 수가 없네요.
이 코드는 세션스토리지를 충분히 잘 활용하기 위한 코드는 못 됩니다. 제대로 활용하기 위해서 자바스크립트를 많이 바꾸겠습니다.
function doFirst(){
var button = document.getElementById("button");
button.addEventListener("click",saveData,false);
display();
}
function saveData(){
var one = document.getElementById("one").value;
var two = document.getElementById("two").value;
sessionStorage.setItem(one,two);
display();
document.getElementById('one').value="";
document.getElementById('two').value="";
}
function display(){
var rightbox = document.getElementById("rightbox");
rightbox.innerHTML = "";
for(var x=0; x<sessionStorage.length;x++){
var a = sessionStorage.key(x);
var b = sessionStorage.getItem(a);
rightbox.innerHTML += a+" - "+b+"<br/>";
}
}
window.addEventListener("load",doFirst,false);
display()함수가 많이 바뀌었죠?
먼저 보면 일단 one이라는 인수를 받지 않습니다.
rightbox는 이전이랑 똑 같구요. 다음줄에서 rightbox를 빈 공간으로 만들어 버립니다.
그 다음에 session Storage에 저장 되 있는 내용들을 표시할 건데요.
for문을 sessionStorage에 저장돼 있는 갯수만큼 돌립니다.
sessionStorage.length가 세션스토리지에 저장된 데이터의 수 입니다.
a에 key값을 넣고 b에 이 키값에 대한 value 값을 집어 넣은 다음 HTML 코드를 넣어 표시합니다.
이러면 해당 창에서 이전에 넣었던 데이터들도 모두 표시 될 겁니다.
심지어는 Naver 나 Google로 가서 다른 싸이트 막 써핑하다가 다시 돌아와도 계속 그 값을 남아있을 겁니다.
이렇게 다른 싸이트 나갔다가 돌아오는 경우를 대비해서 doFirst()함수 마지막에 display(); 함수 Call 하는 부분을 추가합니다.
그리고 Html에서 값을 넣고 save버튼을 누르면 그 값이 오른쪽에 표시되고 input box나 Text Area는 새로운 값을 입력 받기 위해 빈칸으로 만들어 주면 좋겠죠?
그래서 saveData() 함수에 display(); 하고 난 후 one,two 의 value 를 빈칸으로 합니다.
자 이제 세션 스토리지에 나와 있는 내용들이 다 나옵니다.
제가 우리나라 역대 10명의 대통령과 그 말로를 Key, Value로 짝 지었습니다.
이제 naver나 내 블로그나 다른 싸이트를 돌아 다니다가 와도 저 정보는 그대로 있을 겁니다.
하지만 다른 탭을 열거나 다른 브라우저를 띄워서 접속하면 이 정보는 남아있지 않습니다. 이게 바로 세션스토리지 입니다.
만약에 이 데이터들을 로컬 스토리지로 set 하고 사용했다면 새로운 탭으로 열어도 이 정보는 계속 남아 있을 겁니다.
세션스토리지에서 특정 데이터를 지울 수도 있습니다.
그럴 경우는 sessionStorage.removeItem("name");을 하시면 됩니다.
그리고 모든 데이터를 지우려면 sessionStorage.clear(); 하시면 되구요.
재미삼아 우리나라 역대 대통령을 가지고 예를 들었는데요.
총 10명의 역대 대통령이 있군요 우리나라에.(현 대통령까지 포함해서)
외국으로 도망간 대통령에 쿠테타로 쫒겨난 두명의 대통령, 총 맞아 죽은 대통령, 퇴임 후 대통령에서 졸지에 반란 수괴로 법원 판결을 받은 두명의 대통령, 퇴임후 살아있는 대통령, 퇴임후 노환으로 별세한 대통령, 그리고 퇴임 후 자살한 대통령까지...
내용들은 별로 재미있지 않네요. 현 대통령께선 퇴임 후 어떻게 될까요?
제가 컴퓨터 프로그래밍 일을 한지 10년이 넘었는데요. 전공이 정치학이었거든요. 좀 정치에 관심이 많아요.
프로그래머는 열심히 프로그래밍 하고, 학생은 열심히 공부하고, 근로자는 열심히 일 하고 국민은 열심히 정치해야 합니다. :)
외부 서버에 접속해서 DB에 있는 데이터를 가져와서 처리하는게 아니라 그냥 Client side에서 데이터를 관리할 수 있도록 제공하는 기능을 말합니다.
이전에는 (정확히는 지금까지 지만..) 쿠키와 세션을 많이 사용했습니다.
이 방법은 client 쪽에 쿠키라는 작은 정보를 넣고 이 쿠키에 접근해서 그 정보를 사용하는 겁니다. 이 경우 쿠키에 접근할 때마다 서버와의 communication이 일어나는데요 Web Storage는 그런 서버와의 커뮤니케이션이 일어나지 않아서 서버의 부담을 줄일 수 있습니다.
Web Storage는 Key와 Value 의 구조로 돼 있습니다.
이 Web Storage는 싸이트 단위로 관리되는 Local Storage와 Browsing Context로 관리되는 Session Storage가 있습니다. 둘 다 똑 같은데요. 그냥 세션 스토리지는 기간의 제한이 있다는 것만 다릅니다.
local Storage는 한 싸이트에 대해 다른 창(탭)을 띄워도 정보가 계속 유지 되는 거구요. Session Storage는 한 창에서만 정보가 유지 되는 겁니다.
뭐 골치아픈 이론은 넘어가고 곧바로 페이지 만드는 것 부터 할께요.
오늘 만들 화면은 왼쪽에 Key 입력하는 textbox와 value 입력하는 text area 그리고 정보를 저장하기 위한 save 버튼을 만들겠습니다.
그리고 오른쪽에는 save 버튼을 누르면 key 와 value 가 표시 되도록 할 거구요.
일단 HTML 로 기본 틀을 잡아 보죠.
<!doctype html>
<html lang="en">
<head>
<title> Dougy's HTML5 Web Storage API</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="webstoragedoug01.css">
<script src="webstoragedoug02.js"></script>
</head>
<body>
<section id="leftbox">
<form>
<p>(key) One: <input type="text" id="one"></p>
<p>(value) Two <textarea id="two"></textarea></p>
<p><input type="button" id="button" value="Save"</p>
</form>
</section>
<section id="rightbox">
Nothing Yet Now!
</section>
</body>
</html>
<input type="text"> 태그와 <textarea> 태그는 기본 html 문법입니다. 따로 설명은 안 할께요. 혹시 이거 모르시는 분은 html 공부부터 시작하시는게 좋을 겁니다.
leftbox,rightbox 라는 id를 갖는 두개의 section을 만들었습니다.
leftbox에는 input, textarea,button 태그들이 있구요. rightbox에는 그냥 글자만 있습니다.
이제 webstoragedoug01.css 를 작성해서 화면을 꾸며 보겠습니다.
#leftbox{
float:left;
padding:20px;
border:3px solid red;
}
#rightbox{
float:left;
width:250px;
margin-left:20px;
padding:20px;
border:3px solid blue;
}
float를 주어서 왼쪽에서 오른쪽으로 section 을 배치하도록 했습니다.
그럼 이제 동적인 효과를 위해서 JavaScript를 작성하겠습니다.
function doFirst(){
var button = document.getElementById("button");
button.addEventListener("click",saveData,false);
}
function saveData(){
var one = document.getElementById("one").value;
var two = document.getElementById("two").value;
sessionStorage.setItem(one,two);
display(one);
}
function display(one){
var rightbox = document.getElementById("rightbox");
var two = sessionStorage.getItem(one);
rightbox.innerHTML = "Name : " + one + "<br/> Value : " + two;
}
window.addEventListener("load",doFirst,false);
분석해 볼까요?
1. 우선 맨 밑에 리스너부터 실행이 될 겁니다.
페이지가 load 될 때 doFirst 함수가 Call 됩니다.
2. doFirst() 함수에는 button이라는 지역변소에 html 내의 id가 button인 요소를 대입합니다.
그리고 이 버튼에 리스너를 다는데요. click 이벤트가 발생하면 saveData()함수를 실행합니다. 그러니까 화면에서 save버튼을 누르면 saveData()가 call 되서 실행 될 겁니다.
3. saveData()에는 one,two 두 지역 변수를 만들어서 각각 html 내에 id가 one,two 인 애들의 value 를 이 변수에 집어 넣습니다. 둘 다 input box와 textarea 안에 있는 글자들(values)이 대입 될 겁니다.
그 다음에 바로 오늘 배울 세션 스토리지가 나오네요.
4. sessionStorage.setItem(one,two)의 의미는 one을 key값으로 하고 two를 value 값으로 하는 세션스토리지를 만든다는 의미입니다. one이 key 값이라고 하는 것은 값이 중복되지 않는다는 말입니다. unique 한 key인거죠.
이러면 간단하게 세션스토리지에 원하는 값들을 저장하는 겁니다.
그리고 나서 display함수를 call 하는데요. parameter 로 one 즉 key 값을 던져 줍니다.
5. display() 함수에서는 one을 인자로 받아서 사용할 겁니다.
우선 rightbox라는 지역변수를 만들어서 거기에 html에서 id가 rightbox인 요소를 대입합니다.
6. 다음이 오늘 배우는 세션스토리지 관련한 내용인데요.
saveData()함수에서 set 한 세션스토리지를 불러와서 사용하는 방법입니다.
sessionStorage.getItem(one); 하면 key값이 one인 value를 불러오는 겁니다. 이 값을 two 에 대입합니다.
그리고 나서 HTML 코드를 만들어서 Name에 one을 Value에 two 를 표시하도록 합니다.
이러면 왼쪽에 글을 입력하고 save를 누르면 오른쪽에 그 내용이 표시 됩니다.
그런데 세션스토리지는 해당 정보를 브라우저에 저장해 둔다고 했습니다.
제가 animal2, Cat 치기 전에 animal1, Dog를 쳤었거든요.
근데 그 정보를 볼 수가 없네요.
이 코드는 세션스토리지를 충분히 잘 활용하기 위한 코드는 못 됩니다. 제대로 활용하기 위해서 자바스크립트를 많이 바꾸겠습니다.
function doFirst(){
var button = document.getElementById("button");
button.addEventListener("click",saveData,false);
display();
}
function saveData(){
var one = document.getElementById("one").value;
var two = document.getElementById("two").value;
sessionStorage.setItem(one,two);
display();
document.getElementById('one').value="";
document.getElementById('two').value="";
}
function display(){
var rightbox = document.getElementById("rightbox");
rightbox.innerHTML = "";
for(var x=0; x<sessionStorage.length;x++){
var a = sessionStorage.key(x);
var b = sessionStorage.getItem(a);
rightbox.innerHTML += a+" - "+b+"<br/>";
}
}
window.addEventListener("load",doFirst,false);
display()함수가 많이 바뀌었죠?
먼저 보면 일단 one이라는 인수를 받지 않습니다.
rightbox는 이전이랑 똑 같구요. 다음줄에서 rightbox를 빈 공간으로 만들어 버립니다.
그 다음에 session Storage에 저장 되 있는 내용들을 표시할 건데요.
for문을 sessionStorage에 저장돼 있는 갯수만큼 돌립니다.
sessionStorage.length가 세션스토리지에 저장된 데이터의 수 입니다.
a에 key값을 넣고 b에 이 키값에 대한 value 값을 집어 넣은 다음 HTML 코드를 넣어 표시합니다.
이러면 해당 창에서 이전에 넣었던 데이터들도 모두 표시 될 겁니다.
심지어는 Naver 나 Google로 가서 다른 싸이트 막 써핑하다가 다시 돌아와도 계속 그 값을 남아있을 겁니다.
이렇게 다른 싸이트 나갔다가 돌아오는 경우를 대비해서 doFirst()함수 마지막에 display(); 함수 Call 하는 부분을 추가합니다.
그리고 Html에서 값을 넣고 save버튼을 누르면 그 값이 오른쪽에 표시되고 input box나 Text Area는 새로운 값을 입력 받기 위해 빈칸으로 만들어 주면 좋겠죠?
그래서 saveData() 함수에 display(); 하고 난 후 one,two 의 value 를 빈칸으로 합니다.
자 이제 세션 스토리지에 나와 있는 내용들이 다 나옵니다.
제가 우리나라 역대 10명의 대통령과 그 말로를 Key, Value로 짝 지었습니다.
이제 naver나 내 블로그나 다른 싸이트를 돌아 다니다가 와도 저 정보는 그대로 있을 겁니다.
하지만 다른 탭을 열거나 다른 브라우저를 띄워서 접속하면 이 정보는 남아있지 않습니다. 이게 바로 세션스토리지 입니다.
만약에 이 데이터들을 로컬 스토리지로 set 하고 사용했다면 새로운 탭으로 열어도 이 정보는 계속 남아 있을 겁니다.
세션스토리지에서 특정 데이터를 지울 수도 있습니다.
그럴 경우는 sessionStorage.removeItem("name");을 하시면 됩니다.
그리고 모든 데이터를 지우려면 sessionStorage.clear(); 하시면 되구요.
재미삼아 우리나라 역대 대통령을 가지고 예를 들었는데요.
총 10명의 역대 대통령이 있군요 우리나라에.(현 대통령까지 포함해서)
외국으로 도망간 대통령에 쿠테타로 쫒겨난 두명의 대통령, 총 맞아 죽은 대통령, 퇴임 후 대통령에서 졸지에 반란 수괴로 법원 판결을 받은 두명의 대통령, 퇴임후 살아있는 대통령, 퇴임후 노환으로 별세한 대통령, 그리고 퇴임 후 자살한 대통령까지...
내용들은 별로 재미있지 않네요. 현 대통령께선 퇴임 후 어떻게 될까요?
제가 컴퓨터 프로그래밍 일을 한지 10년이 넘었는데요. 전공이 정치학이었거든요. 좀 정치에 관심이 많아요.
프로그래머는 열심히 프로그래밍 하고, 학생은 열심히 공부하고, 근로자는 열심히 일 하고 국민은 열심히 정치해야 합니다. :)
HTML5 Form 공부하기 -1-
HTML5 드래그 앤 드롭 하기 Drag and Drop
