theme: nico
本文正在参加「金石计划 . 瓜分6万现金大奖」介绍
特点
- IndexedDB 内部采用对象仓库（object store）存放键值对数据。可以存储结构化克隆算法支持的任何对象。每一个数据记录都有对应的主键，主键是独一无二的，并且不能有重复。
- 使用索引实现对数据的高性能搜索。
- IndexedDB API 大部分都是异步的。不会通过返回值提供数据，而是要传递一个回调函数来获取返回值。
- 同大多数 Web 存储解决方案一样，IndexedDB 遵循同源策略。即可以访问相同域内存储的数据，但无法跨不同域访问数据。
- 可以存储文件、二进制对象。
- 在 Web Worker 中可用。
- IndexedDB 属于 NoSQL 和事务型面向对象数据库系统。对数据库的所有操作，都要通过事务完成。
结构化克隆
结构化克隆是由 HTML5 规范定义的用于复制复杂 JavaScript 对象的算法，例如structuredClone() 函数的调用，Workers 的 postMessage() 方法或使用 IndexedDB 存储对象时在内部的调用。结构化克隆算法使 postMessage() 在 Worker 和主线程之间不再仅仅传输字符串类型，还可以传输包括 File, Blob, ArrayBuffer, JSON 对象类型。支持的类型：
-
symbols除外的所有原始类型。 -
BooleanString原始类型包装对象。 -
ArrayMapSetDateRegExp内置对象。 -
BlobFileFileList文件类型对象。 -
ArrayBufferTypedArrayDataViewBuffer类型对象。 -
ImageBitmapImageData图形对象。 -
Object仅包括普通对象，例如对象字面量。 -
Error,EvalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError错误类型，其他类型错误name属性会被转成Error，message属性会丢失。
IndexedDB 存储文件
下面我们通过在页面中定义一个文件上传按钮，选择图片文件后，会将文件保存到 IndexedDB 数据库中，当我们刷新页面，或关闭页面后，再次进入，会发现图片文件可以从 IndexedDB 数据库中读取，然后在页面中显示。<body>
<label for="fileImg">上传图片</label>
<input type="file" id="fileImg" accept="image/*" hidden>
<p id="result"></p>
</body>
<script>
var eleImg = document.createElement('img');
let db;
const request = indexedDB.open('the_file', 1);
request.onerror = console.log;
request.onsuccess = function(ev) {
console.log('打开');
db = request.result;
db.transaction(db.objectStoreNames).objectStore('files').openCursor().onsuccess = function(event) {
const cursor = event.target.result;
if (cursor) {
console.log(cursor.value);
const img = new Image();
img.src = URL.createObjectURL(cursor.value.file);
result.append(img);
cursor.continue();
}
}
};
request.onupgradeneeded = function(ev) {
console.log('升级');
db = request.result;
if (!db.objectStoreNames.contains('files')) {
const table = db.createObjectStore('files', { keyPath: 'id', autoIncrement: true });
table.createIndex('file', 'file', { unique: false });
}
};
fileImg.onchange = e => {
const file = fileImg.files[0];
const request = db.transaction(['files'], 'readwrite').objectStore('files').add({ file });
request.onsuccess = function(event) {
console.log('数据写入成功');
const img = new Image();
img.src = URL.createObjectURL(file);
result.append(img);
};
request.onerror = function(event) { console.log('数据写入失败'); }
};
</script>
<style>
label {
display: inline-block;
padding: 1em;
border-radius: .5em;
background: red;
color: white;
font-family: Arial, Helvetica, sans-serif
}
</style>
码上掘金
代码片段历史相关文章
- 前端本地存储数据库 IndexedDB 的增删改查
- 前端本地存储数据库 IndexedDB 和 Web SQL、Web Storage 的对比
- 前端本地存储数据库 IndexedDB 的范围查询和对结果计数
感谢您的来访，获取更多精彩文章请收藏本站。
© 版权声明
THE END
暂无评论内容