본문 바로가기
컴퓨터과학[4-2]/HTML5_출석

HTML5 - API (offline web application, File, Web storagy)

by boolean 2017. 8. 25.
728x90

HTML5 - API (offline web application, File, Web storagy)

(1) 오프라인 웹 애플리케이션
오프라인 상태에서도 사용이 가능한 애플리케이션 → 웹에서 사용하는 여러 페이지와 파일을 클라이언트에 캐시로 저장하여 제공
매니페스트 파일
  • 캐시에 저장할 자원의 목록
    • CACHE MANIFEST
    • #Cache Section(클라이언트 캐시에 저장될 파일 지정)
    • CACHE:
    • …파일 목록…
    •  
    • #Network Section(반드시 온라인상에서만 접근하는 파일 지정)
    • NETWORK:
    • …파일 목록…
    •  
    • #Fallback Section(대체되는 리소스를 지정)
    • FALLBACK:
    • …리소스 대체리소스…
웹 서버의 mime.types 파일에 추가할 내용
  • text/cache-manifest manifest
애플리케이션 문서에서의 매니페스트 파일 지정
  • <!DOCTYPE html>
  • <html manifest="매니페스트 파일 이름">
  • ……
  • </html>
(2) applicationCache 객체
메서드 및 속성
메서드 및 속성
메서드/속성 설명
status 애플리케이션 캐시의 현재 상태를 반환
update() 캐시 다운로드 프로세스를 호출
abort() 캐시 다운로드 프로세스를 취소
swapCache() 새 애플리케이션 캐시가 생기면 이 캐시로 전환
status 속성의 값
status 속성의 값
상수 값 설명
UNCACHED 0 캐시하지 않음
IDLE 1 최신 캐시를 이용하고 있는 상태
CHECKING 2 캐시의 업데이트를 체크 중인 상태
DOWNLOADING 3 캐시 업데이트를 다운로드 중인 상태
UPDATEREADY 4 최신 캐시를 이용할 수 있는 상태
OBSOLETE 5 오류로 인하여 캐시가 되지 않은 상태
이벤트
이벤트
이벤트 설명
checking 업데이트 여부를 확인 중
error 오류로 인하여 업데이트 종료
noupdate 매니페스트가 업데이트되지 않음
downloading 업데이트할 것을 찾아서 가져오고 있는 중
progress 매니페스트에 기록된 자원을 다운로드 하려고 할 때
updateready 매니페스트에 기록된 다원이 새롭게 다운로드 되었을 때
cached 자원이 다운로드 되어 캐시에 저장된 상태
obsolete 매니페스트를 가져오는 데 실패하여 캐시가 제거될 때
(3) 파일 API
로컬에 있는 파일의 데이터를 직접 스크립트로 접근할 수 있도록 지원하는 API
  • 사용자가 드래그 앤 드롭한 파일과 input 요소("type=file")에서 선택한 파일에 대해서만 파일 정보 및 파일 내용을 읽을 수 있음
파일 정보 얻기
  • var 변수 = getElementById("아이디").files[0];
  • 파일 정보 관련 속성
    파일 정보 관련 속성
    속성 설명
    name 파일 이름
    type 파일 속성(파일의 MIME 타입)
    size 파일 크기
    lastModifiedDate 파일이 마지막으로 수정된 날짜
