html5 浏览器端数据库

为什么使用浏览器端数据库：随着浏览器的处理能力不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少用户等待从服务器获取数据的时间。

一、localStorage  — 本地存储  可以长期存储数据，没有时间限制。

可以存储 ：数组、json数据、图片、脚本、样式文件

  function test(){
        if(window.localStorage){//判断浏览器是否支持 localStorage
             var ls=window.localStorage;
             ls.setItem("name","张三");//设置值
             var name= ls.getItem("name");//取值
              ls.removeItem("name");//删除数据
            }else{
             alert('浏览器不支持 localStorage');
        }
    }

存在的局限性: 子域名之间不能共享存储数据；超出存储范围后可以使用 LRU、FIFO 技术处理；

二、sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

三、IndexedDB

1、使用IndexedDB的原因

现有的浏览器端数据储存方案，都不适合储存大量数据：cookie不超过4KB，且每次请求都会发送回服务器端；Window.name属性缺乏安全性，

且没有统一的标准；localStorage在2.5MB到10MB之间（各家浏览器不同）。所以，需要一种新的   解  决方案，这就是IndexedDB诞生的背景。

2、什么是IndexedDB

通俗地说，IndexedDB就是浏览器端数据库，可以被网页脚本程序创建和操作。它允许储存大量数据，提供查找接口，还能建立索引。

这些都是localStorage所不具备的。就数据库类型而言，IndexedDB不属于关系型数据库（不支持SQL查询语   句），更接近NoSQL数据库。

3、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不仅可以储存字符串，还可以储存二进制数据。

目前，Chrome 27+、Firefox 21+、Opera 15+和IE 10+支持这个API，但是Safari完全不支持。

4、使用

a. 判断浏览器是否支持Indexed DB

 function detectionIndexedDB(){
          window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
        if(!window.indexedDB)
        {
            console.log("你的浏览器不支持IndexedDB");
            return false;
        }
           console.log("你的浏览器支持IndexedDB");
           return true;
      }

b.创建/打开数据库

function openDB (myDB) {
            var version=version || 1;
            var request=window.indexedDB.open(myDB.name,myDB.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')){//初始化objectstore(表)以供后面使用
                    db.createObjectStore('students',{autoIncrement:true});//主键
                }
                console.log('DB version changed to '+myDB.version);
            };
        }

c.关闭数据库

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

d. 对数据的操作

　　事务 在对新数据库做任何事情之前，需要开始一个事务。事务中需要指定该事务跨越哪些object store。
　　事务具有三种模式
　　　　只读：read，不能修改数据库数据，可以并发执行
　　　　读写：readwrite，可以进行读写操作
　　　　版本变更：verionchange

d1.添加数据

 function addData(db,tableName,datas){
            var transaction=db.transaction(tableName,'readwrite');
            var store=transaction.objectStore(tableName);
            store.add(datas);
        }

d2. 通过键获取数据

 //通过键获取数据
        function getDataByKey(db,tableName,value){
            var transaction=db.transaction(tableName,'readwrite');
            var store=transaction.objectStore(tableName);
            var request=store.get(value);
            request.onsuccess=function(e){
                var student=e.target.result;
                console.log(student.name);
            };
       }

d3.读取集合

 //读取集合
       function dataList(db,tableName){
               var transaction=db.transaction(tableName,'readwrite');
            var objectStore = transaction.objectStore(tableName);
            var cursor = objectStore.openCursor();
            cursor.onsuccess = function(e) {
                var result = e.target.result;
                if(result){
                    console.log("Key", result.key,"value",result.value);
                    result.continue();
                 }
            }
       }

d4. 更新数据

 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);
            };
        }

d5.删除数据

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

d6.清空数据

 //调用object store的clear方法可以清空object store
        function clearObjectStore(db,storeName){
            var transaction=db.transaction(storeName,'readwrite');
            var store=transaction.objectStore(storeName);
            store.clear();
        }