HTML5-indexedDB使用总结

本文详细介绍了HTML5的IndexedDB特性和使用方法,包括其特点如支持事务、持久化存储,兼容性分析,以及如何打开数据库、创建事务、操作对象存储空间,并通过实例代码展示了如何使用upgradeneeded事件。同时强调了IndexedDB的异步操作性质,提供了资源链接以供深入学习。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. 特点

IndexedDB 是一种可以让你在用户的浏览器内持久化存储数据的方法。特点如下:
* 支持事务、游标、索引等数据库操作
* 一般浏览器会分配50M-250M不等的内存
* 持久化存储,清除浏览器缓存不会被删除(localStorage是会被删除的)
* 支持多种数据格式:arrayBuffer、String、Object、Array、File、Blob、ImageData都ok
* 不支持跨域,一个域可以有多个数据库
* 开发中需要谨记的一个特性:异步操作,换句话说,所有操作都需要在回调函数中完成

2. 兼容性

前端在学一项技术时候,往往先关注它的兼容性,再牛的技术,不兼容也是用不到项目中的。

这里写图片描述
这是can i use中指示的情况,我实测的结果是:
* PC端chrome 54上有特殊表现(在第一次打开indexedDB时,upgradeneeded事件不触发),firfox表现正常
* 移动端ios8-ios10 safari支持,但是X5内核不支持;android上X5内核支持

3. 使用

基本使用模式如下:
1. 打开数据库
2. 建立一个事务
3. 在事务请求的回调函数中处理事务处理的结果
4. 使用完毕关闭数据库

3.1 基本概念

数据库

一个数据库由数据库名和其版本两个属性

事务

事务用于操纵数据库中数据,每个事务有不同的模式:readonly、readwrite或者versionchange。简单说下versionchange,在这个事务中,可以读取、更新、删除已经存在的数据,也可以删除和新建对象存储空间(object stores)和索引。该类型事务不能手动创建,但是在upgradeneeded事件被触发时会自动创建。

对象存储空间

object store,我理解类似数据库的表。一个数据库会有多个对象存储空间,对象存储空间中存储着数据。

key

每条数据有一个key,这个key可以是每次存储时用户自己具体决定某个值,可以是用户在新建object store时使用传入对象的某个字段,也可以让数据库自己生成。
这里写图片描述
具体使用如下:

//使用传入对象的某
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值