HTML5 오프라인 저장소란 무엇입니까?
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7522
15
1378
52
81
11
54
19
21
72
HTML의 테이블 테두리
Sep 04, 2024 pm 04:49 PM
HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.
HTML 여백-왼쪽
Sep 04, 2024 pm 04:48 PM
HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.
HTML의 중첩 테이블
Sep 04, 2024 pm 04:49 PM
HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.
HTML 테이블 레이아웃
Sep 04, 2024 pm 04:54 PM
HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.
HTML 입력 자리 표시자
Sep 04, 2024 pm 04:54 PM
HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.
HTML 정렬 목록
Sep 04, 2024 pm 04:43 PM
HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.
HTML에서 텍스트 이동
Sep 04, 2024 pm 04:45 PM
HTML에서 텍스트 이동 안내. 여기서는 Marquee 태그가 구문과 함께 작동하는 방식과 구현할 예제에 대해 소개합니다.
HTML 온클릭 버튼
Sep 04, 2024 pm 04:49 PM
HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.
