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

 View Code

   b.创建/打开数据库

 View Code

  c.关闭数据库

 View Code

 d. 对数据的操作

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

       d1.添加数据

 View Code

      d2. 通过键获取数据

 View Code

    d3.读取集合

 View Code

  d4. 更新数据

 View Code

  d5.删除数据

 View Code

 d6.清空数据

 View Code