目标:
- 创建和大概数据库(省略)
- 创建对象存储(省略)
- 以BLOB形式获取图片文件
- 启动数据库事务(省略)
- 保存blob到数据库
- 读取保存文件,创建ObjectURL在页面展示
以blob形式获取图片文件:
// Create XHR
var xhr = new XMLHttpRequest(),
blob;
xhr.open("GET", "elephant.png", true);
// Set the responseType to blob
xhr.responseType = "blob";
xhr.addEventListener("load", function () {
if (xhr.status === 200) {
console.log("Image retrieved");
// File as response
blob = xhr.response;
// Put the received blob into IndexedDB
putElephantInDb(blob);
}
}, false);
// Send XHR
xhr.send();
保存blob到数据库:
transaction.objectStore("elephants").put(blob, "image");
读取保存文件,创建ObjectURL在页面展示:
// Retrieve the file that was just stored
transaction.objectStore("elephants").get("image").onsuccess = function (event) {
var imgFile = event.target.result;
console.log("Got elephant!" + imgFile);
// Get window.URL object
var URL = window.URL || window.webkitURL;
// Create and revoke ObjectURL
var imgURL = URL.createObjectURL(imgFile);
// Set img src to ObjectURL
var imgElephant = document.getElementById("elephant");
imgElephant.setAttribute("src", imgURL);
// Revoking ObjectURL
URL.revokeObjectURL(imgURL);
};
分享到:
相关推荐
1. 安装npm包// use npmnpm install --save-dev indexeddb-promise// use yarnyarn add --dev indexeddb-promisescript引入IndexedDB 会被注册为一个全局变量。建议链接到一个可以手动更新的指定版本号:[removed]...
在浏览器上有两种数据库:webSQL和IndexedDB。但是如果在浏览器上需要用到数据库一般会使用Indexed DB数据库,webSQL基本上已经废弃了,具体原因小伙伴可以下来自己查查。 IndexedDB 是一种底层 API,用于在客户端...
一个用于React的小型React式IndexedDB绑定。 npm i indexeddb-hooked初始化数据库您将React应用程序与IndexedDBProvider组件连接起来,并在config对象中定义您的模式。 import React from 'react' ;import { ...
IndexedDB简介:浏览器内数据库 应用程序需要数据。 对于大多数Web应用程序,数据存储在服务器上进行组织和管理,并通过网络请求将其提供给客户端。 随着浏览器的功能越来越强大,用于存储和操作应用程序数据的选项...
使用 IndexedDB 和缓存提高性能这是 LinkedIn 学习课程使用 IndexedDB 和缓存提高性能的存储库。 完整课程可从。 随着开发人员努力创建高效工作且可以容忍不可靠网络连接的 Web 应用程序,缓存和本地存储方法变得...
Cordova的异步IndexedDB插件 特征 使用填充不支持IndexedDB的设备 在Windows设备上使用 在iOS设备上使用 可以选择通过替换设备上的本机IndexedDB 可以选择在设备上增强本机IndexedDB 这个插件基本上是一个Indexed...
NuGet安装PM > Install-Package Reshiru.Blazor.IndexedDB.Framework当前功能连接并创建数据库添加记录删除记录编辑记录如何使用在您的startup.cs文件中添加 services . AddSingleton (); IIndexedDbFactory用于创建...
带有承诺的轻量级(gzip压缩)钩子,可在React中轻松访问IndexedDB :anchor: :wrench: 安装 npm i use-indexeddb # npm yarn add use-indexeddb # yarn :books: 故事书 :sparkles: 特征 :leaf_fluttering_in_...
#BabylonJS IndexedDB 后端这个 BabylonJS(2.1 及更高版本)扩展保留添加到特定场景的所有网格。 当网格发生变化时,它也会更新数据库。 除此之外,所有几何图形也保存在不同的数据存储中,并且在用户更新它们时也...
IndexedDB 基本使用
前段时间项目需要本地存储聊天数据,使用到indexedDB,经查阅大量文章,终于完成。感觉网上indexedDB的文章不够多,也不够完善,因此把代码分享出来,帮助需要的小伙伴。
WebSQL到IndexedDB的示例:待办事项列表示例,显示如何将WebSQL转换为IndexedDB
结果我放弃了开发,直到 indexeddb 得到更广泛的实现和更一致的 ** 安装 ember install:addon ember-cli-indexeddb-wrapper ember g indexeddb-service 这将生成一个文件,您可以使用该文件来配置服务 // ...
NULL 博文链接:https://weistar.iteye.com/blog/2186673
用于管理您的客户端缓存,是IndexedDB微小封装支持版本控制和max age
一个 angularjs 服务提供者,使用带有 angular 的 indexedDB ####Important:这个存储库不再由我维护。 查看当前版本,因为接任成为主要贡献者。 安装 建议使用 Bower 进行安装。 鲍尔 在命令行上调用以下命令: ...
非常简单的indexedDB例子,自己按照书上面写的, 用的是 visual studio 2012 做的 mvc3 程序。
ngx-indexed-db ngx-indexed-db是一项服务,结合了ngx-indexed-db ,将IndexedDB数据库包装在Angular服务中。安装$ npm install ngx-indexed-db或者$ yarn add ngx-indexed-db用法导入NgxIndexedDBModule并启动它: ...
html5 indexeddb 存储
从IndexedDB导出并导入另一个IndexedDB的Javascript代码,以便导出所有“ Great Suspender”保存的会话,并将它们导入到另一个扩展的IndexedDB(如果兼容)中,或在先前版本的“ The Great Suspender”中导入 ...