IndexedDB All In One

IndexedDB All In One

https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

https://developer.mozilla.org/zh-CN/docs/Web/API/IDBObjectStore

Indexed Database API 2.0

W3C Recommendation, 30 January 2018

https://www.w3.org/TR/IndexedDB/

blogs

https://javascript.ruanyifeng.com/bom/indexeddb.html#indexeddb-对象

open / create

let log = console.log;

const openRequest = window.indexedDB.open("idb", 1);
let db;

openRequest.onupgradeneeded = function (e) {
    log("DB Upgrading...", e);
    // db = e.target.result;
}

openRequest.onsuccess = function (e) {
    log("Open DB Success!", e);
    db = openRequest.result;
    log(`DB =`, db);
};

openRequest.onerror = function (e) {
    log("Open DB Error", e);
};

delete DB

let log = console.log;

const DBDeleteRequest = window.indexedDB.deleteDatabase("idb");

DBDeleteRequest.onerror = function (e) {
    log("Delete DB Error", e);
};

DBDeleteRequest.onsuccess = function (e) {
    log("Delete DB Success", e);
};

IDBObjectStore 对象

https://wangdoc.com/javascript/bom/indexeddb.html#idbobjectstore-对象

// DBOpenRequest.

// IDBDatabase

// IDBTransaction

// IDBObjectStore

// DBRequest.

let IDBTransaction = db.transaction(['test'], 'readonly');

let  IDBObjectStore = IDBTransaction.objectStore('test');

objectStore.add(value, key)
objectStore.put(item, key)

objectStore.clear()
objectStore.delete(Key)

IDBObjectStore.count(key)

objectStore.getKey(key)
objectStore.get(key)

// 获取所有记录
objectStore.getAll()

// 获取所有符合指定主键或 IDBKeyRange 的记录
objectStore.getAll(query)

// 指定获取记录的数量
objectStore.getAll(query, count)

// 获取所有记录的主键
objectStore.getAllKeys()

// 获取所有符合条件的主键
objectStore.getAllKeys(query)

// 指定获取主键的数量
objectStore.getAllKeys(query, count)

objectStore.index(name)

objectStore.createIndex(indexName, keyPath, objectParameters)

objectStore.deleteIndex(indexName)

IDBObjectStore.openCursor()

IDBObjectStore.openKeyCursor()

/*

IDBObjectStore.indexNames：返回一个类似数组的对象（DOMStringList），包含了当前对象仓库的所有索引。

IDBObjectStore.keyPath：返回当前对象仓库的主键。

IDBObjectStore.name：返回当前对象仓库的名称。

IDBObjectStore.transaction：返回当前对象仓库所属的事务对象。

IDBObjectStore.autoIncrement：布尔值，表示主键是否会自动递增。

*/

let t = db.transaction(['test'], 'readonly');
let store = t.objectStore('test');

let cursor = store.openCursor();

cursor.onsuccess = function (event) {
  let res = event.target.result;
  if (res) {
    console.log('Key', res.key);
    console.dir('Data', res.value);
    res.continue();
  }
}

---

---

Web Workers

https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers

demo

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 *
 * @description IndexedDB
 * @augments
 * @example
 * @link
 *
 */

// const IndexedDB = (datas = [], debug = false) => {
//     let result = ``;
//     // do something...
//     return result;
// };

// export default IndexedDB;

// export {
//     IndexedDB,
// };

let log = console.log;

// 主线程
const url = `https://cdn.xgqfrms.xyz/json/xgqfrms.json`;
const css = `
    color: #f0f;
    font-size: 23px;
`;
let worker = new Worker("./idb-worker.js");
// 发送数据
worker.postMessage(url);
// 接收数据
worker.onmessage = function(e) {
    log(`\n%c worker 线程 e = `, css, e);
    let json = e.data || {};
    log(`%c worker 线程 data = `, css, JSON.stringify(json, null, 4));
}

setTimeout(() => {
    // 完成任务后, 关掉 Worker
    worker.terminate();
}, 1000 * 100);

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 *
 * @description IndexedDBWorker
 * @augments
 * @example
 * @link
 *
 */

let log = console.log;

log(`hello world!`);

// worker 线程

const css = `
    color: #0ff;
    font-size: 23px;
`;

