HTML5 本地存储--浏览器数据库 IndexedDB的介绍
1.背景
随着浏览器的功能不断增强,越来越多的网站开始考虑,将大量数据储存在客户端,这样可以减少从服务器获取数据,直接从本地获取数据。现有的浏览器数据储存方案,都不适合储存大量数据:Cookie 的大小不超过4KB,且每次请求都会发送回服务器;LocalStorage 在 2.5MB 到 10MB 之间(各家浏览器不同),而且不提供搜索功能,不能建立自定义的索引。所以,需要一种新的解决方案,这就是 IndexedDB 诞生的背景。
2.含义
IndexedDB 就是浏览器提供的本地数据库,它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据,提供查找接口,还能建立索引。这些都是 LocalStorage 所不具备的。
3.特点
- 键值对储存。 IndexedDB 内部采用对象仓库存放数据。所有类型的数据都可以直接存入,包括 JavaScript对象。对象仓库中,数据以"键值对"的形式保存,每一个数据记录都有对应的主键,主键是独一无二的,不能有重复,否则会抛出一个错误。
- 异步。 IndexedDB 操作时不会锁死浏览器,用户依然可以进行其他操作,这与 LocalStorage 形成对比,后者的操作是同步的。异步设计是为了防止大量数据的读写,拖慢网页的表现。
- 支持事务。 IndexedDB 支持事务(transaction),这意味着一系列操作步骤之中,只要有一步失败,整个事务就都取消,数据库回滚到事务发生之前的状态,不存在只改写一部分数据的情况。
- 同源限制。 IndexedDB 受到同源限制,每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库,而不能访问跨域的数据库。
- 储存空间大。 IndexedDB 的储存空间比 LocalStorage 大得多,一般来说不少于 250MB,甚至没有上限。
- 支持二进制储存。 IndexedDB 不仅可以储存字符串,还可以储存二进制数据。
4.基本使用
1. 打开数据库
var request = window.indexedDB.open(databaseName, version); //数据库名称和版本
(1)success 事件
request.onsuccess = function (event) {
db = request.result;
console.log('数据库打开成功');
};
(2)error 事件
//数据库打开失败
request.onerror = function () {
alert("数据库打开失败");
};
(3)upgradeneeded 事件
// 数据库版本升级事件
request.onupgradeneeded = function (e) {
db = e.target.result;
var objectStore; //表格
if (!db.objectStoreNames.contains("person")) {
objectStore = db.createObjectStore("person", {
keyPath: "id", //主键
autoIncrement: true,
});
//建立索引
objectStore.createIndex("name", "name", { unique: true });
objectStore.createIndex("age", "age", { unique: false });
objectStore.createIndex("email", "email", { unique: false });
}
console.log("数据库版本升级");
};
2.增加数据
//事务
var transaction = db.transaction([‘person’],’readwrite’)
Var objectStore = transaction.objectStore(‘person’)
Var request = objectStore.add()
request.onsuccess = ()=>{}
request.onerror = ()=>{}
3.更新数据
var request = objectStore.put()
request.onsuccess = ()=>{}
request.onerror = ()=>{}
4.查看数据
var request = objectStore.getAll()
var request = objectStore.get(id)
request.onsuccess = ()=>{}
request.onerror = ()=>{}
5.删除数据
var request = objectStore.delete()
request.onsuccess = ()=>{}
request.onerror = ()=>{}
6.删除数据库
indexedDB.deleteDatabase()