집 > 기사 > 웹 프론트엔드 > HTML5 애플리케이션: 오프라인 애플리케이션 및 저장된 애플리케이션

HTML5 애플리케이션: 오프라인 애플리케이션 및 저장된 애플리케이션

이 기사는 HTML5 애플리케이션에 대한 내용을 제공합니다: 오프라인 애플리케이션 및 저장 애플리케이션. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 오프라인 애플리케이션

오프라인 애플리케이션은 사용자가 네트워크 없이 웹 애플리케이션을 사용할 수 있도록 설계된 HTML 5의 새로운 기능입니다.
[오프라인 리소스 캐시], [온라인 상태 모니터링], [로컬 데이터 저장소]를 포함한 HTML 5 오프라인 기능.

오프라인 리소스 캐싱 - 브라우저 메커니즘을 통해 온라인 리소스가 로컬로 캐시됩니다. 사용자가 오프라인으로 애플리케이션에 액세스하면 이러한 리소스 파일이 로컬 영역에서 자동으로 로드되어 사용자가 애플리케이션을 정상적으로 사용할 수 있습니다.
온라인 상태 모니터링 - 일부 애플리케이션은 일부 데이터를 위해 서버와 상호 작용해야 합니다. 애플리케이션 개발자는 브라우저가 온라인 상태 모니터링을 제공하는지 알아야 합니다. (window.online = function(){})
로컬 데이터 저장소 - 애플리케이션이 오프라인일 때 프로그램은 온라인일 때 서버와 동기화될 수 있도록 사용자 생성 데이터를 로컬에 저장해야 합니다. 이를 위해 HTML 5는 다양한 로컬 저장 메커니즘을 제공합니다.

일반 웹 애플리케이션과 비교하여 오프라인 웹 애플리케이션에는 [캐시해야 함] 및 [캐시하지 않음] 리소스를 나열하는 추가 설명 파일이 있습니다. 파일 확장자는 [.appcache]이고 설명 파일의 MIME 유형은 "text/cache-manifest"입니다.

offline.appcache 파일의 코드는 다음과 같습니다

CACHE MANIFEST
#cache 之后的资源都会被缓存
CACHE:
main.html
style.css
main.js
#network 之后的资源不会被缓存，总是从线上获取
NETWORK:
account/

애플리케이션을 오프라인으로 전환하는 경우 .html 파일을 매니페스트 설명 파일과 연결하기만 하면 됩니다

<html manifest="./offline.appcache"></html>

2.LocalStorage(로컬 저장소) 및 SessionStorage ( 세션 저장)

쿠키의 단점

HTML5 로컬 저장소는 각 웹사이트에 할당된 공간[5MB]

LocalStorage와 SessionStorage의 차이점
전자는 수동으로 지울 때까지 로컬에 저장됩니다.
후자는 현재 페이지에 유지됩니다. 수명주기에 따라 페이지가 닫히면 저장된 데이터도 사라집니다.

관련 기사