浏览器的IndexedDB本地存储

IndexedDB 中文教程

https://www.tangshuang.net/3735.html

 

简单的示例：

    <script type="text/javascript">
        /**
         * IndexedDB
         * */
        var db; /*数据库对象*/
        var objectStore; /*仓库(表)*/
        /**
         * 创建数据库
         */
        var request = window.indexedDB.open('myIndex', 3); /*该域中的数据库myIndex*/
        request.onerror = function(event) {
            console.log('open database error');
        };
        /**
         * 业务代码
         */
        request.onsuccess = function(event) {
            db = request.result; /*数据库对象*/
            // add();
            // read();
            // update();
            // remove();
            //readAll();
            // console.log(db);
        };
        /**
         * 创建表
         */
        request.onupgradeneeded = function(event) {
            db = event.target.result; /*数据库对象*/
            if(!db.objectStoreNames.contains('person')) {
                objectStore = db.createObjectStore('person', {
                    keyPath: 'id'
                }); /*创建person仓库(表) 主键*/
                // objectStore = db.createObjectStore('person',{autoIncrement:true});/*自动创建主键*/
                // 创建索引，自己规定的，后面作为根据索引进行查询的依据
                objectStore.createIndex('name', 'name', {
                    unique: false
                });
                objectStore.createIndex('email', 'email', {
                    unique: true
                });
            }
            console.log(db);
        };
        /**
         * 插入数据
         */
        function add() {
            var request = db.transaction(['person'], 'readwrite')
                .objectStore('person')
                .add({
                    id: 3,
                    name: '张三',
                    age: 24,
                    email: 'zhangsan1@example.com'
                });
            request.onsuccess = function(event) {
                console.log('数据写入成功');
            };
            request.onerror = function(event) {
                console.log('数据写入失败');
            };
        }
        /**
         * 读取数据
         */
        function read() {
            var transaction = db.transaction(['person']);
            var objectStore = transaction.objectStore('person');
            var request = objectStore.get(1);
            request.onerror = function(event) {
                console.log('事物失败');
            };
            request.onsuccess = function(event) {
                if(request.result) {
                    console.log('Name' + request.result.name);
                    console.log('Age' + request.result.age);
                    console.log('Email' + request.result.email);
                } else {
                    console.log('未获得数据记录');
                }
            };
        }

        /**
         * 遍历数据
         */
        function readAll() {
            var objectStore = db.transaction(['person']).objectStore('person');
            objectStore.openCursor().onsuccess = function(event) {
                var cursor = event.target.result;
                if(cursor) {
                    console.log('Id:' + cursor.key);
                    console.log('Name:' + cursor.value.name);
                    console.log('Age:' + cursor.value.age);
                    console.log('Email:' + cursor.value.email);
                } else {
                    console.log('没有更多数据了');
                }
            }
        }

        /**
         * 更新数据
         */
        function update() {
            var request = db.transaction(['person'], 'readwrite')
                .objectStore('person')
                .put({
                    id: 1,
                    name: '李四',
                    age: 35,
                    email: 'lisi@example.com'
                });
            request.onsuccess = function(event) {
                console.log('数据更新成功');
            };
            request.onerror = function(event) {
                console.log('数据更新失败');
            };
        }

        /**
         * 删除数据
         */
        function remove() {
            var request = db.transaction(['person'], 'readwrite')
                .objectStore('person')
                .delete(1);
            request.onsuccess = function(event) {
                console.log('数据删除成功');
            };
        }
    </script>

 

升级版：

class IndexedDB{
        constructor(dbName, storeName, version){
            this.storeName = storeName;
            const indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;
            const request = indexedDB.open(dbName, version);
    
            request.onsuccess = e => {
                this.db = e.target.result;
                console.log('indexDB初始化成功');
            };
            request.onupgradeneeded = e => {
                this.db = e.target.result;
               if(!this.db.objectStoreNames.contains(storeName)){
    
                   
                    this.store = this.db.createObjectStore(storeName);
                }
                console.log("数据库创建成功，Version："+version);
            };
            request.onerror = e => {console.info('数据库创建失败', e);};
        }
        get(key, callback){
            const transaction = this.db.transaction(this.storeName);
            const objectStore = transaction.objectStore(this.storeName);
            const request = objectStore.get(key);
    
            request.onerror = e => {console.info('获取失败', e);};
            request.onsuccess = e => {callback(e.target.result);};
        }
        set(key, value){
            let oldValue;
            this.get(key, function(res){oldValue = res;});
    
            if(oldValue){
                console.info('请运用更新方法更新！');
            }else{
                const transaction = this.db.transaction(this.storeName, 'readwrite');
                const objectStore = transaction.objectStore(this.storeName);
                const request = objectStore.add(value, key);
    
                request.onerror = e => {console.info('添加失败', e);};
            }
        }
        update(newValue, key){
            this.get(key,(oldValue)=>{
                if(!oldValue){
                    console.info('请用set方法设置值');
                }else{
                    const transaction = this.db.transaction(this.storeName, 'readwrite');
                    const objectStore = transaction.objectStore(this.storeName);
                    const request = objectStore.put(newValue, key);
        
                    request.onerror = e => {console.info('更新失败', e);};
                }
            });
        }
        remove(key){
            const request = this.db.transaction(this.storeName, 'readwrite')
                    .objectStore(this.storeName)
                    .delete(key);
            request.onerror = e => {console.info('删除失败', e);};
        }
        delete(name){
            window.indexedDB.deleteDatabase(name);
        }
        close(){
            this.db.close();
        }
    }