HTML5 오프라인 저장소란 무엇입니까?
- 青灯夜游원래의
- 2021-12-01 14:29:465868검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!