[아꿈사/111105] html5 9장 클라이언트측 데이터로 작업하기

아꿈사 http://cafe.naver.com/architect1

최성기 [email protected]

HTML5 & css3 오늘 구현하는 내일의 웹 표준

9장 : 클라이언트측 데이터로 작업하기

http://cafe.naver.com/architect1

mailto:[email protected]

웹 스토리지, 웹 SQL 데이터베이스, 웹 소켓 같은 몇 가지 기능은

HTML5 명세에서 분리되었습니다.

지오로케이션 같은 기능은 명세에 포함됐던 적도 없었습니다.

3부에서 다루는 내용들은 엄밀히 말하면 HTML5가 아닙니다. 표준 명세 확정 과정과 브라우저들의 경쟁으로 인한 혼띾의 기점. 최싞의 브라우저가 지원하게 될 차세대 기술임은 분명.

한 번이라도 쿠키가 훌륭한 기능이라고

생각했던 적이 있나요? 책 197 페이지 中

9장. 클라이언트 측 데이터로 작업하기.

Tip 20. Local Storage로 사용자 설정 저장하기

Tip 21. 클라이언트 측 관계형 데이터베이스

Tip 22. 오프라인으로 작업하기


• Local Storage

• Session Storage


• Web SQL Database


• Application Cache

Web Storage

각 단락에서 이야기하는 기술들의 이름이 위와 같은데,

Local Storage

Web SQL Database

Application Cache

Web Storage Session Storage

클라이언트 데이터(??)

단어의 의미들이 다 비슷비슷해서 9장 내용을 처음 보고 나면 용어들이 헷갈릴 수 있다. Web SQL Database도 그 자체로는 혼동이 적지만,

Local Storage

Web SQL Database

Application Cache

IndexedDB와 LevelDB가 언급되고 나면 다시 헷갈리기 시작한다. 9장의 내용을 살펴본 후, 기술들의 명칭이 헷갈리지 않도록 잘 정리하자.


클라이언트 데이터(??)

IndexedDB

LevelDB

Local Storage

Web SQL Database

Application Cache

...이렇게 정리되면 만점 입니다.


IndexedDB LevelDB




Local Storage

Web SQL Database

Application Cache


IndexedDB LevelDB




Web Storage - 키 / 값 쌍 쿠키처럼 사용자 로컬 공갂에 데이터를 저장하는 기법이지만 더 방대한 양의 데이터를 다룰 수 있다. (쿠키는 최대 4Kb) localStorage : 브라우저 세션이 끝나도 값이 사라지지 않는다. sessionStorage : 브라우저 세션이 끝나면 값이 사라진다.

http://caniuse.com/#search=web storage

http://caniuse.com/

localStorage 인터페이스.

localStorage.setItem( 키, 값 );

var retVal = localStorage.getItem( 키 );

sessionStorage는 localStorage 객체 대신 sessionStorage 객체 쓰면 됨.

저장된 값은 Chrome의 개발자 도구에서 확인 가능.

값은 도메인 단위로 저장되고, 해당 도메인에 종속된다. 다른 사이트에서 데이터에 접근할 수 없음

예제 : 사용자가 설정한 옵션을 localStorage에 저장하기

http://goo.gl/xllJ3

http://goo.gl/xllJ3

http://goo.gl/xllJ3

http://goo.gl/xllJ3

id=“background_color”

id=“text_color”

id=“text_size”

접근할 컨트롤에 적당한 id를 할당.

http://goo.gl/xllJ3

http://goo.gl/xllJ3

