简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
집 > 웹 프론트엔드 > H5 튜토리얼 > 본문

HTML5 오프라인 저장소란 무엇입니까?

青灯夜游
풀어 주다： 2021-12-01 14:29:46
원래의
5653명이 탐색했습니다.

HTML5 오프라인 저장소에는 두 가지 유형이 있습니다. 1. 일반적으로 정적 리소스(정적 페이지)를 캐싱하는 데 사용되는 로컬 저장소(로컬 저장소) 2. 일반적으로 AJAX 요청 캐싱에 사용되는 애플리케이션 캐시(애플리케이션 캐시) 중요한 AJAX 데이터.

HTML5 오프라인 저장소란 무엇입니까?

이 튜토리얼의 운영 환경: 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 유형을 추가하세요. 즉, "텍스트/캐시 매니페스트"입니다. 웹 서버에서 구성해야 합니다.

현재는 대부분의 웹사이트가 인터랙티브 기능을 갖고 있기 때문에 널리 사용되지 않습니다. 인터랙티브 기능이 없으면 웹사이트는 순수한 디스플레이가 되어 의미가 거의 없습니다.

브라우저 측에서 .appcache 파일 목록을 사용하는 방법에 대한 자세한 설명

<html manifest="demo.appcache">
로그인 후 복사
네트워크 연결이 끊긴 후의 데모 사진:

추천 튜토리얼: "html 비디오 튜토리얼

"

위 내용은 HTML5 오프라인 저장소란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
html5 오프라인 저장
원천：php.cn
이전 기사：HTML5의 새로운 기능 다음 기사：html5 편집기란 무엇입니까?
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Javascript를 사용하여 HTML5의 필수 속성을 설정하는 방법은 무엇입니까? Javascript에서 필요에 따라 텍스트 입력 상자를 표시하려고 합니다. <inputid="edName"type="text&qu...
에서 2023-10-13 08:52:25
0
2
317
정확한 마우스 좌표를 얻지 못하는 문제: 페이지 크기를 조정할 때 HTML5 캔버스 사용 저는 프론트엔드 전문가로부터 이 픽셀 효과를 만들고 싶습니다. 전체 화면 캔버스에서 전체 픽셀 효과를 얻을 수 있지만: constcanvas=getElementB...
에서 2023-09-12 12:20:33
0
1
280
Base64로 인코딩된 HTML5 비디오 M3U8 HTML5의 비디오 태그에 base64로 인코딩된 M3U8 파일을 추가하고 싶은데 어떻게 해야 하나요?<!DOCTYPEhtml><htmllang=...
에서 2023-09-09 23:07:18
0
1
247
vue.js/bootstrap: onclick 이벤트 메소드가 호출되지 않았습니다. 오류 "변수를 찾을 수 없음: updateDocument" 저는 프런트 엔드 개발이 처음이지만 HTML5, CSS 및 Javascript에 대한 기본적인 이해가 있습니다. vue.js 프로젝트를 만들고 bootstrap과...
에서 2023-09-09 20:06:48
0
1
362
XHTML의 이미지 태그에서 닫는 슬래시 '/'를 제거합니다. 이미지를 저장하는 문자열 txt1이 있습니다. 해당 값은 XHTML 형식입니다. 즉, 요소가 닫혀 있습니다. 하지만 닫는 슬래시를 제거해야 HTML5와 같을 수 ...
에서 2023-09-06 12:15:38
0
1
240
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트：공공복지 온라인 PHP 교육，PHP 학습자의 빠른 성장을 도와주세요！