const css_fd = `
    color: #0f0;
    font-size: 23px;
`;

// callback function
onmessage = function (e){
    console.log(`\n%c 主线程 e = `, css, e);
    // evt.data 接收数据
    let url = e.data;
    // fetch data
    const datas = [];
    // decodeURI()
    console.log(`%c 主线程 url = `, css, `"${url}"`);
    fetch(url)
    .then(res => res.json())
    .then(
        (json) => {
            // console.log(`fetched json = \n`, JSON.stringify(json, null, 4));
            let userInfos = json.user;
            console.log(`%c userInfos = `, css_fd, JSON.stringify(userInfos, null, 4));
            datas.push(userInfos);
            postMessage(userInfos);
            // 发送数据
        }
    )
    .catch(err => log(`fetch error = \n`, err));
}

// const IndexedDBWorker = (datas = [], debug = false) => {
//     let result = ``;
//     // do something...
//     return result;
// };

// export default IndexedDBWorker;

// export {
//     IndexedDBWorker,
// };

self & this

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 *
 * @description IndexedDBWorker
 * @augments
 * @example
 * @link
 *
 */

let log = console.log;

// worker 线程

const css = `
    color: #0ff;
    font-size: 23px;
`;

const css_fd = `
    color: #0f0;
    font-size: 23px;
`;

// self 代表子线程自身，即子线程的全局对象

log(`worker self =`, self);
// DedicatedWorkerGlobalScope

let name = self.name;
log(`worker name =`, name);

// BAD
// self.addEventListener(`meassge`, function (e) {
//     log(`self.addEventListener("meassge", function (e) {});`);
//     log(`\n%c 主线程 e = `, css, e);
//     // evt.data 接收数据
//     let url = e.data;
//     log(`%c 主线程 url = `, css, `"${url}"`);
// });

// BAD
// self.addEventListener(`meassge`, (e) => {
//     log(`self.addEventListener("meassge", (e) => {});`);
//     log(`\n%c 主线程 e = `, css, e);
//     // evt.data 接收数据
//     let url = e.data;
//     log(`%c 主线程 url = `, css, `"${url}"`);
// });

// 写法一 OK
// this.addEventListener("message", function (e) {
//     log(`this.addEventListener("message", function (e) {});`);
//     log(`\n%c 主线程 e = `, css, e);
//     // evt.data 接收数据
//     let url = e.data;
//     log(`%c 主线程 url = `, css, `"${url}"`);
// }, false);

// 写法二 OK
// addEventListener("message", function (e) {
//     log(`addEventListener("message", function (e) {});`);
//     log(`\n%c 主线程 e = `, css, e);
//     // evt.data 接收数据
//     let url = e.data;
//     log(`%c 主线程 url = `, css, `"${url}"`);
// }, false);

// OK
self.onmessage = function (e){
    log(`self.onmessage = function (e) {});`);
    log(`\n%c 主线程 e = `, css, e);
    // evt.data 接收数据
    let url = e.data;
    log(`%c 主线程 url = `, css, `"${url}"`);
};

// OK
// onmessage = function (e){
//     log(`onmessage = function (e) {});`);
//     log(`\n%c 主线程 e = `, css, e);
//     // evt.data 接收数据
//     let url = e.data;
//     log(`%c 主线程 url = `, css, `"${url}"`);
// };

// Worker 线程
// self.close();

// callback function
// onmessage = function (e){
//     console.log(`\n%c 主线程 e = `, css, e);
//     // evt.data 接收数据
//     let url = e.data;
//     // fetch data
//     const datas = [];
//     // decodeURI()
//     console.log(`%c 主线程 url = `, css, `"${url}"`);
//     fetch(url)
//     .then(res => res.json())
//     .then(
//         (json) => {
//             // console.log(`fetched json = \n`, JSON.stringify(json, null, 4));
//             let userInfos = json.user;
//             console.log(`%c userInfos = `, css_fd, JSON.stringify(userInfos, null, 4));
//             datas.push(userInfos);
//             postMessage(userInfos);
//             // 发送数据
//         }
//     )
//     .catch(err => log(`fetch error = \n`, err));
// };

// onmessage = (e) => {
//     let log = console.log;
//     log(`e =`, e);

