<div style="font-size:16px;">
<p>本地数据库</p>
<p>本地数据库</p>
<p>本地数据库概念</p>
<p>HTML5 的一个重要特性是本地数据持久性，结合应用程序缓存能够实现离线状态下的正常工作。此外，本地数据持久性使移动应用程序更灵敏，使用的带宽更少，而且能够在低带宽场景中更高效地工作。HTML5 提供了一些本地数据持久性选项。第一个选项是 localstorage，它支持您使用一个简单的键值对来存储数据。IndexedDB支持您本地存储大量对象，并使用健壮的数据访问机制检索数据。我们这一节就讲解indexedDB</p>
<p>判断浏览器是否支持</p>
<p>indexedDB是window中的对象，所以使用下面的代码判断</p>
<p>//判断浏览器是否支持本地存储</p>
<p>if (window.indexedDB) {<!-- --></p>
<p>alert("支持");</p>
<p>} else {<!-- --></p>
<p>alert("不支持");</p>
<p>}</p>
<p>新建数据库</p>
<p>使用open方法新建数据库，代码如下</p>
<p>var request = window.indexedDB.open("数据库名称", 版本号);</p>
<p>open方法的作用</p>
<p>open方法的作用是新建或者打开数据库，如果指定的数据库不存在，则创建数据库；如果已经存在，则打开数据库</p>
<p>open方法参数</p>
<p>open方法接受两个参数</p>
<p>第一个参数是数据库名称。因为一个网站可以有多个本地数据库，所以要保证这个数据库名称是唯一的</p>
<p>第二个参数是数据库版本号。每一次改变数据库的结构，比如添加、修改、删除存储对象(表)，都要变更版本号</p>
<p>这里我们着重说一下版本号的注意点。</p>
<p>版本号只能增，不能减。比如上次调用open方法，传入的版本号是2，再次调用的时候修改为1，则会报错</p>
<p>版本号可以为空。当版本号为空时，创建的数据库的版本号为1</p>
<p>实例</p>
<p>运行如下代码</p>
<p>if (window.indexedDB) {<!-- --></p>
<p>//注意我们没有写版本号，则默认为1</p>
<p>var request= window.indexedDB.open("db1");</p>
<p>} else {<!-- --></p>
<p>alert("不支持");</p>
<p>}</p>
<p>下面我们来看看数据库是否创建成功，以chrome为例，按下F12或者Fn+F12，打开开发者工具，选择“Resources”选项卡</p>
<p align="center"><img alt="2015-12-15_120117.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-312f10c039190f8c3fb7a105e25a7de2.png"></p>
<p>我们看到左侧的indexedDB,展开来看看</p>
<p align="center"><img alt="2015-12-15_120635.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-71f052e756a6ee4f69582724df96a82d.png"></p>
<p>这个db1就是我们刚刚创建的数据库，右边展示的是数据库的信息,分别说明了数据库所属的域，名称以及版本号</p>
<p>这是如果我们再次执行上面的代码，则不会再次创建db1数据库，而是打开，因为此数据库已经存在</p>
<p>修改上面的代码，将版本号改为2</p>
<p>if (window.indexedDB) {<!-- --></p>
<p>//注意我们没有写版本号，则默认为1</p>
<p>var request= window.indexedDB.open("db1",2);</p>
<p>} else {<!-- --></p>
<p>alert("不支持");</p>
<p>}</p>
<p>再次执行这段代码，看开发者工具中indexedDB变化(注意，要刷新之后才能看到变化。刷新方法：在indexedDB上右键-“Refresh indexedDB”)</p>
<p align="center"><img alt="2015-12-15_141336.png" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-a564b36381eca7479445e7d14f3af1eb.png"></p>
<p>但是如果现在想再次升级数据库版本，则应将数据库的版本号修改为>2的数字，如果改为<2的数字，比如1，则不会有任何作用</p>
<p>获取创建的数据库</p>
<p>数据库创建好之后，我们需要拿到创建的数据库的引用才能够操作数据库，如创建objectstore(表),操作数据等。</p>
<p>我们注意到open方法的返回值 request 了吗？但是它并是数据库的引用，open方法只是向浏览器发送了一个请求，请求新建或打开某个数据库，对象request有三个重要的事件，我们可以在这些事件中根据不同的情况编写不同的代码，首先我们熟悉一下这几个事件</p>
<p>onerror：当调用open方法发生错误时，会调用这个事件,如open方法中的版本号低于数据库的版本号</p>
<p>onsuccess:open方法成功执行时调用，如成功新建了数据库，或者成功打开了已有的数据库</p>
<p>onupgradeneeded：此事件只有在新建数据库和数据库版本号发生变化时才被调用。注意：此事件发生在onsuccess事件之前</p>
<p>总结：应该将对objectstroe的操作，如创建、修改、删除操作放在onupgradeneeded事件中，而不能放在onsuccess事件中，这些操作数据数据库结构的变更，属于升级操作，而onsuccess事件 |
|
转播