파일 내용 읽기
  • FileReader 객체 사용
  • 메서드 및 속성
    메서드 및 속성
    메서드/속성 설명
    readAsArrayBuffer(file) 파일의 내용을 읽어 ArrayBuffer 객체로 변환하여 result 속성에 저장
    readAsText(file, 인코딩) 파일의 내용을 읽어 지정한 인코딩 방식의 문자열로 result 속성에 저장
    readAsDataURL(file) 파일의 내용을 읽어 Data URL 형식의 문자열로 result 속성에 저장
    abort() 파일 읽기를 중단
    result 읽기가 완료되었을 때의 파일 내용을 반환
    error 읽기 도중에 발생하는 오류를 반환
    readyState 객체의 상태 반환(EMPTY, LOADING, DONE)
  • 이벤트 핸들러
    이벤트 핸들러
    이벤트 핸들러 설명
    onloadstart 데이터를 읽기 시작했을 때 발생
    onprogress 데이터를 읽고 있는 도중에 연속으로 발생
    onabort 데이터 읽기가 중단되었을 때 발생
    onerror 데이터 읽기가 실패했을 때 발생
    onload 데이터 읽기를 성공적으로 완료했을 때 발생
    onloadend 데이터 읽기 요구가 완료(성공/실패 무관)되었을 때 발생
  • FileReader 객체의 오류 값
    FileReader 객체의 오류 값
    상수 값 설명
    NOT_FOUND_ERR 1 읽을 파일을 찾지 못할 때
    SECURITY_ERR 2 보안상 안전하지 못하거나, 사용자가 파일을 선택한 후 파일에 변경이 있을 때
    ABORT_ERR 3 읽기가 중지되었을 때
    NOT_READABLE_ERR 4 파일 권한 등으로 인하여 파일에 접근할 수 없을 때
    ENCODING_ERR 5 Data URL 길이가 URL 길이의 상한을 초과할 때
URL 인터페이스
  • 드래그 앤 드롭이나 input 요소에서 가져온 파일에 고유 URL의 생성/삭제를 지원 → 생성된 URL을 img 또는 video 요소의 src 속성에 직접 지정 가능 → 이미지를 보거나 비디오 재생이 가능
  • createObjectURL(), revokeObjectURL()

(4) 웹 스토리지
로컬 스토리지 vs 세션 스토리지
  • 사용 방법은 동일, 의미와 동작의 차이만 존재
    로컬 스토리지 vs 세션 스토리지
    로컬 스토리지 세션 스토리지
    데이터 저장 기간에 대한 제한이 없어 영구적 보관이 가능 데이터의 저장 기간이 한정 → 세션이 종료되면 자동 폐기
    도메인마다 별도의 저장 영역을 생성 → 같은 도메인에 속한 웹 페이지들은 모두 접근 가능 각 세션마다 별도의 저장 영역을 생성 → 같은 도메인이라고 해도 다른 윈도우에서 생성되면 서로의 스토리지에 접근 불가
웹 스토리지 관련 메서드 및 속성
웹 스토리지 관련 메서드 및 속성
메서드/속성 설명
length 저장되어 있는 데이터의 개수 반환
key(index) 인덱스를 이용하여 키를 가져옴
getItem(key) 키에 대응하는 값을 가져옴
setItem(key, value) 키와 값을 지정하여 스토리지에 저장
removeItem(key) 키에 대응하는 값을 삭제
clear() 저장되어 있는 전체 데이터 삭제
데이터 저장, 읽기, 삭제
데이터 저장, 읽기, 삭제
저장 localStorage.setItem(key, value);
localStorage.key = value;
localStorage[key] = value;
읽기 변수 = localStorage.getItem(key);
변수 = localStorage.key;
변수 = localStorage[key];
삭제 localStorage.removeItem(key);
delete localStorage.key;
delete localStorage[key];
  • 세션 스토리지의 경우에는 localStorage 대신에 sessionStorage 키워드 사용
스토리지 이벤트
  • 웹 스토리지 변경에 대해서 window 객체가 storage 이벤트를 발생시킴
  • 속성 → key, oldValue, newValue, url, storageArea
저작자표시 비영리 변경금지

'컴퓨터과학[4-2] > HTML5_출석' 카테고리의 다른 글

HTML5 - 핵심 정리 및 기출문제  (0) 2017.12.09
HTML5 - Web Worker, Web Socket, Geolocation  (0) 2017.08.25
HTML5 - [13] audio 요소와 video 요소  (0) 2017.08.24
HTML5 - [12]이동,회전, 확대/축소, 텍스트, 애니메이션  (0) 2017.08.18
HTML5 - [11] Canvas arc(원) arcTo(원호) 베지에곡선  (0) 2017.08.18

관련글

댓글

티스토리툴바