Download presentation
Presentation is loading. Please wait.
1
Chapter11 웹 스토리지 & 웹 데이터베이스
HTML5 Programming
2
Contents Chapter11 1. 웹 스토리지 2. 웹 데이터베이스 웹 스토리지 & 웹 데이터베이스
3
웹 스토리지 쿠키 클라이언트에 간단한 정보를 저장하기 위해 사용 상당히 간단하고 편리함 단점
Chapter11 쿠키 클라이언트에 간단한 정보를 저장하기 위해 사용 상당히 간단하고 편리함 단점 데이터 저장 용량이 4kb 밖에 되지 않음 유효기간에 제한이 있으며 여러 가지 보안 문제 있음 웹 스토리지 & 웹 데이터베이스
4
웹 스토리지 웹 스토리지 클라이언트에 간단한 정보를 저장하기 위한 저장 영역
Chapter11 웹 스토리지 클라이언트에 간단한 정보를 저장하기 위한 저장 영역 역할은 쿠키와 비슷하지만 크기에 제한이 없으며 유효기간도 존재하지 않음 저장되는 데이터는 키와 값으로 구성되어 있음 브라우저 지원 현황 웹 스토리지 & 웹 데이터베이스
5
로컬 스토리지 로컬 스토리지 데이터 저장 시간에 제한이 없어 사용자가 지우지 않는 한 영구적으로 보관
Chapter11 로컬 스토리지 데이터 저장 시간에 제한이 없어 사용자가 지우지 않는 한 영구적으로 보관 도메인마다 저장 영역이 따로 생성되며 도메인마다 생성된 로컬 스토리지에 서로 접근할 수 없음 같은 도메인에 속해 있는 웹 페이지들은 모두 접근이 가능 관련 메서드 및 속성 웹 스토리지 & 웹 데이터베이스
6
로컬 스토리지 Chapter11 데이터 저장 스토리지에 키와 값을 저장하기 위해서는 setItem() 메서드를 사용해야 하지만 키를 통하여 직접 값을 저장할 수도 있음 웹 스토리지 & 웹 데이터베이스
7
로컬 스토리지 로컬 스토리지 로컬 스토리지에 값을 저장한 후 구글 개발자 도구를 사용하여 저장된 값을 확인 Chapter11
웹 스토리지 & 웹 데이터베이스
8
로컬 스토리지 Chapter11 데이터 읽기 저장되어 있는 값을 읽기 위해서는 getItem() 메서드를 사용. 스토리지에 값을 저장할 때와 같이 굳이 메서드를 사용하지 않고 키에 직접 접근하여 값을 가져올 수도 있음 웹 스토리지 & 웹 데이터베이스
9
로컬 스토리지 Chapter11 로컬 스토리지 웹 스토리지 & 웹 데이터베이스
10
로컬 스토리지 Chapter11 값 삭제 저장되어 있는 값을 삭제하기 위해서는 removeItem() 메서드를 사용. 저장 값을 삭제하는 방법도 역시 직접 키에 접근하여 삭제가 가능 웹 스토리지 & 웹 데이터베이스
11
프로그램 11-1 Chapter11 01: <<!DOCTYPE html> 02: <html>
03: <head> 04: <meta charset="utf-8" /> 05: <title> 웹 스토리지 </title> 06: <script type="text/javascript"> 07: function setData() 08: { 09: var key = document.getElementById("key"); 10: var data = document.getElementById("data"); 11: 12: localStorage.setItem(key.value, data.value); 13: alert("데이터 저장이 완료되었습니다."); 14: } 15: 16: function getData() 17: { 18: var key = document.getElementById("key"); 19: var data = localStorage.getItem(key.value); 20: alert("조회한 데이터 값은 " + data + "입니다."); 21: } 22: 23: function removeData() 24: { 25: localStorage.clear(); 26: alert("모든 데이터를 삭제하였습니다."); 27: } 웹 스토리지 & 웹 데이터베이스
12
프로그램 11-1 Chapter11 29: function viewData() 30: {
30: { 31: var data = document.getElementById("result"); 32: data.value = ""; 33: for(var i = 0; i < localStorage.length; i++) 34: { 35: var key = localStorage.key(i); 36: data.value += localStorage[key] + ","; 37: } 38: } 39: </script> 40: </head> 41: <body> 42: 키 : <input type="text" id="key"><br> 43: 값 : <input type="text" id="data"><br><br> 44: <input type="button" onclick="setData()" value="저장"> 45: <input type="button" onclick="getData()" value="조회"> 46: <input type="button" onclick="removeData()" value="모두 삭제"> 47: <hr> 48: <input type="button" onclick="viewData()" value="모두 보기"><br> 49: <textarea id="result" cols="30" rows="5"></textarea> 50: </body> 51: </html> 웹 스토리지 & 웹 데이터베이스
13
프로그램 11-1 Chapter11 웹 스토리지 & 웹 데이터베이스
14
세션 스토리지 세션 스토리지 로컬 스토리지와 마찬가지로 도메인마다 따로 생성
Chapter11 세션 스토리지 로컬 스토리지와 마찬가지로 도메인마다 따로 생성 로컬스토리지와는 다르게 데이터의 저장 기간이 한정되어 있음. 즉 저장한 데이터를 영구적으로 보관하지 않고 세션이 종료되면 자동 폐기 각 세션마다 따로 스토리지가 생성되므로 같은 도메인이라고 해도 다른 윈도우에서 생성이 되면서로의 스토리지에 접근이 불가능 함 웹 스토리지 & 웹 데이터베이스
15
세션 스토리지 Chapter11 세션 스토리지 웹 스토리지 & 웹 데이터베이스
16
세션 스토리지 Chapter11 세션 스토리지 웹 스토리지 & 웹 데이터베이스
17
웹 데이터베이스 데이터베이스(Database)
Chapter11 데이터베이스(Database) 데이터를 조직적으로 통합하여 구조화시켜놓은 데이터의 집합체 데이터베이스 관리 시스템(DBMS : Database Management System) 데이터베이스를 생성하고, 검색하며, 추가, 삭제를 원활히 하기 위한 프로그램의 집합 가장 일반적인 것이 관계형 DBMS 웹 스토리지 & 웹 데이터베이스
18
웹 데이터베이스 웹 데이터베이스 추가적인 시스템 없이 데이터베이스를 생성하고 사용할 수 있음
Chapter11 웹 데이터베이스 추가적인 시스템 없이 데이터베이스를 생성하고 사용할 수 있음 데이터베이스의 질의어인 SQL의 사용이 가능 브라우저 지원 현황 관련 메서드 및 속성 웹 스토리지 & 웹 데이터베이스
19
웹 데이터베이스 생성 및 접근 웹 데이터베이스 생성 및 접근
Chapter11 웹 데이터베이스 생성 및 접근 웹 데이터베이스를 생성하기 위해서는 openDatabase() 메서드를 사용 웹 스토리지 & 웹 데이터베이스
20
웹 데이터베이스 생성 및 접근 Chapter11 웹 데이터베이스 생성 및 접근 웹 스토리지 & 웹 데이터베이스
21
웹 데이터베이스 생성 및 접근 웹 데이터베이스 생성 및 접근
Chapter11 웹 데이터베이스 생성 및 접근 데이터베이스 접근을 위해서는 트랜잭션을 시작해야 하는데 트랜잭션 시작을 위해서는 transaction() 메서드를 사용 웹 스토리지 & 웹 데이터베이스
22
웹 데이터베이스 생성 및 접근 Chapter11 웹 데이터베이스 생성 및 접근 웹 스토리지 & 웹 데이터베이스
23
SQL 실행 및 처리 Chapter11 SQL 질의어 SQL(Structured Query Language)은 데이터베이스를 정의하고 조작하기 위한 질의어(Query Language) 초기에는 관계형 DBMS에서만 사용되었으나 지금은 특정한 데이터베이스 시스템에 한정되지 않고 다른 데이터베이스에서도 널리 사용 웹 스토리지 & 웹 데이터베이스
24
SQL 실행 및 처리 CREATE 문 SELECT 문 테이블을 생성할 때 사용하는 구문
Chapter11 CREATE 문 테이블을 생성할 때 사용하는 구문 SELECT 문 테이블에서 레코드를 검색할 때 사용하는 구문 웹 스토리지 & 웹 데이터베이스
25
SQL 실행 및 처리 INSERT 문 UPDATE 문 테이블에서 레코드를 검색할 때 사용하는 구문
Chapter11 INSERT 문 테이블에서 레코드를 검색할 때 사용하는 구문 UPDATE 문 테이블에서 레코드를 수정할 때 사용하는 구문 웹 스토리지 & 웹 데이터베이스
26
SQL 실행 및 처리 DELETE 문 테이블에서 레코드를 삭제할 때 사용하는 구문 Chapter11
웹 스토리지 & 웹 데이터베이스
27
SQL 실행 및 처리 SQL 실행 및 처리 SQL 문을 사용한 명령어를 처리하기 위해서는 executeSql() 메서드를 사용
Chapter11 SQL 실행 및 처리 SQL 문을 사용한 명령어를 처리하기 위해서는 executeSql() 메서드를 사용 웹 스토리지 & 웹 데이터베이스
28
SQL 실행 및 처리 Chapter11 SQL 실행 및 처리 웹 스토리지 & 웹 데이터베이스
29
SQL 실행 및 처리 Chapter11 SQL 실행 및 처리 executeSql() 메서드를 사용하여 데이터베이스에 어떠한 작업을 처리하였을 경우 세 번째 인수로 지정한 콜백 함수가 호출됨 콜백 함수에서 두 번째 인수는 실행 결과인 SQLResultSet 형의 객체를 반환 관련된 속성 웹 스토리지 & 웹 데이터베이스
30
SQL 실행 및 처리 Chapter11 SQL 실행 및 처리 웹 스토리지 & 웹 데이터베이스
31
프로그램 11-2 Chapter11 01: <!DOCTYPE html> 02: <html>
03: <head> 04: <meta charset="utf-8" /> 05: <title> 웹 데이터베이스 </title> 06: <script type="text/JavaScript"> 07: var db; 08: window.onload = function() 09: { 10: db = openDatabase("movie", "1.0", "movie database", 1024*1024); 11: db.transaction(exeCreate); 12: } 13: 14: function exeCreate(tx) 15: { 16: tx.executeSql("create table movie(name, actor)"); 17: } 18: 19: function insertData() 20: { 21: db.transaction(exeInsert); 22: } 23: 24: function exeInsert(tx) 25: { 26: tx.executeSql("insert into movie values(?,?)", [movie.value, actor.value]); 27: } 웹 스토리지 & 웹 데이터베이스
32
프로그램 11-2 Chapter11 29: function viewData() 30: {
30: { 31: db.transaction(exeSelect); 32: } 33: 34: function exeSelect(tx) 35: { 36: tx.executeSql("select * from movie", [], viewTabe); 37: } 38: 39: function viewTabe(tx, rs) 40: { 41: for(var i = 0; i < rs.rows.length; i++) 42: { 43: var row = rs.rows.item(i); 44: document.getElementById("table").innerHTML += "<tr><td>" + row["name"] + "</td><td>" + row["actor"] + "</td></tr>"; 45: } 46: } 47: </script> 48: </head> 49: <body> 50: movie: <input type="text" id="movie"><br> 51: actor: <input type="text" id="actor"><br> 52: <input type="button" onclick="insertData()" value="저장"> 53: <input type="button" onclick="viewData()" value="조회"><br> 54: <hr> 55: <table id="table"></table> 56: </body> 57: </html> 웹 스토리지 & 웹 데이터베이스
33
프로그램 11-2 Chapter11 웹 스토리지 & 웹 데이터베이스
Similar presentations
