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
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-2021
www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！
原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！
本文首发于博客园，作者：xgqfrms，原文链接：https://www.cnblogs.com/xgqfrms/p/11242198.html
未经授权禁止转载，违者必究！
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· .NET10 - 预览版1新功能体验（一）
2018-07-25 no targe blank & rel noopener & rel noreferrer
2018-07-25 ice & react
2018-07-25 OOP === Object Oriented Programming