HTML5 로컬 저장소 IndexedDB

이 글에서는 HTML5의 로컬 저장소인 IndexedDB를 주로 소개하는데, 이제는 모두와 공유하고 있습니다. 도움이 필요한 친구들이 참고할 수 있습니다.

IndexedDB는 클라이언트 측 대용량 저장에 사용되는 저수준 API입니다. 구조화된 데이터(파일/BLOB 포함) 이 글은 HTML5 로컬 저장을 위한 IndexedDB 관련 지식을 소개하는 데 중점을 둘 것입니다. 관심 있는 친구들은 함께 살펴보세요

IndexedDB는 대용량 구조화된 데이터(포함)를 클라이언트 측에 저장하는 데 사용되는 저수준 API입니다. 파일/BLOB). API는 인덱스를 사용하여 이 데이터에 대한 고성능 검색을 가능하게 합니다.

최근에는 오프라인으로 데이터를 저장하고, 네트워크 신호가 있을 때 양식과 사진을 업로드해야 하는 비즈니스 요구 사항이 있습니다. 그래서 HTML5의 IndexedDB를 공부하게 되었습니다.

특정 필드만 저장해야 하는 경우 로컬 저장소와 세션 저장소를 사용할 수 있습니다. 하지만 일단 많은 양의 데이터가 저장되면 로컬 저장소와 세션 저장소는 요구 사항을 충족시키기 어렵습니다. 이때 IndexedDB의 위력이 반영됩니다.

1. 데이터베이스 생성 또는 열기

/* 对不同浏览器的indexedDB进行兼容 */
const indexeddb = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
/* 创建或连接数据库 */
const request = indexeddb.open(name, version);  // name：数据库名，version：数据库版本号

indexedDB는 다양한 브라우저에서 호환되므로 indexedDB와 호환되려면 몇 가지 호환성 기능이 필요합니다.

2. 데이터베이스에 연결하기 위한 콜백 함수

request.addEventListener('success', function(event){ 
    // 打开或创建数据库成功
}, false);
request.addEventListener('error', function(event){ 
    // 打开或创建数据库失败
}, false);
request.addEventListener('upgradeneeded', function(event){ 
    // 更新数据库时执行
}, false);

데이터베이스에 연결한 후 요청은 세 가지 상태를 모니터링합니다.

• 성공: 데이터베이스를 열거나 생성했습니다.

• 오류 : open 또는 데이터베이스 생성 실패

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

인덱스 범위로 데이터 찾기

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)

위는 이 글의 전체 내용입니다. 학습에 관한 더 많은 내용을 보려면 PHP 중국어 웹사이트를 주목하세요!

관련 권장 사항:

프런트 엔드 HTML5의 여러 저장 방법

H5 활동 페이지에 대한 모바일 REM 레이아웃 적응 방법 분석

H5 가로 및 세로 화면 감지 방법

위 내용은 HTML5 로컬 저장소 IndexedDB의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!