이 기사는 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 ( 세션 저장)
쿠키의 단점
크기 제한 - 표준 브라우저에서 단일 쿠키의 크기는 4kb입니다.
성능 소모 - 현재 도메인의 모든 http 요청은 이러한 쿠키 데이터를 전달합니다.
HTML5 로컬 저장소는 각 웹사이트에 할당된 공간[5MB]
LocalStorage와 SessionStorage의 차이점
전자는 수동으로 지울 때까지 로컬에 저장됩니다.
후자는 현재 페이지에 유지됩니다. 수명주기에 따라 페이지가 닫히면 저장된 데이터도 사라집니다.
관련 글 추천:
링크 태그 링크 CSS와 @import 로딩의 차이점은 무엇인가요?
하위에서 상위 창 값 전송을 구현하기 위한 Html5의 postmessage 코드
위 내용은 HTML5 애플리케이션: 오프라인 애플리케이션 및 저장된 애플리케이션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!