一个非常好用的网络图片本地化长期缓存，indexDB，对象代理

let imgSrcDB //这是数据库对象
let imglist = null //这是表对象
if(window.indexedDB){
    console.log('-----支持')
   

//打开数据库
let request = window.indexedDB.open('ImgLocalBase64Src', 2)
request.onerror = function (e) {
    //console.log('数据库打开错误', e)
}
request.onsuccess = function (e) {
    imgSrcDB = request.result
    //console.log('数据库打开成功', e)
}
request.onupgradeneeded = function (e) {
    imgSrcDB = e.target.result
    //console.log('数据库升级成功')
    if (!imgSrcDB.objectStoreNames.contains('imglist')) {
        imglist = imgSrcDB.createObjectStore('imglist', { keyPath: 'name' })
        imglist.createIndex('src', 'src', { unique: false })
    }
}


function add(name, data) {
    //add不用管是否异步
    let request = imgSrcDB.transaction(['imglist'], 'readwrite')
        .objectStore('imglist')
        .add({ name: name, src: data });
    request.onsuccess = function (e) {
        //console.log('写入成功', name)
    }
    request.onerror = function (e) {
        console.log('写入失败', e)
    }
}

function read(name, callback) {
    let objectStore = imgSrcDB.transaction(['imglist']).objectStore('imglist');
    let request = objectStore.get(name);
    request.onerror = function (e) {
        console.log('读取数据事务失败', e);
        callback(null)
    };
    request.onsuccess = function (e) {
        if (e.target.result && e.target.result.src) {
            let res = e.target.result.src
            callback(res)
        } else {
            callback(null)
        }
    };
}



Object.defineProperty(HTMLImageElement.prototype, 'src', {
    set(value) {
        let res = value
        let name = extractNumbers(res).join('')
        let _this = this
        function cb(res) {
            if (res) {
                _this.setAttribute('src', res)
            } else {
                _this.setAttribute('src', value)
                imgUrlToBase64(value)
            }
        }
        read(name, cb)
    },
    get() {
        setTimeout(()=>{
            let res = this.getAttribute('src')
            return res
        },1000)
       
      
    }
})




function imgUrlToBase64(url) {
    let list = url.split('/')
    if (list[0] === 'http:' || list[0] === 'https:') {
        let xhr = new XMLHttpRequest()
        xhr.responseType = 'blob'
        xhr.onload = function () {
            let fileReader = new FileReader()
            fileReader.onload = () => {
                let Imgbase64 = fileReader.result
                saveBase64ImgByDB(url, Imgbase64)
            }
            fileReader.readAsDataURL(xhr.response)
        }
        xhr.open("GET", url);
        xhr.send();
    }
}


async function saveBase64ImgByDB(url, data) {
    let name = extractNumbers(url).join('')
    add(name, data)
}

function extractNumbers(str) {
    const pattern = /\d+/g;
    const matches = str.match(pattern);
    return matches ? matches.map(Number) : [];
}
}