`
haoningabc
  • 浏览: 1477907 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

indexedDB存图片减少请求

indexdbjavascript
阅读更多
getImageFile()获取网络图片

showImage()加载本地indexedDB图片 
<html >
<head><meta charset="UTF-8"></head>
<body onload="showImage()">
<pre>
通过chrome://indexeddb-internals/# 查看indexdb的存储路径，可以手动删除做测试

基本内容：http://www.ruanyifeng.com/blog/2018/07/indexeddb.html 
https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Using_IndexedDB
例子：
https://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/ 
http://robnyman.github.io/html5demos/indexeddb/

</pre>
<input type="button" value="load picture" onclick="getImageFile()"/>
<input type="button" value="show picture" onclick="showImage()"/>
<figure>
 <img id="elephant" alt="A close up of an elephant">
 <figcaption>A mighty big elephant, and mighty close too!</figcaption>
</figure>
<script type="text/javascript">
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.OIndexedDB || window.msIndexedDB,
    IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.OIDBTransaction || window.msIDBTransaction,
    dbVersion = 1.0;
function getImageFile(){
    var request = indexedDB.open("elephantFiles", dbVersion),
        db,
        createObjectStore = function (dataBase) {
            console.log("Creating objectStore")
            dataBase.createObjectStore("elephants");
        },
        putElephantInDb = function(blob){
            console.log("Putting elephants in IndexedDB");
            // Open a transaction to the database
            var readWriteMode = typeof IDBTransaction.READ_WRITE == "undefined" ? "readwrite" : IDBTransaction.READ_WRITE;
            var transaction = db.transaction(["elephants"], readWriteMode);

            // Put the blob into the dabase
            var put = transaction.objectStore("elephants").put(blob, "image");
        };
        request.onerror = function (event) {
            console.log("Error creating/accessing IndexedDB database");
        };
        request.onsuccess = function (event) {
            console.log("Success creating/accessing IndexedDB database");
            db = request.result;
            db.onerror = function (event) {
                console.log("Error creating/accessing IndexedDB database");
            };
             // 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");               
                    // Blob as response
                    blob = xhr.response;
                    console.log("Blob:" + blob);
                    // Put the received blob into IndexedDB
                    putElephantInDb(blob);
                }
            }, false);
            // Send XHR
            xhr.send();
        }
        // For future use. Currently only in latest Firefox versions
        request.onupgradeneeded = function (event) {
            createObjectStore(event.target.result);
        };
}

function showImage() {
    // Create/open database
    var request = indexedDB.open("elephantFiles", dbVersion),
        db,
        showImage = function (){
            console.log("showImage elephants in IndexedDB");
            // Open a transaction to the database
            var readWriteMode = typeof IDBTransaction.READ_WRITE == "undefined" ? "readwrite" : IDBTransaction.READ_WRITE;
            var transaction = db.transaction(["elephants"], readWriteMode);
            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
                imgElephant.onload = function() {
                    console.log("imgURL:"+imgURL)
                    console.log("this.src:"+this.src)
                    window.URL.revokeObjectURL(this.src);
                }
            };
        };
    request.onerror = function (event) {
        console.log("Error creating/accessing IndexedDB database");
    };
    request.onsuccess = function (event) {
        console.log("Success creating/accessing IndexedDB database");
        db = request.result;
        db.onerror = function (event) {
            console.log("Error creating/accessing IndexedDB database");
        };      
        // Interim solution for Google Chrome to create an objectStore. Will be deprecated
        if (db.setVersion) {
            if (db.version != dbVersion) {
                var setVersion = db.setVersion(dbVersion);
                setVersion.onsuccess = function () {
                    showImage();
                };
            }else {
                showImage();
            }
        }else {
            showImage();
        }
    }
    // For future use. Currently only in latest Firefox versions
    request.onupgradeneeded = function (event) {
        //createObjectStore(event.target.result);
    };
}
</script> 
</body>
</html>
分享到：
| srt学习笔记零：srt总结帖
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    IndexedDB增删改查插件，分别对增删改查进行了封装，调用对应的函数即可

    在浏览器上有两种数据库：webSQL和IndexedDB。但是如果在浏览器上需要用到数据库一般会使用Indexed DB数据库，webSQL基本上已经废弃了，具体原因小伙伴可以下来自己查查。 IndexedDB 是一种底层 API，用于在客户端...

    前端存储之indexedDB例子

    **前端存储之IndexedDB详解** 在现代Web应用中，数据存储变得越来越重要，尤其是在离线存储和大数据量处理方面。IndexedDB是浏览器提供的一种客户端存储解决方案，它允许开发者在用户的浏览器上存储大量的结构化...

    非常简单的indexedDB例子

    IndexedDB 是一种在浏览器中存储大量结构化数据的离线存储解决方案，支持索引，使得数据检索快速高效。它是Web应用程序本地存储的一种重要技术，尤其适用于需要处理大量数据的复杂应用，比如离线应用、数据密集型...

    HTML5本地存储——IndexedDB

    这篇博文将深入探讨IndexedDB的核心概念、用途以及如何在实际项目中运用。 IndexedDB是一种非关系型数据库，它允许在浏览器中存储大量结构化数据，并支持索引，从而可以高效地查询这些数据。与传统的Web存储如...

    indexedDB.js

    前段时间项目需要本地存储聊天数据，使用到indexedDB，经查阅大量文章，终于完成。感觉网上indexedDB的文章不够多，也不够完善，因此把代码分享出来，帮助需要的小伙伴。

    IndexedDB 基本使用.pdf

    IndexedDB 基本使用

    IndexedDB:浏览器里内置的数据库

    这篇博文将深入探讨IndexedDB的原理、用途以及如何在实际项目中应用。 IndexedDB是一种异步的、基于键值对的数据库，不同于传统的Web存储（如localStorage和sessionStorage），它提供了更高级别的结构化数据存储...

    浏览器端indexeddb封装成更简洁易操作的接口

    "浏览器端 indexeddb 封装成更简洁易操作的接口" 这个标题表明我们讨论的主题是关于在Web浏览器环境中对IndexedDB数据库进行的一种优化处理，即创建一个用户友好的API，使得开发者能更方便、高效地进行数据存储和...

    用于管理您的客户端缓存是IndexedDB微小封装支持版本控制和maxage

    IndexedDB 是一种在浏览器中存储大量结构化数据的低级 API，它提供了索引和查询功能，非常适合客户端缓存。这个名为 "money-clip" 的项目似乎是一个针对 IndexedDB 的轻量级封装库，旨在简化数据管理和缓存策略，...

    indexedDB实例

    IndexedDB的设计目标是为了满足Web应用程序对大量数据管理的需求，比如离线应用、数据密集型Web应用等。 ### IndexedDB的基本概念 1. **数据库（Database）**：IndexedDB的核心是数据库，每个数据库都有一个唯一的...

    一个超级简单小型的基于promise采用IndexedDB的健值存储

    - **缓存数据**：加载大量数据时，可以先存储在IndexedDB中，避免每次请求服务器。 - **复杂数据结构**：当需要存储结构化数据，如JSON对象，而LocalStorage无法满足时，选择IndexedDB。 总之，idb-keyval提供了一...

    indexeddb-promise:使用Promise封装IndexedDB

    1. 安装npm包// use npmnpm install --save-dev indexeddb-promise// use yarnyarn add --dev indexeddb-promisescript引入IndexedDB 会被注册为一个全局变量。建议链接到一个可以手动更新的指定版本号：[removed]...

    在windows8、Android、IOS上使用indexedDB

    IndexedDB 是一种在浏览器中存储大量结构化数据的低级离线存储解决方案，支持索引，使得高效查询成为可能。这个技术对Web应用程序尤其有用，因为它允许开发人员创建丰富的、功能丰富的应用程序，即使在没有网络连接...

    html5 web IndexedDB通讯录的实现

    这个通信录的实现就是利用IndexedDB进行数据管理和交互的一个实例。 首先，我们需要理解IndexedDB的基本概念。IndexedDB是一个键值对存储系统，其中每个键都对应一个值。值可以是任意JavaScript类型，包括对象。...

    IndexedDB基本使用共22页.pdf.zip

    IndexedDB操作返回一个请求对象，可以通过监听请求对象的`onsuccess`、`onerror`和`onupgradeneeded`等事件来处理操作结果。 8. 窗口关闭时的数据持久化： IndexedDB的数据是持久化的，即使用户关闭了浏览器，...

    IndexedDB详细demo

    **IndexedDB 详解** IndexedDB 是一种在浏览器中存储大量数据的离线存储技术，它为Web应用程序提供了数据库的功能。这个技术尤其适用于那些需要在本地存储大量结构化数据的应用，如离线阅读应用、Web邮件客户端或者...

    indexeddb-hooked:用于React的IndexedDB适配器

    一个用于React的小型React式IndexedDB绑定。 npm i indexeddb-hooked初始化数据库您将React应用程序与IndexedDBProvider组件连接起来，并在config对象中定义您的模式。 import React from 'react' ;import { ...

    backbonejs框架中indexeddb适配器

    总结来说，"backbonejs框架中indexeddb适配器"是一个用于连接Backbone.js与IndexedDB的工具，它扩展了Backbone.js的功能，使得开发者可以充分利用IndexedDB的本地存储能力，同时保持Backbone.js的开发模式和API一致...

Magicbox
Global site tag (gtag.js) - Google Analytics