집 > 기사 > 웹 프론트엔드 > 클라이언트에 데이터를 저장하는 html5의 여러 예에 대한 자세한 설명

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

1.애플리케이션 캐시

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

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

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

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

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

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

기능은 다음과 같습니다:

웹사이트에는 하나 이상의 IndexedDB 데이터베이스가 있을 수 있으며, 각 데이터베이스에는 고유한 이름이 있어야 합니다.
데이터베이스에는 하나 이상의 개체 저장소가 포함될 수 있습니다. 객체 저장소(이름으로 고유하게 식별됨)는 레코드 모음입니다. 각 레코드에는 키와 값이 있습니다. 값은 하나 이상의 속성을 가질 수 있는 개체입니다. 키는 키 생성기를 기반으로 하거나 키 경로에서 파생되거나 명시적으로 설정될 수 있습니다. 고유한 연속 양수를 자동으로 생성하는 키 생성기입니다. 키 경로는 키 값에 대한 경로를 정의합니다. 단일 JavaScript 식별자일 수도 있고 마침표로 구분된 여러 식별자일 수도 있습니다. (컬럼 데이터베이스의 특성과 다소 유사)
IndexedDB에서는 거의 모든 작업이 command->request->result 방식을 사용합니다. 예를 들어, 레코드를 질의하면 요청이 반환되고, 요청 결과에 질의 결과가 얻어집니다. 또 다른 예는 데이터베이스를 열고, 요청을 반환하고, 요청 결과에서 반환된 데이터베이스 참조를 가져오는 것입니다.
indexedDB를 실행하려면 웹 서버에 배치해야 합니다.

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

성명：