H5 이전에 저장은 주로 쿠키와 함께 사용되었습니다. 쿠키의 단점은 요청 헤드의 데이터와 함께 있으며 크기는 4K 이내입니다. 주 영역 오염.
주요 응용 프로그램 : 쇼핑 카트, 고객 로그인
IE 브라우저의 경우 userData가 있으며 크기는 64K이며 IE 브라우저에서만 지원됩니다.
목표수동으로 삭제되지 않는 한 키 가치 방식으로 저장하십시오.
크기:각 도메인 이름 5m
지원 상황 :참고 : IE9 LocalStorage는 로컬 파일을 지원하지 않습니다.
탐지 방법 :if (if (wind일반적인 API :
getitem // 레코드를 가져옵니다
setititen // 설정 레코드
RemoveItem // 레코드를 제거합니다
키 // 키에 해당하는 값을 가져옵니다
CLEAR // 레코드를 클리어
스토리지 컨텐츠 :배열, 그림, JSON, 스타일, 스크립트. 본질 본질 (문자열 내용으로 직렬화 될 수있는 한 저장 될 수 있습니다)
2. 로컬 스토리지 세션 스터리지HTML5의 로컬 스토리지 API의 LocalStorage는 SessionStorage와 동일합니다.
3. 오프라인 캐시 (응용 프로그램 캐시)로컬 캐시 애플리케이션에 필요한 파일
사용 방법 :manifest manifest 파일을 구성합니다
페이지:
<doctype html> <html manifest = demo.appcache> ... </html>매니페스트 파일 :
매니페스트 파일은 브라우저에 캐시 컨텐츠 (및 캐시가 아닌 컨텐츠)를 알려주는 간단한 텍스트 파일입니다.
매니페스트 파일은 세 부분으로 나눌 수 있습니다.
① 캐시 매니페스트 -이 제목에 나열된 파일은 첫 번째 다운로드 후 캐시입니다.
② 네트워크 -이 제목 아래에 나열된 파일은 캐시되지 않고 서버에 연결해야합니다.
③ 폴백 -이 제목에 나열된 파일은 페이지에 액세스 할 수 없을 때 퇴각 페이지 (예 : 404 페이지)
전체 데모 :캐시 매니페스트# 2016-07-24 v1.0.0/temeply.css/main.jsnetwork : login.jsp fallback : /html//offline.html서버에서 : 매니페스트 파일은 올바른 마임 유형, 즉 Text/Cache-Manifest를 구성해야합니다.
Tomcat과 같은 :
<Mime-Mapping> <Extension> Manifest </extension> <mime-type> Text/Cache-Manifest </mime-type> </mime-mapping >>일반적인 API :
코어는 ApplicationCache 객체입니다.
0 (삭제되지 않은) : 캐시 없음, 즉 페이지와 관련된 응용 프로그램 캐시가 없습니다.
1 (유휴) : 유휴, 즉 응용 프로그램 캐시가 업데이트되지 않습니다.
2 (확인) : 확인 중에 설명 파일을 다운로드하고 업데이트 확인 중입니다.
3 (다운로드) : 다운로드에서 응용 프로그램 캐시는 설명 파일에 지정된 리소스를 다운로드합니다.
4 (updateReady) : 업데이트 된 모든 리소스가 다운로드되었습니다
5 (유휴) : 포기, 즉 응용 프로그램 캐시의 설명 파일이 더 이상 존재하지 않으므로 페이지가 응용 프로그램 캐시에 액세스 할 수 없습니다.
관련 이벤트 :캐시 상태 적용의 적용의 변경 사항을 나타냅니다.
확인 : 브라우저가 응용 프로그램 캐시를 검색 할 때 트리거되었습니다.
오류 : 자원을 확인하거나 다운로드하는 동안 오류를 보낼 때 트리거
noupdate : 설명 파일을 확인할 때 트리거되었고 파일이 변경되지 않았다는 것을 발견했습니다.
다운로드 : 캐시 리소스의 응용 프로그램을 다운로드 할 때 트리거되었습니다
Progress : 파일 다운로드 응용 프로그램 캐시에서 지속적으로 트리거되었습니다.
UpdaterEady : 페이지 트리거에서 새로운 응용 프로그램 캐시 다운로드
캐시 : 애플리케이션 캐시가 완료되면 트리거합니다
응용 프로그램 캐시의 세 가지 장점 :① 오프라인 브라우지
page 페이지의 안면 소득 속도를 높입니다
server 서버 압력을 줄입니다
메모:
1. 캐시 데이터의 브라우저의 용량 제한은 동일하지 않을 수 있습니다 (일부 브라우저에서 설정 한 제한 사항은 사이트 당 5MB입니다).
2. Manifest 파일 또는 내부에 나열된 파일을 정상적으로 다운로드 할 수없는 경우 전체 업데이트 프로세스는 실패로 간주되며 브라우저는 이전 캐시를 계속 사용합니다.
3. Manifest의 HTML은 동일한 영역에서 Manifest 파일과 동일해야합니다.
4. 브라우저는 Manifest 파일의 HTML 파일을 자동으로 캐시하여 HTML 컨텐츠가 변경되면 업데이트 버전이 업데이트됩니다.
5. 매니페스트 파일의 캐시는 숨겨진 상태 인 경우 네트워크와 관련이 없습니다
6. 폴백의 리소스는 매니페스트 파일과 동일해야합니다.
7. 버전을 업데이트 한 후 새 버전을 시작하려면 한 번 새로 고쳐야합니다 (페이지의 상황은 한 번 브러시 됨). 이벤트의 모니터링 버전을 추가해야합니다.
8. 사이트의 다른 페이지가 설정되지 않더라도 캐시의 캐시에서 요청 리소스에 액세스 할 수 있습니다.
9. 매니페스트 파일이 변경되면 리소스 요청 자체도 업데이트를 트리거합니다.
오프라인 캐시와 기존 브라우저 캐시의 차이점 :1. 오프라인 캐시는 전체 애플리케이션 용이며 브라우저 캐시는 단일 파일입니다.
2. 오프라인 캐시 차단이있는 경우 페이지를 열 수 있습니다.
3. 오프라인 캐시는 브라우저에 리소스를 업데이트하도록 적극적으로 알릴 수 있습니다.
4. 와브 SQL관계형 데이터베이스, SQL 문을 통한 액세스
Web SQL 데이터베이스 API는 HTML5 사양의 일부가 아니지만 SQL을 사용하여 클라이언트 데이터베이스를 작동하는 API 세트를 도입하는 독립적 인 사양입니다.
지원 상황 :Web SQL 데이터베이스는 최신 버전의 Safari, Chrome 및 Opera Browser에서 작동 할 수 있습니다.
핵심 방법 : pendatabase : 이 메소드는 기존 데이터베이스 또는 새 데이터베이스를 사용하여 데이터베이스 개체를 만듭니다. transaction : 이 방법을 사용하면이 상황에 따라 트랜잭션을 제어하고 제출 또는 롤백을 수행 할 수 있습니다. ③ executesQL : 이 메소드는 실제 SQL 쿼리를 수행하는 데 사용됩니다. 데이터베이스 열기 :var db = opendatabase ( 'mydb', '1.0', 'test db', 2 * 1024 * 1024, fn); // opendatabase () 方法对应的五个参数分别为 ： 数据库名称、版本号、描述文本、 데이터베이스 크기, 생성 콜백쿼리 작동 실행 :
var db = opendatabase ( 'mydb', '1.0', 'test db', 2 * 1024 * 1024);데이터 삽입 :
var db = opendatabase ( 'mydb', '1.0', 'test db', 2 * 1024 * 1024); 1, winty) '); tx.executesql ('win (id, name) value (2, luckywinty);}); 데이터 읽기 : db.transaction (function (tx) {tx.executesql ( 'select * from win', [], function (tx, results) {var len = results.rows.lows, msg = <p> 쿼리 레코드 번호 : +Len +</p> 문서. }}, null);});이러한 작업에서 기본적으로 SQL 문을 사용하여 데이터베이스 관련 작업을 수행하는 경우 사용하기가 더 쉬워집니다.
5. INDEXEDDB인덱스 데이터베이스 (indexedb) API (HTML5의 일부)는 풍부한 데이터 집약적 인 스토리지 데이터가있는 오프라인 HTML5 웹 응용 프로그램을 작성하는 데 유용합니다. 동시에 로컬 캐시 데이터도 도움이되므로 기존 온라인 웹 애플리케이션 (예 : 모바일 웹 응용 프로그램)이 더 빨리 실행되고 응답 할 수 있습니다.
비동기 API :IndexEddb의 대부분의 작업은 일반적으로 사용되는 호출 방법이 아니며 결과의 결과를 반환하지만 데이터베이스 작업 열기와 같은 요청-응답 모드입니다.
이런 식으로 데이터베이스를 열었을 때 실제로 DB 객체를 반환 했으며이 객체는 결과에있었습니다. 결과를 제외하고 위의 그림에서 볼 수 있습니다. 몇 가지 중요한 속성은 OnError, OnSuccess, OnupgradEneed입니다 (데이터베이스의 버전 번호를 요청할 때 기존 데이터베이스 버전 번호는 일관성이 없습니다). 이것은 Ajax 요청과 유사합니다. 이 요청을 시작한 후에는 언제 성공했는지 판단 할 수 없었으므로 콜백에서 일부 논리를 처리해야합니다.
끄고 삭제 : 함수 closedb (db) {db.close ();} 함수 deletedb (name) {indexeddb.deletedatabase (name);} 데이터 저장 :indexeddb에는 개념이 없지만 Database는 여러 유형의 데이터를 저장할 수있는 유연한 데이터 구조입니다. 다시 말해, ObjectStore는 테이블과 동일하며, 여기에 저장된 각 데이터 조각과 관련이 있습니다.
각 레코드의 지정된 필드를 키 값 (키패트)으로 사용하거나 자동 생성 숫자를 키 값 (keygenrator)으로 사용할 수 있습니다. 다양한 유형의 선택 키, ObjectStore가 저장할 수있는 데이터 구조도 저장할 수 있습니다.
위는이 기사의 모든 내용입니다.