웹표준/Offline & storage (4) 썸네일형 리스트형 4. File API HTML5의 DOM으로 추가된 File API를 사용해서 웹 컨텐츠가 사용자에게 로컬 파일을 선택한 후 파일의 컨텐츠를 읽도록 요청가능. 태그나 드래긍 앤 드랍으로도 사용 선택한 파일에 접근 하나의 파일만 선택한 경우, 리스트의 첫 번째 파일만 고려하면됨 const selectedFile = document.getElementById('input').files[0]; change 이벤트를 통해 FileList에 접근할수있다. 단, 아래와같이 EventTarget.addEventListner()를 사용해야한다. const inputElement = document.getElementById("input"); inputElement.addEventListener("change", handleFiles, fa.. 3. WHATWG 클라이언트 측 세션 및 영구 저장소 Web Storage API는 서버가 아닌 클라이언트 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능이다. 이는 key/value 쌍을 저장할 수 있는 브라우저. 쿠키보다 직관적인 매커니즘을 제공하며 4KB밖에 이용못하는 쿠키에 반해 5MB까지 이용가능하다. Web Storage의 두가지 메커니즘 - 세션 스토리지 (sessionStorage) : 페이지 세션이 유지되는 동안 사용할 수 있는 별도의 저장공간을 유지 (브라우저가 열려있는한에서 데이터를 유지) window.sessionStorage속성을 통해 사용 - 로컬 스토리지 (localStorage) : 브라우저가 닫히고 다시 열려도 데이터를 유지 window.localStorage속성을 통해 사용 2. 온라인/오프라인 이벤트 - navigator.onLine : true(온라인), false(오프라인) 값을 보관하는 속성 사용자가 해당 메뉴항목을 '오프라인 모드'로 전환할때마다 갱신된다 "online" "offline" 이벤트 이 두가지 이벤트는 브라우저가 온라인과 오프라인 모드를 전환할 때 마다 각 페이지의 에서 발생함. document.body -> document로 전달되고 window에서 종료됨. 두가지 모두 취소가 불가능한 이벤트임. 아래와 같이 몇 가지 방법으로 해당 이벤트에 대한 리스너를 등록 할 수있다. window, document, document.body에서 addEventListner를 사용. JS의 Function에서 document나 document.body에 .ononline, .onoffline .. 1. 애플리케이션 캐시 웹기반의 애플리케이션들이 오프라인에서도 실행되도록 해주는 매커니즘. 캐시된 애플리케이션은 사용자가 오프라인 상태에서 새로고침을 클릭할 때 올바르게 불러와 작동하며 다음과같은 장점이 있다. 오프라인 브라우징 : 오프라인에서의 사이트 탐색 속도 : 로컬에 리소르를 캐싱하여 로딩속도를 향상 서버 부하 감소 : 브라우저는 서버에서 변경된 리소스만 다운받음 애플리케이션 캐시 활성화 ... 태그에 manifest속성을 추가하여 애플리케이션 캐시를 활성화한다. 이전 1 다음