html5의 두 가지 저장 방법은 무엇입니까
- 青灯夜游원래의
- 2022-01-23 17:36:242326검색
HTML5의 두 가지 저장 방법은 다음과 같습니다. 1. 애플리케이션 캐시(애플리케이션 캐시), 웹 애플리케이션은 캐시할 수 있으며 네트워크 없이도 사용할 수 있습니다. 2. 클라이언트에서 사용할 수 있는 로컬 스토리지(localStorage 또는 sessionStorage) 데이터를 저장합니다.
이 튜토리얼의 운영 환경: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!