클라이언트에 데이터를 저장하는 html5의 여러 예에 대한 자세한 설명

1.애플리케이션 캐시

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

응용 프로그램 캐시에는 세 가지 기능이 있습니다

• 오프라인 검색

• 캐시된 리소스가 더 빠르게 로드됩니다.

• 서버 로드를 줄이면 브라우저는 서버에서 업데이트되거나 변경된 리소스만 다운로드합니다.

방법 사용 방법은 html 태그에 매니페스트 속성을 추가하는 것입니다

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

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

nbsp;HTML>


   The content of the document......

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

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

• CACHE 매니페스트 - 이 제목 아래에 나열된 파일은 첫 번째 다운로드 후 캐시됩니다.

• 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 .localStorage 및 sessionStorage

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");

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

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

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

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

3.indexDB

indexDB는 경량 NOSQL 데이터베이스입니다. 인덱싱, 트랜잭션 처리, 강력한 쿼리 기능 등을 포함하여 웹 SQL(sqlite)보다 효율적입니다.

기능은 다음과 같습니다:

• 웹사이트에는 하나 이상의 IndexedDB 데이터베이스가 있을 수 있으며, 각 데이터베이스에는 고유한 이름이 있어야 합니다.

• 데이터베이스에는 하나 이상의 개체 저장소가 포함될 수 있습니다. 객체 저장소(이름으로 고유하게 식별됨)는 레코드 모음입니다. 각 레코드에는 키와 값이 있습니다. 값은 하나 이상의 속성을 가질 수 있는 개체입니다. 키는 키 생성기를 기반으로 하거나 키 경로에서 파생되거나 명시적으로 설정될 수 있습니다. 고유한 연속 양수를 자동으로 생성하는 키 생성기입니다. 키 경로는 키 값에 대한 경로를 정의합니다. 단일 JavaScript 식별자일 수도 있고 마침표로 구분된 여러 식별자일 수도 있습니다. (컬럼 데이터베이스의 특성과 다소 유사)

• IndexedDB에서는 거의 모든 작업이 command->request->result 방식을 사용합니다. 예를 들어, 레코드를 질의하면 요청이 반환되고, 요청 결과에 질의 결과가 얻어집니다. 또 다른 예는 데이터베이스를 열고, 요청을 반환하고, 요청 결과에서 반환된 데이터베이스 참조를 가져오는 것입니다.

• indexedDB를 실행하려면 웹 서버에 배치해야 합니다.

위 내용은 클라이언트에 데이터를 저장하는 html5의 여러 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!