浏览器的IndexedDB本地存储续

IndexedDB 中文教程

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

续：

    <script type="text/javascript">
        const request = window.indexedDB.open('mydb', 1);
        let db;
        request.onsuccess = e => {
            db = e.target.result
            console.log(db);
        }
        request.onerror = e => {console.info('数据库创建失败', e);};

        /**
         * 创建 objectStore 和修改 objectStore 都只能在 db 的 onupgradeneeded 事件中进行，
         * 因此，要创建 objectStore，必须在前面的 open 操作那个时候来进行。
         * 
         * 使用 createObjectStore 方法来实现 objectStore 的创建。但是，需要注意的是，
         * 一个 database 中，只允许存在一个同名的 objectStore，因此，如果你第二次 createObjectStore 
         * 相同名的objectStore，程序会报错。比如你的程序如果像上面这样写，必然会遇到一个问题，就是当你
         * 更新 version 的时候，会再次执行 createObjectStore，那么就会报错，程序就会中断。另一个注
         * 意点是，一旦一个 objectStore 被创建，它的 name 和 keyPath 是不能修改的。
         * 
         * createObjectStore()
            创建一个objectStore，有两个参数：
            name：要创建的objectStore的name
            options：选项
                keyPath：主键，你将要存入的object的一个property name，比如每一个object都有一个id属性，那么可以使用id作为keyPath，
                    在查询的时候，get方法的参数，是id值
                autoIncrement：keyPath是否自增，如果为true，那么你在添加一个object的时候，可以不用传id，id会自动加1。但是这样的话，
                    你就不知道你的这个object的id值到底是多少，所以不建议使用。默认为false
         */
        request.onupgradeneeded = (e) => {
            const db = e.target.result;
            
            // 对象存储
            if(!db.objectStoreNames.contains('xiehobj')) {
                let objectStore = db.createObjectStore('xiehobj', { keyPath: 'id' });
                // 参数：索引名称，indexPath类似keyPath，选项参数
                // 为name创建索引，unique: true表示name的值不能重复，意思名字不可以重复
                objectStore.createIndex('name', 'name', { unique: true });
                // 在根据索引进行查询的时候，语法是这样的：
                // const request = objectStore.index('indexName').get('indexKey')
            }
            
            // 非对象存储
            if(!db.objectStoreNames.contains('xieh')) {
                db.createObjectStore('xieh', { autoIncrement: true });
            }
            
            // 混合仓库，当你插入的对象中不存在 id 属性时，对象会被污染，会自动加上 id 属性，并且赋予一个数字作为 key。
            if(!db.objectStoreNames.contains('mystore')) {
                db.createObjectStore('mystore', { keyPath: 'id', autoIncrement: true })
            }
            

        }
        
        
        function addXiehObj(){
            let transaction = db.transaction(['xiehobj'], 'readwrite');
            let objectStore = transaction.objectStore('xiehobj');
            let status = objectStore.add({"id":1,"name":"谢辉","age":23});
            status.onsuccess = function(e){
                console.log("写入xiehobj成功：",e);    
            }
            
            status.onerror = function(e){
                console.log("写入xiehobj失败：",e);    
            }
        }
        
        function addXieh(){
            let transaction = db.transaction(['xieh'], 'readwrite');
            let objectStore = transaction.objectStore('xieh');
            let status = objectStore.add("我是值value","我是key2");
            // 这里是自动生成key，数字的key自增，但是建议上一行代码，指定key，不然数据多可以后无法确定自动生成的key是多少
            objectStore.add("我是值value");
            status.onsuccess = function(e){
                console.log("写入xieh成功：",e);    
            }
            
            status.onerror = function(e){
                console.log("写入xieh失败：",e);    
            }
        }
        
        
        
        function addMystore(){
            let transaction = db.transaction(['mystore'], 'readwrite');
            let objectStore = transaction.objectStore('mystore');            
            let status1 = objectStore.add({"id":2,"name":"谢辉mystore","age":23});
            // 这种是错误的
            //let status2 = objectStore.add("我是值value+mystore",1);
            // 数据里没有指定id时，他会自动生成
            let status2 = objectStore.add({"name":"谢辉mystore","age":23});
            status1.onsuccess = function(e){
                console.log("写入Mystore成功：",e);    
            }
            
            status1.onerror = function(e){
                console.log("写入Mystore失败：",e);    
            }
            status2.onsuccess = function(e){
                console.log("写入Mystore成功：",e);    
            }
            
            status2.onerror = function(e){
                console.log("写入Mystore失败：",e);    
            }
        }
        
        
        
        function getXiehObj(){
            let transaction = db.transaction(['xiehobj'], 'readonly')
            let objectStore = transaction.objectStore('xiehobj')
            let request = objectStore.get(1);
            console.log("getXiehObj:" + request);
            request.onerror = e => {console.info('获取失败', e);};
            request.onsuccess = e => {console.info("获取数据成功",e.target.result)};
            
        }
        
        function getXieh(){
            let transaction = db.transaction(['xieh'], 'readonly')
            let objectStore = transaction.objectStore('xieh')
            let request = objectStore.get("我是key2");
            console.log("getXieh:" + request);
            request.onerror = e => {console.info('获取失败', e);};
            request.onsuccess = e => {console.info("获取数据成功",e.target.result)};
        }
        
        function getMystore(){
            let transaction = db.transaction(['mystore'], 'readonly')
            let objectStore = transaction.objectStore('mystore')
            let request = objectStore.get(2);
            console.log("getMystore:" + request);
            request.onerror = e => {console.info('获取失败', e);};
            request.onsuccess = e => {console.info("获取数据成功",e.target.result)};
        }
        
        
        
        function updateXiehObj(){
            let transaction = db.transaction(['xiehobj'], 'readwrite')
            let objectStore = transaction.objectStore('xiehobj')
            let request = objectStore.put({
             id: 1,
             name: '谢俊楠',
             age:24
            });
            request.onerror = e => {console.info('更新失败', e);};
            request.onsuccess = e => {console.info('更新成功', e);};
        }
        
        function updateXieh(){
            let transaction = db.transaction(['xieh'], 'readwrite')
            let objectStore = transaction.objectStore('xieh')
            let request = objectStore.put("我是新value","我是key2");
            request.onerror = e => {console.info('更新失败', e);};
            request.onsuccess = e => {console.info('更新成功', e);};
        }
        
        function updateMystore(){
            let transaction = db.transaction(['mystore'], 'readwrite')
            let objectStore = transaction.objectStore('mystore')
            let request = objectStore.put({
             id: 2,
             name: '谢俊楠',
             age:24
            });
            request.onerror = e => {console.info('更新失败', e);};
            request.onsuccess = e => {console.info('更新成功', e);};
        }
        
        
        
        function deleteXiehObj(){
            let transaction = db.transaction(['xiehobj'], 'readwrite')
            let objectStore = transaction.objectStore('xiehobj')
            let request = objectStore.delete(1);
            request.onerror = e => {console.info('删除失败', e);};
            request.onsuccess = e => {console.info('删除成功', e);};
        }
        
        function deleteXieh(){
            let transaction = db.transaction(['xieh'], 'readwrite')
            let objectStore = transaction.objectStore('xieh')
            let request = objectStore.delete("我是key2");
            request.onerror = e => {console.info('删除失败', e);};
            request.onsuccess = e => {console.info('删除成功', e);};
        }
        
        function deleteMystore(){
            let transaction = db.transaction(['mystore'], 'readwrite')
            let objectStore = transaction.objectStore('mystore')
            let request = objectStore.delete(2);
            request.onerror = e => {console.info('删除失败', e);};
            request.onsuccess = e => {console.info('删除成功', e);};
        }
        
        
        function deleteDatabse(){
            window.indexedDB.deleteDatabase("mydb");
        }
        
        function close(){
            db.close();
        }
        
        
        
    </script>