HTML5의 두 가지 저장 방법은 다음과 같습니다. 1. 애플리케이션 캐시(애플리케이션 캐시), 웹 애플리케이션은 캐시할 수 있으며 네트워크 없이도 사용할 수 있습니다. 2. 클라이언트에서 사용할 수 있는 로컬 스토리지(localStorage 또는 sessionStorage) 데이터를 저장합니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5 버전, Dell G3 컴퓨터.
HTML5에는 애플리케이션 캐시가 도입되었습니다. 즉, 웹 애플리케이션을 캐시할 수 있으며 네트워크 없이도 사용할 수 있습니다.
애플리케이션 캐시에는 세 가지 기능이 있습니다
매니페스트가 지정된 모든 페이지는 사용자가 액세스할 때 캐시됩니다. 매니페스트 속성이 지정되지 않으면 페이지가 캐시되지 않습니다(매니페스트 파일에 직접 지정되지 않는 한).
매니페스트 파일의 권장 파일 확장자는 ".appcache"입니다.
<!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The content of the document...... </body> </html>
매니페스트 파일은 캐시된 항목과 캐시되지 않은 항목을 브라우저에 알려주는 간단한 텍스트 파일입니다.
매니페스트 파일은 세 부분으로 나눌 수 있습니다:
완전한 매니페스트 파일
CACHE MANIFEST # 2012-02-21 v1.0.0 /theme.css /logo.gif /main.js NETWORK: login.asp FALLBACK: /html5/ /404.html
HTML5는 두 가지 새로운 저장 방법을 제공합니다. 클라이언트 측 데이터:
이전에는 이러한 작업이 모두 쿠키에 의해 수행되었습니다. 그러나 쿠키는 요청이 있을 때마다 서버에 전달되므로 쿠키가 느리고 비효율적이므로 대량의 데이터를 저장하는 데 적합하지 않습니다.
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
