html5의 두 가지 저장 방법은 무엇입니까-프런트엔드 Q&A-php.cn

html5의 두 가지 저장 방법은 무엇입니까

青灯夜游

풀어 주다： 2022-01-23 17:36:24

원래의

2349명이 탐색했습니다.

HTML5의 두 가지 저장 방법은 다음과 같습니다. 1. 애플리케이션 캐시(애플리케이션 캐시), 웹 애플리케이션은 캐시할 수 있으며 네트워크 없이도 사용할 수 있습니다. 2. 클라이언트에서 사용할 수 있는 로컬 스토리지(localStorage 또는 sessionStorage) 데이터를 저장합니다.

html5의 두 가지 저장 방법은 무엇입니까

이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.

1.애플리케이션 캐시

HTML5에는 애플리케이션 캐시가 도입되었습니다. 즉, 웹 애플리케이션을 캐시할 수 있으며 네트워크 없이도 사용할 수 있습니다.

애플리케이션 캐시에는 세 가지 기능이 있습니다

오프라인 검색
캐시된 리소스가 더 빠르게 로드됩니다.
서버 로드를 줄이면 브라우저는 서버에서 업데이트되거나 변경된 리소스만 다운로드합니다.

사용 방법 매니페스트 속성만 추가하면 됩니다. html 태그에서

매니페스트가 지정된 모든 페이지는 사용자가 액세스할 때 캐시됩니다. 매니페스트 속성이 지정되지 않으면 페이지가 캐시되지 않습니다(매니페스트 파일에 직접 지정되지 않는 한).

매니페스트 파일의 권장 파일 확장자는 ".appcache"입니다.

<!DOCTYPE HTML>
<html manifest="demo.appcache">

<body>
The content of the document......
</body>

</html>

로그인 후 복사

매니페스트 파일은 캐시된 항목과 캐시되지 않은 항목을 브라우저에 알려주는 간단한 텍스트 파일입니다.

매니페스트 파일은 세 부분으로 나눌 수 있습니다:

CACHE MANIFEST - 이 제목 아래에 나열된 파일은 첫 번째 다운로드 후 캐시됩니다.
NETWORK - 이 제목 아래에 나열된 파일은 서버에 연결해야 하며 캐시되지 않습니다.
FALLBACK - 이 제목 아래 나열된 파일은 페이지에 액세스할 수 없는 경우(예: 404 페이지) 대체 페이지를 지정합니다.

완전한 매니페스트 파일

CACHE MANIFEST  
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html5/ /404.html

로그인 후 복사

2 로컬 저장소

HTML5는 두 가지 새로운 저장 방법을 제공합니다. 클라이언트 측 데이터:

localStorage - 시간 제한 없는 데이터 저장
sessionStorage - 세션용 데이터 저장

이전에는 이러한 작업이 모두 쿠키에 의해 수행되었습니다. 그러나 쿠키는 요청이 있을 때마다 서버에 전달되므로 쿠키가 느리고 비효율적이므로 대량의 데이터를 저장하는 데 적합하지 않습니다.

localStorage와 sessionStorage는 모두 setItem(), getItem(), RemoveItem() 등의 작업 메소드가 동일합니다.
localStorage와 sessionStorage의 메소드:

setItem이 값을 저장합니다
사용법: 키 필드에 값을 저장합니다
사용법:.setItem(key, value)
코드 예:

sessionStorage.setItem("key", "value");
localStorage.setItem("site", "js8.in");

로그인 후 복사

getItem 값 가져오기
사용법: 지정된 키의 로컬에 저장된 값 가져오기
사용법: .getItem(key)
코드 예:

var value = sessionStorage.getItem("key"); 
var site = localStorage.getItem("site");

로그인 후 복사

removeItem 삭제 키
목적: 지정된 키를 삭제합니다. 로컬에 저장된 값
사용법: .removeItem(key)
코드 예:

sessionStorage.removeItem("key"); 
localStorage.removeItem("site");

로그인 후 복사

clear 모든 키/값 지우기
사용법: 모든 키/값 지우기
사용법: .clear()

sessionStorage는 영구 저장소가 아니며 브라우저를 닫으면 지워집니다. LocalStorage는 데이터가 적극적으로 삭제되지 않는 한 영구 로컬 저장소에 사용됩니다.

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

위 내용은 html5의 두 가지 저장 방법은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!