万象更新 Html5 - h5: h5 IndexedDB: IDBKeyRange 的使用(按照指定的主键范围获取数据或删除数据)

源码 https://github.com/webabcd/Html5
作者 webabcd

万象更新 Html5 - h5: h5 IndexedDB: IDBKeyRange 的使用(按照指定的主键范围获取数据或删除数据)

示例如下:

h5\indexedDB\demo2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IndexedDB - IDBKeyRange 的使用(按照指定的主键范围获取数据或删除数据)</title>
</head>
<body>

<script>

    var request = window.indexedDB.open('myDB2', 1);
    request.onupgradeneeded = function(event) {
        var db = event.target.result;
        if (!db.objectStoreNames.contains('employee')) {
            var objectStore = db.createObjectStore('employee', { keyPath: 'id' });
        }
    };

    request.onsuccess = function(event) {
        db = event.target.result;

        initData(db);

        // 表示主键从 3 到 7 的数据
        // 第 3 个参数如果是 true 的话则不包括主键为 3 的数据,默认值是 false
        // 第 4 个参数如果是 true 的话则不包括主键为 7 的数据,默认值是 false
        var range = IDBKeyRange.bound(3, 7, false, false);

        // 表示主键为 1 的数据
        // var range = IDBKeyRange.only(1);

        // 表示主键大于等于 3 的数据
        // 第 2 个参数如果是 true 的话则不包括主键为 3 的数据,默认值是 false
        // var range = IDBKeyRange.lowerBound(1, false);

        // 表示主键小于等于 7 的数据
        // 第 2 个参数如果是 true 的话则不包括主键为 7 的数据,默认值是 false
        // var range = IDBKeyRange.upperBound(7, false);

        var objectStoreEmployee = db.transaction(['employee'], 'readwrite').objectStore('employee');
        // 根据 IDBKeyRange 打开游标
        objectStoreEmployee.openCursor(range).onsuccess = function(event) {
            var cursor = event.target.result;
            if (cursor) {
                console.log('employee', cursor.value);
                cursor.continue();
            } else {
                console.log('没有更多数据了');
            }
        }

        // 根据 IDBKeyRange 删除数据
        // var request = objectStoreEmployee.delete(range);
    };

    function initData(db) {
        var objectStoreEmployee = db.transaction(['employee'], 'readwrite').objectStore('employee');
        for (var i = 0; i < 10; i++) {
            var random = Math.ceil(Math.random() * 5);
            objectStoreEmployee.add({ id: i + 1, name: 'webabcd_' + random});
        }
    }

</script>

</body>
</html>

源码 https://github.com/webabcd/Html5
作者 webabcd

posted @ 2024-09-24 11:01  webabcd  阅读(8)  评论(0编辑  收藏  举报