//     // // TODO ??? WebSockets header & token
//     const url = `ws://10.1.64.142:8080/chat/?token=00`;
//     // const url = `ws://10.1.64.142:8080/chat/?token=03977977-6ac7-4336-b799-90358d351b5c`;

//     let ws = new WebSocket(url);

//     ws.onopen = function(e) {
//         log(`已经建立连接 open`, ws.readyState);
//         log(`e = `, e);
//         subscribe();
//     };

//     ws.onerror = function(e) {
//         log(`连接异常 error`, ws.readyState);
//         log(`e = `, e);
//     };

//     ws.onmessage = function(res) {
//         log(`A 收到消息 message`, ws.readyState);
//         let data = res.data;
//         let origin = res.origin;
//         // log(`res & e = `, res);
//         data = JSON.parse(data);
//         // log(`typeof(data) = `, typeof(data));
//         log(`res.data = `, JSON.stringify(data, null, 4));
//         log(`res.origin = `, origin);
//         // postMessage(data);
//     };

//     ws.onclose = function(e) {
//         log(`已经关闭连接 close`, ws.readyState);
//         log(`e = `, e);
//     };

//     const subscribe = () => {
//         let msg = {
//             Action: "4",
//             SendUserID: "6845488",
//             ReciveUserID: "6845422",
//             SerialNumber: "消息序列",
//             LastReciveMsgId: null,
//             LastReciveMsgIds: [{
//                 K: "6845422",
//                 V: null,
//             }],// 最后一条消息
//             AllUser: true, // 所有用户, boolean
//         };
//         log(`A 订阅所有用户消息`);
//         let str_msg = JSON.stringify(msg);
//         ws.send(str_msg);
//     };

//     let flag = setInterval(() => {
//         let uid = new Date().getTime();
//         // let msg = {
//         //     Action: "1",
//         //     SendUserID: "6845488",
//         //     ReciveUserID: "6845422",
//         //     SerialNumber: "消息序列",
//         //     Info: "消息内容 A",
//         //     MsgID: uid,
//         //     MsgType: "1", // 消息类型（1-文本、2-图片、3-表情、4-视频、5-音频）
//         // };
//         let msg = {
//             Action: "1",
//             SendUserID: "6845488",
//             ReciveUserID: "6845422",
//             SerialNumber: `A 消息序列 ${uid}`,
//             Info: "消息内容 A",
//             MsgID: uid,
//             MsgType: 1,
//         };
//         log(`A 发送消息:`, JSON.stringify(msg, null, 4));
//         let str_msg = JSON.stringify(msg);
//         ws.send(str_msg);
//         postMessage(msg);
//     }, 3000);

//     setTimeout(() => {
//         clearInterval(flag);
//     }, 60 * 1000);
// };

// const IndexedDBWorker = (datas = [], debug = false) => {
//     let result = ``;
//     // do something...
//     return result;
// };

// export default IndexedDBWorker;

// export {
//     IndexedDBWorker,
// };

bug

Failed to execute 'importScripts' on 'WorkerGlobalScope':

"use strict";

/**
 *
 * @author xgqfrms
 * @license MIT
 * @copyright xgqfrms
 *
 * @description IndexedDBWorker
 * @augments
 * @example
 * @link
 *
 */

let log = console.log;

// worker 线程
let name = self.name;
log(`worker name =`, name);

// importScripts("./set-red-point.js");
// self.importScripts("./set-red-point.js");
// self.importScripts("set-red-point.js");

