2017补全计划-持久化缓存-学习笔记

最新推荐文章于 2022-09-30 14:27:44 发布

早起早睡的少年郎

最新推荐文章于 2022-09-30 14:27:44 发布

阅读量530

点赞数 1

分类专栏： JavaScript 文章标签：缓存数据库浏览器存储

本文链接：https://blog.csdn.net/ReusLi/article/details/58197652

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

IndexDB 参考资料：

IndexedDB：浏览器端数据库

使用 IndexedDB 在客户端保存数据

使用 IndexedDB

HTML5本地存储——IndexedDB（一：基本使用）

HTML5本地存储——IndexedDB（二：索引）

IndexedDB具有以下特点。

（1）键值对储存。 IndexedDB内部采用对象仓库（object
store）存放数据。所有类型的数据都可以直接存入，包括JavaScript对象。在对象仓库中，数据以“键值对”的形式保存，每一个数据都有对应的键名，键名是独一无二的，不能有重复，否则会抛出一个错误。

（2）异步。
IndexedDB操作时不会锁死浏览器，用户依然可以进行其他操作，这与localStorage形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。

（3）支持事务。
IndexedDB支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回到事务发生之前的状态，不存在只改写一部分数据的情况。

（4）同域限制
IndexedDB也受到同域限制，每一个数据库对应创建该数据库的域名。来自不同域名的网页，只能访问自身域名下的数据库，而不能访问其他域名下的数据库。

（5）储存空间大
IndexedDB的储存空间比localStorage大得多，一般来说不少于250MB。IE的储存上限是250MB，Chrome和Opera是剩余空间的某个百分比，Firefox则没有上限。

（6）支持二进制储存。 IndexedDB不仅可以储存字符串，还可以储存二进制数据。

检测是否支持IndexDB

if("indexedDB" in window) {
    // 支持
} else {
    // 不支持
}

api接口：
这里写图片描述

实例：

IndexDB中，提高搜索速度的方法是索引和游标，对于索引，在indexedDB中有两种索引，一种是自增长的int值，一种是keyPath：自己指定索引列，下面是实现游标索引的完整例子：

<!DOCTYPE HTML>
<html>
<head>
    <title>IndexedDB</title>
</head>
<body>
    <script type="text/javascript">
        function openDB (name,version) {
            var version=version || 1;
            var request=window.indexedDB.open(name,version);
            request.onerror=function(e){
                console.log(e.currentTarget.error.message);
            };
            request.onsuccess=function(e){
                myDB.db=e.target.result;
            };
            request.onupgradeneeded=function(e){
                var db=e.target.result;
                if(!db.objectStoreNames.contains('students')){
                    var store=db.createObjectStore('students',{keyPath: 'id'});
                    store.createIndex('nameIndex','name',{unique:true}); 
                    store.createIndex('ageIndex','age',{unique:false}); 
                }
                console.log('DB version changed to '+version);
            };
        }

        function closeDB(db){
            db.close();
        }

        function deleteDB(name){
            indexedDB.deleteDatabase(name);
        }

        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,value){
            var transaction=db.transaction(storeName,'readwrite'); 
            var store=transaction.objectStore(storeName); 
            var request=store.get(value); 
            request.onsuccess=function(e){ 
                var student=e.target.result; 
                console.log(student.name); 
            };
        }

        function updateDataByKey(db,storeName,value){
            var transaction=db.transaction(storeName,'readwrite'); 
            var store=transaction.objectStore(storeName); 
            var request=store.get(value); 
            request.onsuccess=function(e){ 
                var student=e.target.result; 
                student.age=35;
                store.put(student); 
            };
        }

        function deleteDataByKey(db,storeName,value){
            var transaction=db.transaction(storeName,'readwrite'); 
            var store=transaction.objectStore(storeName); 
            store.delete(value); 
        }

        function clearObjectStore(db,storeName){
            var transaction=db.transaction(storeName,'readwrite'); 
            var store=transaction.objectStore(storeName); 
            store.clear();
        }

        function deleteObjectStore(db,storeName){
            var transaction=db.transaction(storeName,'versionchange'); 
            db.deleteObjectStore(storeName);
        }

        function fetchStoreByCursor(db,storeName){
            var transaction=db.transaction(storeName);
            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 getDataByIndex(db,storeName){
            var transaction=db.transaction(storeName);
            var store=transaction.objectStore(storeName);
            var index = store.index("ageIndex");
            index.get(26).onsuccess=function(e){
                var student=e.target.result;
                console.log(student.id);
            }
        }

        function getMultipleData(db,storeName){
            var transaction=db.transaction(storeName);
            var store=transaction.objectStore(storeName);
            var index = store.index("nameIndex");
            var request=index.openCursor(null,IDBCursor.prev);
            request.onsuccess=function(e){
                var cursor=e.target.result;
                if(cursor){
                    var student=cursor.value;
                    console.log(student.name);
                    cursor.continue();
                }
            }
        }

        var myDB={
            name:'test',
            version:1,
            db:null
        };

        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 
        }]; 
    </script>
</body>
</html>