localStorage
是前端本地存储的一种,其容量一般在 5M-10M
左右,用来缓存一些简单的数据基本够用,毕竟定位也不是大数据量的存储。
在某些场景下 localStorage
的容量就会有点捉襟见肘,其实浏览器是有提供大数据量的本地存储的如 IndexedDB
存储数据大小一般在 250M
以上。
弥补了localStorage
容量的缺陷,但是使用要比localStorage
复杂一些。
IndexDB 是一个运行在浏览器上的非关系型数据库。既然是数据库了,那就不是 5M、10M 这样小打小闹级别了。理论上来说,IndexDB 理论上是没有存储上限的一般来说不会小于 250M)。它不仅可以存储字符串,还可以存储二进制数据。
主要特点
- 键值对储存IndexedDB 内部采用对象仓库(object store)存放数据。所有类型的数据都可以直接存入,包括 JavaScript 对象。对象仓库中,数据以"键值对"的形式保存,每一个数据记录都有对应的主键,主键是独一无二的,不能有重复,否则会抛出一个错误。
- 异步 IndexedDB 操作时不会锁死浏览器,用户依然可以进行其他操作,这与 LocalStorage 形成对比,后者的操作是同步的。异步设计是为了防止大量数据的读写,拖慢网页的表现。
- 支持事务IndexedDB 支持事务(transaction),这意味着一系列操作步骤之中,只要有一步失败,整个事务就都取消,数据库回滚到事务发生之前的状态,不存在只改写一部分数据的情况。
- 同源限制IndexedDB 受到同源限制,每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库,而不能访问跨域的数据库。
- 支持二进制储存IndexedDB 不仅可以储存字符串,还可以储存二进制数据(ArrayBuffer 对象和 Blob 对象。
- 储存空间大IndexedDB 的储存空间比 LocalStorage 大得多,一般来说不少于 250MB,甚至没有上限。储 存 在 电 脑 上 中 的 位 置 为 C:\Users\当 前 的 登 录 用 户\AppData\Local\Google\Chrome\User Data\Default\IndexedDB
基本概念
- 数据库(IDBDatabase 对象)数据库是一系列相关数据的容器。每个域名(严格的说,是协议 + 域名 + 端口)都可以新建任意多个数据库。但是它版本的概念。同一个时刻,只能有一个版本的数据库存在。如果要修改数据库结构(新增或删除表、索引或者主键),只能通过升级数据库版本完成。
- 对象仓库(IDBObjectStore 对象)每个数据库包含若干个对象仓库(object store)。它类似于关系型数据库的表格。
- 索引(IDBIndex 对象)为了加速数据的检索,可以在对象仓库里面,为不同的属性建立索引。
- 事务(IDBTransaction 对象)数据记录的读写和删改,都要通过事务完成。事务对象提供error、abort和complete三个事件监听操作结果。
- 操作请求(IDBRequest 对象)。
- 指针 (IDBCursor 对象)。
- 主键集合 (IDBKeyRange 对象)。
操作步骤
- 定义变量
var db = null;
var db_table = null;
var databaseName = 'indexDB';
var version = 1;
var data = [{
id:1,
name:'张一',
age: 1,
email:'[email protected]'
},{
id:2,
name:'张二',
age: 2,
email:'[email protected]'
},{
id:3,
name:'张三',
age: 3,
email:'[email protected]'
},{
id:4,
name:'张四',
age: 4,
email:'[email protected]'
},{
id:5,
name:'张五',
age: 5,
email:'[email protected]'
}]
- 打开数据仓库
/*
*@databaseName 数据仓库的名字
*@version 数据仓库的版本
*/
var request = window.indexedDB.open(databaseName, version);
/*
*数据仓库打开失败
*/
request.onerror = function (error){
console.log('IndexDB打开失败',error);
}
/*
*数据仓库打开成功
*/
request.onsuccess = function (res){
console.log('IndexDB打开成功',res);
db = res.target.result;
}
/*
*数据仓库升级事件(第一次新建库是也会触发,因为数据仓库从无到有算是升级了一次)
*/
request.onupgradeneeded = function (res){
console.log('IndexDB升级成功',res);
db = res.target.result;
db_table = db.createObjectStore('group', { keyPath: 'id' });
db_table.createIndex('indexName', 'name', { unique: false });
}
- 新建表和创建索引
request.onupgradeneeded = function (res){
console.log('IndexDB升级成功',res);
/*
*返回indexDB对象
*/
db = res.target.result;
/*
*创建数据仓库
*@params 数据仓库名
*@params 数据仓库配置项 keypath:主键,也可以 autoIncrement: true 自动生成
*/
db_table = db.createObjectStore('group', { keyPath: 'id' });
/*
*创建数据索引
*@params 索引名称
*@params 索引所在的属性
*@params 配置对象(说明该属性是否包含重复的值)
*/
db_table.createIndex('indexName', 'name', { unique: false });
}
- 新增数据 新增数据需要通过事务来完成, 写入数据需要新建一个事务, 新建时必须指定表格名称和操作模式("只读"或"读写")。
/*
*新建事务
*@params 数据仓库的数组
*@params 写入模式
*/
var store = db.transaction(['group'], 'readwrite').objectStore('group');
/*
*add方法添加数据
*@params 需要添加的数据信息
*/
var request = store.add({
id:new Date().getTime(),
name:'王二',
age:12,
email:'[email protected]'
});
/*
*添加成功
*/
request.onsuccess = function (event) {
console.log('数据添加成功',event);
};
/*
*添加失败
*/
request.onerror = function (event) {
console.log('数据添加失败',event);
};
- 读取数据
读取数据也是通过事务完成。
/*
*新建事务
*@params 数据仓库的数组
*/
var store = db.transaction(['group']).objectStore('group');
/*
*get方法获取数据
*@params 数据的主键
*/
var request = store.get(1);
/*
*获取成功
*/
request.onsuccess = function (event) {
if(event.target.result){
console.log('数据获取成功',event);
}
else{
console.log('未获取到数据');
}
};
/*
*获取失败
*/
request.onerror = function (event) {
console.log('数据获取失败',event);
};
- 更新数据 更新数据要使用 IDBObject.put()方法
/*
*新建事务
*@params 数据仓库的数组
*@params 写入模式
*/
var store = db.transaction(['group']).objectStore('group');
/*
*put方法根据主键更新数据
*@params 数据的主键
*/
var request = store .put({
id:1,
name:'张一'+Math.random(),
age: 24,
email:'[email protected]'
});
/*
*更新成功
*/
request.onsuccess = function (event) {
console.log('数据更新成功',event);
};
/*
*更新失败
*/
request.onerror = function (event) {
console.log('数据更新失败',event);
};
- 删除数据
/*
*新建事务
*@params 数据仓库的数组
*/
var store = db.transaction(['group']).objectStore('group');
/*
*delete方法删除数据
*@params 数据的主键
*/
var request = store.delete(1);
/*
*删除成功
*/
request.onsuccess = function (event) {
console.log('数据删除成功',event);
};
/*
*删除失败
*/
request.onerror = function (event) {
console.log('数据删除失败',event);
};