3.1.1 HTML5存储

一.介绍

二.HTML5本地存储

（一）.Localstorage

（二）.API

（三）.存储时效

（四）.indexDB

（五）.indexDB-索引

（六）.indexDB-游标

三.游标索引结合与区别

（一）.IndexDB-游标索引结合

（二）.indexDB-区别

四.课程总结

 

 

(一）介绍

1.本地存储：(1).web storage    (2).IndexedDB

2.本地存储的扩展介绍。

3.离线存储-app cache。

4.分析存储需求：(1).照顾2g，3g网络的体验。(2).流量节省。(3).在离线情况下使用。

cookie做不到，cookie的局限性：存储大小限制，仅4kb。单个域名下的数量限制，50个左右。污染请求头，浪费流量。

 

二．HTML5本地存储

（一）Localstorage

localStorage和sessionStorage

1.本地存储和离线存储相同的使用方法：

(1).setItem方法设置存储内容。localStorage.setItem('Key', 'Value');

(2).getItem方法获取存储内容。localStorage.getItem('Key');//返回value值。

(3).使用removeItem方法删除存储内容。(一个一个删) localStorage.removeItem('Key');//删除这个key的数据。
 

对象[key]=value

对象.key=value

sessionStorage同理。

---------------------------------------------------------

(4).使用clear方法清除所有内容。（全部清空）sessionStorage.clear();

(5).使用length属性获取存储内容个数。sessionStorage.length;

(6).使用key方法获取存储字段。sessionStorage.key(0);//获取第一个key的名称，依次类推。

localStorage同理。

2.不同的存储时效：

localStorage存储会持久化。

sessionStorage存储会在网页会话结束（标签页的关闭）后失效。（刷新没事）。

3..不同的存储容量：

localStorage容量一般在2-5Mb左右。

sessionStorage存储容量不一，部分浏览器不设限。

4.web storage和cookie的区别:

(1).cookie的大小是受限的

(2).每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽

(3).Web Storage自身拥有setItem,getItem,removeItem,clear等方法，cookie需要前端开发者自己封装像setCookie，getCookie等方法。

(4).cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

 

（二）API

1.使用Storage时的注意点

(1).存储容量超出限制---抛出QuotaExceededError异常

注：存储值应使用try catch 避免异常未捕获

(2).存储类型的限制---只能存储字符串，注意类型的转换

(3).sessionStorage失效机制

---刷新页面并不能使sessionStorage失效

---相同URL不同标签页不能共享sessionStorage（只能在同一标签页内用）

 

（三）存储时效

Web Storage的优化--IE8以上

性能与存储容量的大小无关，与读出次数有关

1.减少读取item次数

2.单个item中尽量可能多的存储数据

 

（四）indexDB

HTML5-----数据库(indexedDB)
1.创建

(1).创建数据库：indexedDB.open('数据库名字',版本号(可选))

注：如果有这个数据库就打开，没有就创建。版本号只能升，不能降。

方法：

onsuccess 数据库创建或打开成功触发

onerror 打开失败 （例如版本号降低）触发

onupgradeneeded 版本升级时触发的函数

(2).创建表：indexedDB.createObejctStore('表名');

<script>

    //创建数据库,数据库存在则打开，不存在则创建,版本号只能往上走

    var request=indexedDB.open('testDB',2);

    //数据库创建或读取成功

    request.onsuccess=function(){

        console.log("数据库创建成功");

    }

    //数据库创建或读取失败

    request.onerror=function(){

        console.log("数据库创建失败");

    }

    // 版本号发生变化时触发

    request.onupgradeneeded=function(){

        //result中存在创建表的函数

        var db=request.result;

        // 创建数据库表

        db.createObjectStore('ccx');

        console.log("版本号以升级");

    }

    console.log(request);

</script>

 

2.设置主键的两种方法

(1).设置自增主键{autoIncrement：ture}，就是数字从1开始，自主增加

(2).取数据字段作为主键-{key-Path：字段名}

主键的设置需要放在创建表的时候，db.createObjectStore('test1',{autoIncrement：ture})

打开表：

之前在版本升级的时候已经创建好了表，然后将db定义成表，var db=request.result;

打开并读写表使用 var transaction=db.transaction('test1','readwrite'),在表名的位置，如果打开多个表的话，可以把 表名换成数组里放要打开的表名

具体要读写那一个表，就使用var store=transaction,objectStore('test1');

写入数据使用，store.add（变量名）

写入数据后，改变变量内容，其他不进行改变，则表中的key会递增一个并存储一个新的数据。

 

3.关于表的增删改查

(1).如何使用事务获取表：

调用IDBDatabase.transaction 方法会返回一个IDBTransaction 对象，它含有一个objectStore方法可以让用户通过指定模式操作数据库中的“表”。

indexedDB->transaction->objectStore

(2).事务的模式

（a）读写模式-readwrite

（b）只读模式（默认）-readonly

(3).关于“表”的增删查改的相关方法

  (a).增加数据-IDBObjectStore.add( );

注：必须是读写模式readwrite

  (b).获取数据-IDBObjectStore.get(key值);

  (c).获取所有数据-IDBObjectStore.getAll( );

注：result是以数组形式表现

  (d).修改数据-IDBObjectStore.put(数据 );

  (e).删除数据-IDBObjectStore.delete(key值)；

  (f).清除所有数据-IDBObjectStore.clear( );

(4).IDBRequest 对象

  (a).使用IDBRequest.onsuccess 执行查询完成回调

  (b).使用IDBRequest.result 获取查询结果

  (c).使用IDBRequest.onerror 执行查询失败回调

4.add() 和put () 的区别：

 add() : 增加数据。接收一个参数，为需要保存到对象仓库中的对象。

 put() : 增加或修改数据。接收一个参数，为需要保存到对象仓库中的对象。

 add 和 put 的作用类似，区别在于put 保存数据时，如果该数据的主键在数据库中已经有相同主键的时候，则会修改数据库中对应主键的对象，而使用 add 保存数据，如果该主键已经存在，则保存失败。

 

（五）indexDB-索引

关于索引的使用

1.如何创建索引

IDBObjectStore.createlndex(表名称，数据key值，{unique：true})；

(1).indexName：索引名称

(2).keyPath：索引字段，可以为空或者数组（type array）

(3).optionParameters：索引配置参数

注：unique：true  唯一性  如果有多个同样的就不写入了

获取：

var index = store.index(表名称).get(key值).onsuccess=function(e)

{e.target.result;//找到的数据内容}

2.使用索引的好处

(1).可以使用存储记录中的值进行检索

(2).索引自动更新

(3).索引数据自动排序

拓展：

IndexDB是一个NoSQL类型的数据库（非关系型）。

相较于Web Storage，indexDB支持多类型的存储数据

相较于Web Storage，indexDB的存储空间大

IndexedDB存储数据方式为键值对

 

【html5本地存储-indexedDB的使用】https://www.cnblogs.com/dolphinX/p/3415761.html

 

（六）indexDB-游标

关于游标的使用
 

1.如何创建游标

IDBObjectStore/IDBIndex.openCursor

(1)range：指定游标范围

(2)direction：游标的方向

例：

var requestNode = store.openCursor(IDBKeyRange.only(1001));

requestNode.onsuccess = function(){

    console.log(requestNode.result.value);//最后获取的值
 
};

var requestNode = store.openCursor(IDBKeyRange.upperBound(1003,true));

//true是不包含自己，false是包含自己

requestNode.onsuccess = function(){

    var cursor = requestNode.result;

    if(cursor){

        console.log(cursor.value);

        cursor.continue();

     }
};

 

2.IDBRange对象

key range 取值表:

Range ----------------Code

All keys  ≤ x----------upperBound（x）

All keys  <x-----------upperBound（x，true）

All keys  ≥y-----------lowerBound（y）

All keys >y------------lowerBound（y，true）

The key  =z-----------only（z）

All keys ≥x&&≤y-----bound(x,y)

All keys >x&&<y-----bound(x,y,true,true)

All keys >x&&≤y-----bound(x,y,true,false)

All keys ≥x&&<y-----bound(x,y,false,true)
 

3.设置游标的 direction

游标的 direction 取值：

(1)next：顺序查询

(2)prev：逆序查询

(3)nextunique：顺序唯一查询

(4)prevunique：逆序唯一查询

4.使用游标带来的好处

(1)可以查询指定数据集范围

(2)拥有逆序遍历能力

 

三．游标索引结合与区别

（一）IndexDB-游标索引结合

索引和游标的结合使用

var index = store.index('test3');

var requestNode = index.openCursor(IDBKeyRange.upperBound(25));
 

update(数据) 更新数据

delete( )        删除数据

索引和游标结合带来的好处

1.索引按值搜索+游标范围遍历

2.索引排序+游标按序遍历

 

（二）indexDB-区别

IndexedDB与Web Storage比较

1.优势：

-存储类型更加丰富

-可以在Worker中使用

-条件搜索优势明显

-存储容量更大

2.劣势

-学习曲线略陡峭

-兼容性问题略严重

3.IndexedDB的兼容性问题

(1).IOS8&9中webview 不支持indexedDB

(2).Firefox 单次存储Blob 数据超50Mb会抛出异常

(3).IE10&11有部分子功能未实现

4.跨域存储限制（indexDB不能跨域）

 

四．课程总结

1.localStorage 和 sessionStorage

-存取次数影响性能

-只能存储字符串类型数据

-注意存储至上限时的异常处理

2.indexedDB

-存储容量大

-需要考虑兼容性

-适合处理复杂数据查询

3.为什么一部分代码要写在setTimeout函数里呀?

这是由于var声明变量的作用域问题导致的，
 

如果不将var db = request.result;放在setTimeout(function(){}内，var db = request.result;就会变成全局变量，影响上面的db变量。并且，这里不一定非要放在setTimeout(function(){}，也可以放在函数中，