关于使用indexedDB的本地存储（1）

浏览数：377 / 时间：2015年06月12日

这两天在复习本地存储，再一次感叹我们这些学前端的真是生活在一个幸福的时代啊~

废话不多说，本地存储的方式相信大家都知道，cookie，storage（分为sessionStorage和localStorage）还有IndexedDB

Web SQL基本上淘汰了，这里就不讨论了啊

先简要介绍一下上面几个

cookie大家都知道，对存储有限制，每组大小在4KB样的，而且每次请求服务器会增加头信息

sessionStorage是session的临时会话，存在于从页面打开到页面关闭时间，页面关闭，存储也消失

localStorage永久存储，挺好的，API简单。不过也有缺点，第一是同步读取存储，影响速度，PC端还好，移动端会比较明显。而且它只支持字符串格式，可以用JSON.stringify和JSON.parse方法使其在字符串和对象中变化，不过就问你要存一个图像你要怎么办！

IndexedDB是这篇文章的主角，异步操作，支持大量数据，缺点在于API使用比localStorage麻烦几个档次

——————————————————————————————————————————————————————————

如果我们学习Mysql，第一个需要了解的是database相关操作，现在学习IndexedDB，同样如此

1、如何建立和打开一个数据库，与其取得联系

var request = window.indexedDB.open(DBname, version);

有四个触发句柄

request.onerror = function(){}        //发生错误时

request.onsuccess = function(){}    //成功请求时

request.onupgradeneeded = function(){}    //版本变化时

request.onblocked = function(){}    //没有关闭连接还尝试连接时

2、如何删除一个库

window.indexedDB.deleteDatabase(DBname);

非常简单方便

关于调用open方法返回的request是一个IDBOpenDBRequest对象

截了一个图给大家看一下~

技术分享

看到四个事件句柄了吧，现在注意下红色下划线，result属性就是我们真正请求到的DBname数据库对象

注意！！下面是文章的一些核心了，网上关于indexedDB的文章太多，如果你需要深度和思想可以去找其他真正大神的文，我这篇博文只是希望更基础和全面的了解indexedDB

让我们看图来一步步分析这个IDBDatabase对象

技术分享

name就是你open时候的第一个参数DBname，四个事件句柄就不解释了相信大家英语不至于这么差

①objectStoreNames这个属性很重要，这个属性在于你数据库里面有多少个objectStore

什么，不懂objectStore？那就把它当成Mysql中的table，翻译一下就是在于你databases中有几张tables

我们的需求一般要判断这个数据库里面有没有你的objectStore，没有的话要创建一个objectSore，那该如何实现呢

看②，继承来的contains方法可以实现这个目的

request.onsuccess = function(ev){

    var db = ev.target.result;

    alert(db.objectStoreNames.contains(‘test‘));

}

这时候就知道我们的DBname数据库中有没有test这个objectStore了，有的话进行后续操作，没有的话怎么办

看③，这个就是用来新建objectStore的，而④则是删除objectStore

注意：新建objectStore需要注意不同的键类型，存储的数据结构也不同！

网上关于不同键类型存储数据结构不同这一说法，大多数都给了一个表格，我也把这一表格列出来

技术分享

不知道大家看懂了没有，我把我所测试出来的给大家看，这也是我写博文的目的，我写的东西，一定是我经过测试的，绝不是在网上照搬照抄的

技术分享

一个很简单的布局，三个按钮显示的功能分别是save将五个number和name保存，update将IndexedDB里面的值去出来并丢到表单里，clear清空数据库

因为这里是测试新建一个objectStore不同键类型所带来的影响，所以只需要关注save就可以了

①db.createObjectStore(‘students‘, {keyPath: "number",);

②db.createObjectStore(‘students‘, {keyPath: "number", autoIncrement: true});

③db.createObjectStore(‘students‘, {keyPath: "number", autoIncrement: false});

④db.createObjectStore(‘students‘, {autoIncrement: false});

⑤db.createObjectStore(‘students‘, {autoIncrement:true});

①

a)存入每个对象都有number属性时，成功~

技术分享