onmessage = (e) => {
    let log = console.log;
    const css = `
        color: #0ff;
        font-size: 23px;
    `;

    const css_fd = `
        color: #0f0;
        font-size: 23px;
    `;
    console.log(`\n%c 主线程 e = `, css, e);
    let URI = e.data;
    // fetch data
    const datas = [];
    // decodeURI()
    // console.log(`%c 主线程 url = `, css, `"${URI}"`);
    log(`e =`, e);
    // TODO ??? WebSockets header & token
    // const url = `${URI}/?token=00`;
    const url = `ws://10.1.64.142:8080/chat/?token=00`;
    console.log(`ws url = `, url);
    // const url = `ws://10.1.64.142:8080/chat/?token=03977977-6ac7-4336-b799-90358d351b5c`;
    let ws = new WebSocket(url);
    // window.WS = ws;
    // window.ws = ws;
    // let ws = window.WS;
    // let ws = Vue.prototype.$WS;
    // log(`WS =`, window.WS);

    ws.onopen = function(e) {
        log(`已经建立连接 open`, ws.readyState);
        log(`e = `, e);
        fetchList();
        IndexDBDemo();
        // subscribe();
        // autoSendText();
    };

    ws.onerror = function(e) {
        log(`onerror ws.readyState`, ws.readyState);
        log(`连接异常 error`, ws.readyState);
        log(`e = `, e);
    };

    ws.onmessage = function(res) {
        log(`onmessage ws.readyState`, ws.readyState);
        log(`A 收到消息 message`);
        let data = res.data;
        let origin = res.origin;
        // log(`res & e = `, res);
        data = JSON.parse(data);
        // log(`typeof(data) = `, typeof(data));
        log(`res.data = `, JSON.stringify(data, null, 4));
        log(`res.origin = `, origin);
        // postMessage(data);
    };

    ws.onclose = function(e) {
        log(`onclose ws.readyState`, ws.readyState);
        log(`已经关闭连接 close`, ws.readyState);
        log(`e = `, e);
    };

    const fetchList = () => {
        let msg = {
            Action: "12",
        };
        log(`A 消息列表1`);
        let str_msg = JSON.stringify(msg);
        log(`A 消息列表`, str_msg);
        ws.send(str_msg);
    };

    const subscribe = () => {
        let msg = {
            Action: "4",
            SendUserID: "6845488",
            ReciveUserID: "6845422",
            SerialNumber: "消息序列",
            LastReciveMsgId: null,
            LastReciveMsgIds: [{
                K: "6845422",
                V: null,
            }],// 最后一条消息
            AllUser: true, // 所有用户, boolean
        };
        log(`A 订阅所有用户消息`);
        let str_msg = JSON.stringify(msg);
        ws.send(str_msg);
    };

    const autoSendText = () => {
        let flag = setInterval(() => {
            let uid = new Date().getTime();
            // let msg = {
            //     Action: "1",
            //     SendUserID: "6845488",
            //     ReciveUserID: "6845422",
            //     SerialNumber: "消息序列",
            //     Info: "消息内容 A",
            //     MsgID: uid,
            //     MsgType: "1", // 消息类型（1-文本、2-图片、3-表情、4-视频、5-音频）
            // };
            let msg = {
                Action: "1",
                SendUserID: "6845488",
                ReciveUserID: "6845422",
                SerialNumber: `A 消息序列 ${uid}`,
                Info: "消息内容 A",
                MsgID: uid,
                MsgType: 1,
            };
            log(`A 发送消息:`, JSON.stringify(msg, null, 4));
            let str_msg = JSON.stringify(msg);
            ws.send(str_msg);
            postMessage(msg);
        }, 3000);

        setTimeout(() => {
            clearInterval(flag);
        }, 60 * 1000);
    };
};

