本文摘自PHP中文网,作者巴扎黑,侵删。
IndexedDB 是一种低级API,用于客户端存储大量结构化数据(包括, 文件/ blobs)。下面通过本文重点给大家介绍HTML5本地存储之IndexedDB的相关知识,感兴趣的朋友一起看看吧IndexedDB 是一种低级API,用于客户端存储大量结构化数据(包括, 文件/ blobs)。该API使用索引来实现对该数据的高性能搜索。
最近有一项业务需求,就是可以离线存储数据,等到有网络信号的时候可以上传表单和图片。所以研究了一下HTML5的IndexedDB。
对于只存储某些字段的需求来说,可以使用Local Storage和 Session Storage来完成。但是一旦存储大量的数据,Local Storage和 Session Storage就远远不能满足需求了。这时,IndexedDB的强大之处就会体现出来了。
1、创建或者打开数据库
1 2 3 4 |
|
因为indexedDB在不同的浏览器上有兼容性,所以我们需要些一个兼容函数来兼容indexedDB。
2、连接到数据库的回调函数
1 2 3 4 5 6 7 8 9 |
|
在连接到数据库后,request会监听三种状态:
success:打开或创建数据库成功
error:打开或创建数据库失败
upgradeneeded:更新数据库
upgradeneeded状态是在indexedDB创建新的数据库时和indexeddb.open(name, version) version(数据库版本号)发生变化时才能监听到此状态。当版本号不发生变化时,不会触发此状态。数据库的ObjectStore的创建、删除等都是在这个监听事件下执行的。
3、创建、删除ObjectStore
在indexedDB中,ObjectStore类似于数据库的表。
1 2 3 4 5 6 7 8 9 10 |
|
可以用如下方法创建一个ObjectStore
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
4、数据的增删改查
相关阅读 >>
实例讲解h5移动开发ajax上传多张base64格式图片到服务器
html5实践-在非响应式设计中如何使用viewport meta标签的方法介绍
更多相关阅读请进入《indexeddb》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者