이번에는 H5의 로컬 스토리지인 IndexedDB를 소개합니다. H5의 IndexedDB 로컬 스토리지 사용 시 주의사항은 무엇인가요?
IndexedDB는 대량의 구조화된 데이터(파일/BLOB 포함)를 클라이언트 측에 저장하기 위한 하위 수준 API입니다. API는 인덱스를 사용하여 이 데이터에 대한 고성능 검색을 가능하게 합니다.
최근 비즈니스 요구 사항이 있는데, 데이터를 오프라인으로 저장하고 네트워크 신호가 있을 때 양식과 사진을 업로드하는 것입니다. 그래서 HTML5의 IndexedDB를 공부하게 되었습니다.
특정 필드만 저장해야 하는 경우 로컬 저장소와 Session 저장소를 사용할 수 있습니다. 하지만 일단 많은 양의 데이터가 저장되면 로컬 저장소와 세션 저장소는 요구 사항을 충족시키기 어렵습니다. 이때 IndexedDB의 위력이 반영됩니다.
1. 데이터베이스 생성 또는 열기
/* 对不同浏览器的indexedDB进行兼容 */ const indexeddb = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB; /* 创建或连接数据库 */ const request = indexeddb.open(name, version); // name:数据库名,version:数据库版本号
indexedDB는 다양한 브라우저에서 호환되므로 indexedDB와 호환되려면 몇 가지 호환성 기능이 필요합니다.
request.addEventListener('success', function(event){ // 打开或创建数据库成功 }, false); request.addEventListener('error', function(event){ // 打开或创建数据库失败 }, false); request.addEventListener('upgradeneeded', function(event){ // 更新数据库时执行 }, false);
데이터베이스에 연결한 후 요청은 세 가지 상태를 모니터링합니다.
성공: 데이터베이스가 열렸거나 성공적으로 생성되었습니다.
오류: 열기 또는 생성된 데이터베이스 실패
upgradeneeded: 데이터베이스 업데이트
upgradeneeded 상태는 indexedDB가 새 데이터베이스를 생성할 때와 indexeddb.open(이름, 버전) 버전(데이터베이스 버전 번호)이 변경될 때만 모니터링할 수 있습니다. 버전 번호가 변경되지 않으면 이 상태가 트리거되지 않습니다. 데이터베이스의 ObjectStore 생성 및 삭제는 모두 이 청취 이벤트에서 실행됩니다.
3. ObjectStore 생성 및 삭제
indexedDB에서 ObjectStore는 데이터베이스 테이블과 유사합니다.
request.addEventListener('upgradeneeded', function(event){ // 创建数据库实例 const db = event.target.result; // 关闭数据库 db.close(); // 判断是否有ObjectStore db.objectStoreNames.contains(objectStoreName); // 删除ObjectStore db.deleteObjectStore(objectStoreName); }, false);
다음 방법을 사용하여 ObjectStore를 생성할 수 있습니다
request.addEventListener('upgradeneeded', function(event){ // 创建数据库实例 const db = event.target.result; // 判断是否有ObjectStore if(!db.objectStoreNames.contains(objectStoreName)){ const store = db.createObjectStore(objectStoreName, { keyPath: keyPath // keyPath 作为ObjectStore的搜索关键字 }); // 为ObjectStore创造索引 store.createIndex(name, // 索引 index, // 键值 { unique: unique // 索引是否唯一 }); } }, false);
4. 데이터 추가, 삭제 및 수정 확인
request.addEventListener('success', function(event){ // 创建数据库实例 const db = event.target.result; // 查找一个ObjectStore db.transaction(objectStoreName, wa); // wa为'readwrite'时,数据可以读写 // wa为'readonly'时,数据只读 const store = transaction.objectStore(objectStoreName); }, false);
데이터베이스 추가, 삭제, 수정 및 확인:
// 添加数据,当关键字存在时数据不会添加 store.add(obj); // 更新数据,当关键字存在时覆盖数据,不存在时会添加数据 store.put(obj); // 删除数据,删除指定的关键字对应的数据 store.delete(value); // 清除ObjectStore store.clear(); // 查找数据,根据关键字查找指定的数据 const g = store.get(value); g.addEventListener('success', function(event){ // 异步查找后的回调函数 }, false);
인덱스로 데이터 찾기
const index = store.index(indexName); const cursor = index.openCursor(range); cursor.addEventListener('success', function(event){ const result = event.target.result; if(result){ result.value // 数据 result.continue(); // 迭代,游标下移 } }, false);
찾기 data by index range
const index = store.index(indexName); const cursor = index.openCursor(range); /** * range为null时,查找所有数据 * range为指定值时,查找索引满足该条件的对应的数据 * range为IDBKeyRange对象时,根据条件查找满足条件的指定范围的数据 */ // 大于或大于等于 range = IDBKeyRange.lowerBound(value, true) // (value, +∞),> value range = IDBKeyRange.lowerBound(value, false) // [value, +∞),>= value // 小于或小于等于,isOpen:true,开区间;false,闭区间 range = IDBKeyRange.upperBound(value, isOpen) // 大于或大于等于value1,小于或小于等于value2 IDBKeyRange.bound(value1, value2, isOpen1, isOpen2)
마지막으로 indexedDB 라이브러리를 캡슐화했습니다. duan602728596/IndexedDB
이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. PHP 중국어 웹사이트에 관련 기사가 있습니다!
추천 도서:
데이터 목록 입력 상자와 배경 데이터베이스 데이터의 동적 매칭
위 내용은 H5 로컬 스토리지 IndexedDB의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!