const IndexDBDemo = ( debug = false) => {
    log(`indexeddb created`)
    // let indexedDB = window.indexedDB;
    let dbVersion = 1;
    // step 01, open
    let idb_connect = indexedDB.open("test_db", dbVersion);
    // IDBOpenDBRequest & {onblocked: null, onupgradeneeded: null, source: null, transaction: null, readyState: "pending", …}

    // idb_connect.onsuccess = function(e) {
    //     let log = console.log;
    //     let db = idb_connect.result;
    //     setTimeout(() => {
    //         // index & looks up
    //         let tx = db.transaction("books", "readonly");
    //         let opened_store = tx.objectStore("books");
    //         let index = opened_store.index("by_title");
    //         // query
    //         let request = index.get("Bedrock Nights");
    //         request.onsuccess = function() {
    //             let matching = request.result;
    //             if (matching !== undefined) {
    //                 let {
    //                     isbn,
    //                     title,
    //                     author,
    //                 } = matching;
    //                 log(`A match was found.`, isbn, title, author);
    //             } else {
    //                 log(`No match was found.`);
    //             }
    //         };
    //     }, 3000);
    // };
    idb_connect.onsuccess = function(e) {
        let readyState = idb_connect.readyState;
        console.log("Success creating/accessing IndexedDB database", readyState);
        let idb = idb_connect.result;
        // step 02, idb
        idb.onerror = function(e) {
            let name = idb.name;
            let version = idb.version;
            let objectStoreNames = idb.objectStoreNames;
            let length = objectStoreNames.length;
            let error = idb.error;
            console.log("Error creating/accessing IndexedDB", error);
        };
        idb.onabort = function(e) {
            let name = idb.name;
            let version = idb.version;
            let objectStoreNames = idb.objectStoreNames;
            let length = objectStoreNames.length;
            console.log("onabort & IndexedDB", name, version);
        };
        idb.onversionchange = function(e) {
            let name = idb.name;
            let version = idb.version;
            let objectStoreNames = idb.objectStoreNames;
            let length = objectStoreNames.length;
            console.log("onversionchange & IndexedDB", name, version);
        };
        idb.onclose = function(e) {
            let name = idb.name;
            let version = idb.version;
            let objectStoreNames = idb.objectStoreNames;
            let length = objectStoreNames.length;
            console.log("onclose & IndexedDB", name, version);
        };
    };

    idb_connect.onerror = function(e) {
        let error = idb_connect.error;
        console.log("Error creating/accessing IndexedDB database", error);
    };

    idb_connect.onblocked = function(e) {
        let source = idb_connect.source;
        console.log("onblocked & IndexedDB database", source, transaction);
    };

    // idb_connect.onupgradeneeded = function(e) {
    //     let source = idb_connect.source;
    //     let transaction = idb_connect.transaction;
    //     console.log("onupgradeneeded & IndexedDB database", source, transaction);
    // };
    // connect upgradeneeded
    idb_connect.onupgradeneeded = function(e) {
        let {
            // name,
            // version,
            // objectStoreNames,
            // error,
            source,
            transaction,
        } = idb_connect;
        // let source = idb_connect.source;
        // let transaction = idb_connect.transaction;
        log("onupgradeneeded & IndexedDB database", source, transaction);
        // The database did not previously exist, so create object stores and indexes.
        let db = idb_connect.result;
        let store = db.createObjectStore("books", {keyPath: "isbn"});
        // create index
        let titleIndex = store.createIndex("by_title", "title", {unique: true});
        let authorIndex = store.createIndex("by_author", "author");
        // Populate with initial data.
        store.put({
            title: "Quarry Memories",
            author: "Fred",
            isbn: 123456,
        });
        store.put({
            title: "Water Buffaloes",
            author: "Fred",
            isbn: 234567,
        });
        store.put({
            title: "Bedrock Nights",
            author: "Barney",
            isbn: 345678,
        });
        setTimeout(() => {
            // transaction & update
            let tx = db.transaction("books", "readwrite");
            let opened_store = tx.objectStore("books");
            opened_store.put({
                title: "Quarry Memories",
                author: "Fred",
                isbn: 123456,
            });
            opened_store.put({
                title: "Water Buffaloes",
                author: "Fred",
                isbn: 234567,
            });
            opened_store.put({
                title: "Bedrock Nights",
                author: "Barney",
                isbn: 345678,
            });
            tx.oncomplete = function() {
                log(`All requests have succeeded and the transaction has committed.`);
            };
        }, 3000);
        setTimeout(() => {
            // index & looks up
            let tx = db.transaction("books", "readonly");
            let opened_store = tx.objectStore("books");
            let index = opened_store.index("by_title");
            // query
            let request = index.get("Bedrock Nights");
            request.onsuccess = function() {
                let matching = request.result;
                if (matching !== undefined) {
                    let {
                        isbn,
                        title,
                        author,
                    } = matching;
                    log(`A match was found.`, isbn, title, author);
                } else {
                    log(`No match was found.`);
                }
            };
        }, 3000);
    };
    return idb_connect;
};

// importScripts("./set-red-point.js");
// self.importScripts("./set-red-point.js");

// Worker 线程
// setTimeout(() => {
//     log(`\n%c 关掉 worker 线程`, css);
//     // 完成任务后, 关掉 Worker
//     // worker.terminate();
//     self.close();
// }, 1000 * 10);

// const IndexedDBWorker = (datas = [], debug = false) => {
//     let result = ``;
//     // do something...
//     return result;
// };

// export default IndexedDBWorker;

// export {
//     IndexedDBWorker,
// };

refs

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---