HTML5 오프라인 저장소에는 두 가지 유형이 있습니다. 1. 일반적으로 정적 리소스(정적 페이지)를 캐싱하는 데 사용되는 로컬 저장소(로컬 저장소) 2. 일반적으로 AJAX 요청 캐싱에 사용되는 애플리케이션 캐시(애플리케이션 캐시) 중요한 AJAX 데이터.
이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.
HTML5는 두 가지 주요 오프라인 저장 기술인 로컬 저장소와 응용 프로그램 캐시를 제안합니다. 둘 다 고유한 응용 프로그램 시나리오를 가지고 있으며, 이는 쿠키입니다.
(1) 애플리케이션 캐시: 일반적으로 정적 리소스(정적 페이지)를 캐싱하는 데 사용됩니다.
(2) LocalStorage(로컬 저장소): 일반적으로 중요하지 않은 AJAX 데이터를 저장하기 위해 AJAX 요청 캐싱에 사용됩니다.
그리고 쿠키는 작은 텍스트(4096바이트)만 저장할 수 있으므로 큰 데이터를 저장할 수 없습니다. 이는 쿠키와 위의 캐싱 기술의 차이점 중 하나입니다. 요청은 동일한 서버에서 옵니다. 서버에는 식별 문자열이 필요하며 이 작업은 쿠키에 의해 완료됩니다. 이 텍스트는 사용자의 권한을 확인하기 위해 매번 서버와 브라우저 간에 전달됩니다.
그래서 애플리케이션 캐시의 애플리케이션 시나리오가 다르기 때문에 사용법도 일관되지 않습니다.
HTML5에는 애플리케이션 캐싱 기술이 도입되었습니다. 즉, 네트워크 없이도 웹 애플리케이션을 캐시하고 사용할 수 있습니다. 캐시 매니페스트 파일을 생성하면 오프라인 애플리케이션을 쉽게 생성할 수 있습니다.
응용 프로그램 캐시는 세 가지 장점을 제공합니다.
① 오프라인 탐색
② 페이지 로딩 속도 향상
③ 서버 부담 감소
그리고 모든 주요 브라우저는 응용 프로그램 캐시를 지원하므로 지원하지 않더라도 문제가 되지 않습니다. 프로그램이 어떤 영향을 미치나요? 애플리케이션 캐시 오프라인 저장소의 응용 프로그램은 무엇인가요?
비행기에 있을 때 휴대전화 신호가 약하거나 강의할 때 네트워크가 없을 수 있습니다. 여기서 오프라인 저장소를 사용할 수 있습니다. time
네트워크가 온라인인지 확인하세요
다음과 같이 네트워크 OnLine 속성을 감지합니다.
if (navigator.onLine == true){
alert("正常上网")
}
else{
alert("无法连接网络")
}
오프라인 저장소 사용 방법
브라우저에서는 간단한 설정만 필요합니다. 문서의 태그에 매니페스트 속성을 포함하세요.
file 권장 확장자는 .appcache입니다. 웹 페이지에 캐시된 로컬 파일에 처음 액세스할 때 다음 번에 네트워크가 없으면 서버로 이동하지 않고 이 파일 목록을 가져가세요서버 측서버에 올바르게 구성된 MIME 유형을 추가하세요. 즉, "텍스트/캐시 매니페스트"입니다. 웹 서버에서 구성해야 합니다.현재는 대부분의 웹사이트가 인터랙티브 기능을 갖고 있기 때문에 널리 사용되지 않습니다. 인터랙티브 기능이 없으면 웹사이트는 순수한 디스플레이가 되어 의미가 거의 없습니다.
<html manifest="demo.appcache">
추천 튜토리얼: "
html 비디오 튜토리얼
위 내용은 HTML5 오프라인 저장소란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