function load_settings() { var bgcolor = localStorage.getItem(“background_color”); var text_color = localStorage.getItem(“text_color”); var text_size = localStorage.getItem(“text_size”); $(“#background_color”).val(bgColor); $(“#text_color”).val(text_color); $(“#text_size”).val(text_size); apply_preferences_to_page(); }

function save_settings() { localStorage.setItem(“background_color”, $(“#background_color”).val()); localStorage.setItem(“text_color”, $(“#text_color”).val()); localStorage.setItem(“text_size”, $(“#text_size”).val()); apply_preferences_to_page(); }

예제 링크 : http://goo.gl/xllJ3

나머지 세세한 코드 설명은 생략. 돌아가는 예제를 보자.

1. 값을 저장하고 개발자 도구에서 실제 저장된 것을 확인. 2. 브라우저 종료 후 다시 접속했을 때 유지됨을 확인.

http://goo.gl/xllJ3

브라우저 지원여부 확인 window 객체의 localStorage 메서드 존재여부를 검사.

if (!window.localStorage) { // 지원하지 않는 브라우저 } else { // 지원하는 브라우저 }

폴백 방안 1. 서버에 보관 : 자바 스크립트를 껐을 때, 4Kb가 넘을 때. 2. 쿠키를 이용 : Quirksdmode 라이브러리 추천.

Local Storage

Web SQL Database

Application Cache


IndexedDB LevelDB




http://dev.w3.org/html5/webdatabase/


책 227 페이지

이 책에서 웹 SQL을 다루는 이유는 다수의 브라우저가 현재 이 명세를 지원하기 때문. IndexedDB 지원 브라우저는 젂혀 없지만 웹 SQL DB는 지금 당장 프로젝트에 쓸 수 있다.

책 210 페이지.

발표자료 작성 시점 기준(11-10-30) 브라우저별 지원 상황

unofficial 인 듯.

Web SQL Database 클라이언트 사이드에 테이블 형식 데이터를 저장하기 위한 기법. 데이터에 접근하고 다루기 위해 sqlite DB 스타일 쿼리를 허용한다. 데이터의 CRUD(Create,Read,Update,Delete)가 가능.

웹 SQL은 SQLite 데이터베이스에 기초한 것이며, 이러한 점은 명세의 독립성에 영향을 끼칠 수 있습니다. 또한 MS에서 indexedDB에 관심을 보이고 있으므로, IE에서 웹 SQL을 지원할 가능성도 매우 낮습니다.

IndexedDB 클라이언트 사이드에 키/값 쌍 데이터를 저장하기 위한 기법. 데이터에 접근하고 다루기 위해 색인된 DB(IndexedDB) 스타일 쿼리를 이용한다. WebSimpleDB API라고도 부름.

잠시 예젂에 공부했던 내용을 복습해 보아요 ~

http://www.slideshare.net/ohyecloudy/leveldb

http://www.slideshare.net/ohyecloudy/leveldb

짜식이 날로 먹고 있어..

-_-+

예제 : 내용을 클라이언트에 저장하는 노트 애플리케이션

http://beyondhtml5andcss3.com/code/html5sql/



<ul id=“notes”>

id=“title”

id=“note”

id=“new_button” id=“save_button”

id=“delete_button”


DB 연결(or 생성)

db = window.openDatabase( db이름, 버전, 설명, 사이즈, 콜백 );

db.transaction( function (tx) { // tx 객체에 트랜잭션의 SQL문을 추가. } );

트랜잭션 실행

SQL문 실행

tx.executeSql( SQL문, 인자 배열, 성공콜백, 실패콜백 );

책에 소개된 수준의 설명임. 자세한 인터페이스는 W3C 표준문서 참고.



테이블 생성 – 한 개의 SQL문이 포함된 트랜잭션을 실행.

db.trnsaction( function (tx) { tx.executeSql( “CREATE TABLE notes \ (id INTEGER PRIMARY KEY, title TEXT, note TEXT)”, [], function () { alert( “노트 테이블이 잘 만들어졌습니다!” ); }, function (tx, error) { alert( error.message ); } ); });

SQL문

인자

성공

실패

나머지는 그냥 SQL문만 보겠습니다.

작업 명령어

새 노트 만들기 INSERT INTO notes (title, notes) VALUES( “Test”, “This is a note” );

모든 노트 보기 SELECT id, title, note FROM notes;

특정 노트 보기 SELECT id, title, note FROM notes WHERE id = 1;

노트 수정하기 UPDATE notes SET title = “…”, note = “…” WHERE id = 1;

노트 삭제하기 DELETE FROM notes WHERE id = 1;

참고. 생성된 DB를 지우려면 : 파일 생성 위치에 가서 삭제.

http://www.martinsikora.com/how-to-delete-web-sql-database-in-google-chrome




















폴백 방안 – 딱히 대안이 없습니다! (-_-;)..

1. ‘구글 크롬을 사용하세요’라고 제안한다.

2. 크롬 프레임 플러그인을 사용한다.

http://code.google.com/intl/ko-KR/chrome/chromeframe/




Local Storage

Web SQL Database

Application Cache


IndexedDB LevelDB




http://caniuse.com/#search=cache

Offline Web Applications cache manifest 파일을 이용해 캐싱할 리소스를 지정하여 오프라인일 때도 페이지를 방문했을 때와 동일하게 동작하도록 하는 기능.

http://caniuse.com/

매니페스트로 캐시 정의하기

매니페스트 파일 : 애플리케이션이 오프라인으로 동작하기 위해 브라우저 캐시에 들어있어야 하는 파일의 목록을 적어주는 파일.

브라우저는 1. 매니페스트 파일에 적힌 파일 리스트들과 2. 매니페스트 파일 자체

..를 캐싱한다.

CACHE MANIFEST # v = 1.0.0 /style.css /javascripts/notes.js /javascripts/jquery.min.js

이 문자열로 파일이 시작해야 함.

‘#’로 시작하면 주석처리.

캐싱할 파일 리스트

매니페스트 파일을 html 문서에 연결

<html manifest=“notes.manifest”> … </html>

캐싱된 파일들은 크롬 개발자 도구에서 확인할 수 있다.

웹서버가 매니페스트 파일을 인식하도록 MIME 타입 설정

아파치 서버인 경우, .htaccess 파일에 타입 추가

AddType text/cache-manifest .manifest

기타 책에 언급되지 않은 .manifest 작성 규칙

1. UTF-8 인코딩 2. 줄바꿈 코드 – ‘\n\r’, ‘\n’, ‘\r’ 3. 상대 경로를 이용할 때는 manifest를 기준으로 URL 표시 4. 모든 메인 페이지와 같은 도메인에 소속 되어야 함

• JQuery를 사용하는 경우, 외부 호스팅 경로를 쓰지 말고 자체 서버에 사본을 유지해야 캐싱할 수 있다.

출처 : HTML5 & API 입문 - 프리렉

Local Storage

Web SQL Database

Application Cache

PT 내용은 끝입니다. 용어가 혼동되지 않도록 주의합시다.


IndexedDB LevelDB




Documents

[아꿈사/111105] html5 9장 클라이언트측 데이터로 작업하기