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

来源：互联网发布：java高仿京东商城源码编辑：程序博客网时间：2024/05/06 17:05

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>

0 0