HTML5 Intermediate 3일

* Web Cache: Offline에서도 Web App을 사용할 수 있도록 데이터를 저장하는 기능

--> Client Storage로 가능해졌음.

* localStorage의 값 navigation: localStorage.lengh, localStorage.key(index) 이용.

* localStorage의 변경 이벤트

- window.addEventListener('storage', onChanged);

- function onChanged(event) { ... }

- event의 속성 중 key, oldValue, newValue, url(변경한 URL) 이용

* localStorage 데이터 저장 위치: Chrome Windows의 경우

- C:\Users\icore\AppData\Local\Google\Chrome\User Data\Profile 1\Local Storage

- 버전 및 사용자에 따라 조금 달라지.

* Custom Attribute:

- XXX.setAttribute('data-id', value) 와 같이 지정

- 단, 'data-'로 시작하여야 함.

- 설정: setAttribute(key, value)

- 값 가져오기: getAttribute(key), XXX['data-YYY']와 같이 사용할 수 없음.

- 제거: removeAttribute(key)

* 태그의 형태 구분: 다음 참조.

var notesClickHandler = function(event) {

/* 자식 노드 중 li 태그만 처리하고자 할 경우 아래와 같이 함.

* event.target : 실제 이벤트를 발생시킨 객체

* contructor 속성이 객체를 생성하기 위한 모든 정보를 가지고 있음.

*/

if(event.target.constructor === document.createElement('li').constructor) {

loadNote(event.target.getAttribute('data-id'));

}

};

* Indexed DB

var req = window.indexedDB.open('simpleDB', 1); /* (이름, 버전) */

/* 세 개의 이벤트 핸들러 */

req.addEventListener('success'); /* 정상적으로 오픈한 경우 */

req.addEventListener('upgradeneeded'); /* 생성하려는 DB가 없는 경우 발생. */

req.addEventListener('error'); /* 오픈 시 오류가 발생한 경우 */