indexeddb는 클라이언트 저장소에 많은 수의 구조화 된 데이터 (파일/ 블롭 포함)를 저장하는 낮은 레벨 API입니다. API는 인덱스를 사용하여 데이터에 대한 고성능 검색을 달성합니다.
최근에는 데이터를 오프라인으로 저장할 수있는 비즈니스 요구가 있으며 네트워크 신호가있을 때 양식 및 사진을 업로드 할 수 있습니다. 그래서 HTML5의 IndexedDB를 연구했습니다.
특정 필드의 저장 만 요구 사항을 위해서는 로컬 스토리지 및 세션 스토리지를 사용하여 완료 할 수 있습니다. 그러나 많은 양의 데이터가 저장되면 로컬 스토리지 및 세션 스토리지는 요구 사항을 충족하지 못합니다. 현재 IndexedDB의 강도가 반영됩니다.
1. 데이터베이스를 생성하거나 엽니 다/* 다른 브라우저의 indexeddb*/const indexeddb = indexeddb || 버전); // 데이터베이스 이름, 버전 : 데이터베이스 버전 번호
IndexedDB는 다른 브라우저에서 호환되므로 IndexedDB와 호환되는 기능의 일부가 필요합니다.
2. 데이터베이스에 연결된 콜백 함수 request.adeventListener ( 'success', function (event) {// 데이터베이스 성공}, false). ); request.adeventristener ( 'upgradeneed', function (event) {// 데이터베이스를 업데이트 할 때}, false);데이터베이스에 연결 한 후 요청은 세 가지 상태를 듣습니다.
업그레이드 된 상태는 indexedddb가 새 데이터베이스를 작성하고 indexedb.open (이름, 버전) 버전 (데이터베이스 버전 번호)을 만들 때이 상태를 모니터링하는 것입니다. 버전 번호가 변경되지 않으면이 상태는 트리거되지 않습니다. 데이터베이스의 ObjectStore의 생성 및 삭제는이 모니터링 이벤트에서 수행됩니다.
3. ObjectStore를 만들고 삭제하십시오IndexedDB에서 ObjectStore는 데이터베이스 테이블과 유사합니다.
request.addeventListener ( 'upgradeneed', function (event) {// 데이터베이스 인스턴스 생성 인스턴스를 만듭니다. const db = event.target.result; // 데이터베이스 db.close (); // bkystorenames.contains (ObjectSorename);/ / ObjectStore db.deleteObjectStore (ObjectStorEname);}, false);다음 방법을 사용하여 ObjectStore를 만들 수 있습니다.
request.adeventListener ( 'upgradeneed', function (event) {// 데이터베이스 인스턴스 생성 인스턴스를 만듭니다. const db = event.target.result; // 객체 스토어가 있는지 여부를 결정하십시오. DB .CreateObjectStore (ObjectStorename, {kyypath : kyypath // 객체 스토어로 검색 키워드}); 인덱스는 고유합니다});}}, false); 4. 데이터 추가, 삭제, 변경 점검 request.adeventListener ( 'success', function (event) {// 데이터베이스 인스턴스 생성 인스턴스 const db = event.target.result; // ObjectStore db.transaction (ObjectStorename, WA); // wa는 'readwrite', 데이터를 읽고 쓸 수있는 경우 // 데이터가 'readonly'인 경우 데이터는 const store = transaction.objectStore (ObjectStorename);}, false) 만 읽습니다.데이터베이스 추가, 삭제 및 변경 :
// 데이터 추가. 키워드가 존재하면 데이터가 추가되지 않습니다. ADD (OBJ); 해당 데이터 저장소 (값) 지정된 키워드에 해당합니다 ( 'success', function (event) {// 콜백 함수}, false);인덱스에 따라 데이터를 찾으십시오
const index = store.index (indexname); value // data result.continue ();
인덱스의 범위에 따라 데이터를 찾으십시오
const index = store.index (indexname); cond cursor = index.opencursor (범위);/*** 범위는 지정된 값으로 모든 데이터를 찾으려면 조건* 범위를 충족 할 수있는 해당 데이터를 찾으십시오. Idbkeyrange 객체는 조건*/// 범위보다 크거나 더 큰 조건에 따라 지정된 조건 범위의 지정된 범위의 데이터입니다. ∞),> valuerange = idbkeyrange (value, false), [value, +∞), value // isopen : true, false, 닫힌 간격 범위 = idbkeyrange.upperbound (값, IsoSopen) // 값 1보다 크거나 동일하며 value2idbkeyrange.bound (value1, value2, isopen1, isopen2)보다 작거나 동일합니다.
마지막으로, INDEXEDDB의 라이브러리는 직접 캡슐화됩니다
위는 Xiaobian이 도입 한 HTML5 지역 저장소의 인덱스 edb입니다. VEVB WULIN 웹 사이트를 지원해 주셔서 대단히 감사합니다!