浏览器数据库-indexDB
近日项目有个需求,缓存用户填写表单的数据,如果在断电,或者关闭浏览器的情况下能储存用户输入的数据,第一时间我就想到了用localStorage,localStorage能储存5M的数据,用来储存表单数据也还行,但是储存稍微大点的数据还是有点吃力,突然想到浏览器也有数据库呀,indexDB能储存250M以上,足够使用了,所以想尝试一下
indexDB
indexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然WEB Storage在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。
indexedDB 是一个事务型数据库系统，类似于基于 SQL 的 RDBMS。 然而，不像 RDBMS 使用固定列表，indexedDB 是一个基于 JavaScript 的面向对象数据库。indexedDB 允许您存储和检索用键索引的对象；可以存储结构化克隆算法支持的任何对象。您只需要指定数据库模式，打开与数据库的连接，然后检索和更新一系列事务。 正如大多数的 web 储存解决方案一样，indexedDB 也遵守同源策略。因此当你在某个域名下操作储存数据的时候，你不能操作其他域名下的数据。（就例如在本地的存放位置不同，就相当于有不同的域名，所以客户端所展示出来的页面内容，返回的数据也是不一样的） indexedDB是HTML5规范里新出现的浏览器里内置的数据库。对于在浏览器里存储数据，你可以使用cookies或local storage，但它们都是比较简单的技术，而IndexedDB提供了类似数据库风格的数据存储和使用方式。存储在IndexedDB里的数据是永久保存，不像cookies那样只是临时的。IndexedDB里提供了查询数据的功能，在online和offline模式下都能使用。你可以用indexedDB存储大型数据。 indexedDB里数据以对象的形式存储，每个对象都有一个key值索引。IndexedDB里的操作都是事务性的。一种对象存储在一个objectStore里，objectStore就相当于关系数据库里的表。IndexedDB可以有很多objectStore，objectStore里可以有很多对象。
dexie.js
dexie.js是一个对浏览器indexexDB的包装库,使得我们可以更方便地操作indexedDB
下载
npm install dexie使用
import Dexie from 'dexie';
const indexedDB =
window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
if (!indexedDB) {
console.err('浏览器不支持indexedDB');
}
const db = new Dexie('admin-store'); //创建数据库
db.version(1).stores({
admin: 'name, data', // Primary key and indexed props 创建数据表
});
//添加或者修改数据
export const tableAddOrPut = (tableName, data) => {
db[tableName].put(data);
};
//根据主键获取某一条数据
export const tableGetItem = (tableName, tableKey) => {
return new Promise((resolve) => {
const data = db[tableName].get(tableKey);
resolve(data);
});
};
//获取表格的所有数据
export const tableGetAll = (tableName) => {
return new Promise((resolve) => {
const data = db[tableName].toArray();
resolve(data);
});
};
//根据主键删除某个数据
export const tableDel = (tableName, tableKey) => {
db[tableName].delete(tableKey);
};