zoukankan      html  css  js  c++  java
  • IndexedDB(本地存储)

    var students = [{
        id: 1001,
        name: "Byron",
        age: 24
    }, {
        id: 1002,
        name: "Frank",
        age: 30
    }, {
        id: 1003,
        name: "Aaron",
        age: 26
    }, {
        id: 1004,
        name: "Casper",
        age: 26
    }];
    
    function hasIndexedDB() {
        if ("indexedDB" in window) {
            console.log("支持indexedDB!");
            return true;
        } else {
            console.log("不支持indexedDB!");
            return false;
        }
    }
    
    var dataBase = null;
    // 打开数据库
    function openIDB(IDBName, IDBVersion) {
        var IDBVersion = IDBVersion || 1;
        var IDBOpenDBRequest = indexedDB.open(IDBName, IDBVersion);
    
        IDBOpenDBRequest.onupgradeneeded = function(e) {
            var _db = e.target.result;
            createObjectStore(_db, "students");
            deleteObjectStore(_db, "firstOS");
            console.log('DB version changed to ' + IDBVersion);
        }
        IDBOpenDBRequest.onsuccess = function(e) {
            dataBase = e.target.result;
            // addData(dataBase,"students");
            // getDataByKey(dataBase,"students",1001);
            updateDataByKey(dataBase, "students", 1001);
            console.log("openIDB Success!");
        }
        IDBOpenDBRequest.onerror = function(e) {
            console.log("Error:" + e.currentTarget.error.message);
        }
    }
    
    // 添加数据
    function addData(db, storeName) {
        var transaction = db.transaction(storeName, 'readwrite');
        var store = transaction.objectStore(storeName);
    
        for (var i = 0; i < students.length; i++) {
            store.add(students[i]);
        }
    }
    
    // 查询数据(根据关键字)
    function getDataByKey(db, storeName, keyValue) {
        var transaction = db.transaction(storeName, 'readonly');
        var store = transaction.objectStore(storeName);
    
        var request = store.get(keyValue);
        request.onsuccess = function(e) {
            var student = e.target.result;
            console.log(student.name);
        };
    }
    
    // 更新数据
    function updateDataByKey(db, storeName, keyValue) {
        var transaction = db.transaction(storeName, 'readwrite');
        var store = transaction.objectStore(storeName);
        var request = store.get(keyValue);
        request.onsuccess = function(e) {
            var student = e.target.result;
            student.age = 35;
            store.put(student);
        };
    }
    
    // 删除数据
    function deleteDataByKey(db, storeName, keyValue) {
        var transaction = db.transaction(storeName, 'readwrite');
        var store = transaction.objectStore(storeName);
        store.delete(keyValue);
    }
    
    // 清空Store
    function clearObjectStore(db, storeName) {
        var transaction = db.transaction(storeName, 'readwrite');
        var store = transaction.objectStore(storeName);
        store.clear();
    }
    
    // 删除Store(在onupgradeneeded里调用)
    function deleteObjectStore(db, storeName) {
        if (db.objectStoreNames.contains(storeName)) {
            db.deleteObjectStore(storeName);
            console.log("deleteObjectStore:" + storeName + ",成功!");
        }
    }
    
    // 关闭dataBase
    function closeIDB(db) {
        db.close();
    }
    
    // 删除dataBase
    function deleteIDB(db) {
        indexedDB.deleteDatabase(db);
    }
    
    // 新增Store(在onupgradeneeded里调用)
    function createObjectStore(db, storeName) {
        if (!db.objectStoreNames.contains(storeName)) {
            db.createObjectStore(storeName, {
                autoIncrement: true
            });
            console.log("createObjectStore:" + storeName + ",成功!");
        }
    }
    
    // 新增Store--带索引(在onupgradeneeded里调用)
    function createObjectStoreWidthIndex(db, storeName) {
        if (!db.objectStoreNames.contains(storeName)) {
            var store = db.createObjectStore(storeName, {
                keyPath: "id"
            });
            // 创建两个索引表
            store.createIndex('nameIndex', 'name', {
                unique: true
            });
            store.createIndex('ageIndex', 'age', {
                unique: false
            });
            console.log("createObjectStore:" + storeName + ",成功!");
        }
    }
    
    // 获取数据(根据索引)
    function getDataByIndex(db, storeName) {
        var transaction = db.transaction(storeName, 'readonly');
        var store = transaction.objectStore(storeName);
        var index = store.index("nameIndex");
        index.get('Byron').onsuccess = function(e) {
            var student = e.target.result;
            console.log(student.id);
        }
    }
    
    // 使用游标
    function fetchStoreByCursor(db, storeName) {
        var transaction = db.transaction(storeName, 'readonly');
        var store = transaction.objectStore(storeName);
        var request = store.openCursor();
        request.onsuccess = function(e) {
            var cursor = e.target.result;
            if (cursor) {
                console.log(cursor.key);
                var currentStudent = cursor.value;
                console.log(currentStudent.name);
                cursor.continue();
            }
        };
    }
    
    // 索引与游标结合
    function getDataByMultiple(db, storeName) {
        var transaction = db.transaction(storeName);
        var store = transaction.objectStore(storeName);
        var index = store.index("ageIndex");
        // index.openKeyCursor(26);
        var request = index.openCursor(IDBKeyRange.only(26));
        request.onsuccess = function(e) {
            var cursor = e.target.result;
            if (cursor) {
                var student = cursor.value;
                console.log(student.id);
                cursor.continue();
            }
        }
    }
    
    // 指定游标范围
    // IDBKeyRange.only(value):只获取指定数据
    // IDBKeyRange.lowerBound(value,isOpen):获取最小值是value的数据
    // IDBKeyRange.upperBound(value,isOpen):获取最大值是value的数据
    // IDBKeyRange.bound(value1,value2,isOpen1,isOpen2)
    
    if (hasIndexedDB()) {
        openIDB("test1", 2);
    }

    参考:
      IndexedDB:浏览器端数据库
      HTML5本地存储——IndexedDB(一:基本使用)

  • 相关阅读:
    IIS 6.0下安装SSL数字证书实现https访问
    使用SQL2005自带扩展函数对字符串进行MD5加密(转)
    Posix多线程编程学习笔记(三)—信号灯(1)--转自湖光倒影
    利用pthread_mutex对多进程上锁
    ObjectiveC中的锁
    Linux内存管理之mmap详解
    cocoa应用程序生命周期
    多线程编程互斥锁
    [New Book]Flex第一步 国内第一本关于Flex的书籍
    ASP.NET中实现二级或多级域名(修改UrlRewrite)
  • 原文地址:https://www.cnblogs.com/huliang56/p/6069832.html
Copyright © 2011-2022 走看看