这两天在复习本地存储，再一次感叹我们这些学前端的真是生活在一个幸福的时代啊~
废话不多说，本地存储的方式相信大家都知道，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属性时，成功~
b)一旦存入的某个对象没有number属性时，意味着无法找到键值，会报错
我在这里采取的方法是存入前两个对象只有name属性，是这样的：{name: aa},{name: bb}，而剩下三个是这样的{number: 33, name: cc}，华丽丽的报错了
②如果keyPath和autoIncrement同时使用的话会怎么样呢，还是前两个对象数据没有number属性，看图~
它对自己适应选择autoIncrement还是根据本身的number作为键值，注意autoIncrement产生的数值付给了存储对象value的number哦
再来看看③，其实③中autoIncrement为false就等于①！！
报错不解释，错误类型都一样，我就不贴图了
再看④，仍然报错，和不写参数报的是一样的错
⑤，这个应该是最好理解的吧，简简单单的自增长
好了，这是我所测试出来的几种情况，不知道有没有不完善之处，希望路过的大神大牛们将不妥之处点出，万分感谢~
然后是删除objectStore，这经过我测试……也是有坑的存在，不过下篇在说，这篇写累死我了~