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-2020
www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！
IndexedDB All In One的更多相关文章
- IndexedDB（本地存储）
var students = [{ id: 1001, name: "Byron", age: 24 }, { id: 1002, name: "Frank", ...
- HTML5存储之 indexedDB
IndexeDB是HTML5 重要的一部分,它是一种轻量级的NOSQL数据库.对创建具有丰富本地存储数据的数据密集型的离线HTML5 Web 应用程序很有用. IndexedDB是为了能够在客户端存储 ...
- Notes:indexedDB使用
indexedDB是浏览器端保存结构化数据的一种数据库,类似于mysql,oracle等数据库,但indexedDB使用对象存储数据,而不是用表. indexedDB是全局的宿主对象,使用window ...
- HTML5本地存储——IndexedDB（一：基本使用）
在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...
- IndexedDB参考资料网址
IndexedDB:浏览器里内置的数据库, Web骇客 http://www.webhek.com/indexeddb/ 前端的数据库:IndexedDB入门(很全面) http://web.jobb ...
- HTML5本地存储——IndexedDB（二：索引）
在HTML5本地存储——IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexedDB的杀器——索引. 熟悉数据库的同学都知道索引的一个好处 ...
- js IndexedDB：浏览器端数据库的demo实例
IndexedDB具有以下特点. (1)键值对储存. IndexedDB内部采用对象仓库(object store)存放数据.所有类型的数据都可以直接存入,包括JavaScript对象.在对象仓库中, ...
- Web数据持久化存储IndexedDB（不常用）
IndexedDB是在浏览器中保存结构化数据的一种数据库,为了替换WebSQL(标准已废弃,但被广泛支持)而出现.IndexedDB使用NoSQL的形式来操作数据库,保存和读取是JavaScript对 ...
- [转]使用 HTML5 IndexedDB API
本地数据持久性提高了 Web 应用程序可访问性和移动应用程序响应能力 索引数据库 (IndexedDB) API(作为 HTML5 的一部分)对创建具有丰富本地存储数据的数据密集型的离线 HTML5 ...
- HTML5 indexedDB数据库的入门学习（二）
上一篇关于indexedDB的学习笔记主要写了indexedDB数据库的基本操作—增删改查:但是为什么我们要用indexedDB呢?为什么indexedDB受到了开发者们的青睐呢?最主要的就是inde ...
随机推荐
- SumatraPDF设置护眼背景
高级选项中: 1 FixedPageUI [ 2 TextColor = #000000 3 BackgroundColor = #C7EDCC 4 SelectionColor = #f5fc0c ...
- 强连通分量 与 2-SAT
近期一直在刷这方面的题 因为没法学新知识 但又想写点什么 就水篇博文吧 引理 简单来说,在一个有向图中,若所有点之间两两互相直接可达,则将这个图成为强连通分量 强连通分量可以是某个有向图中的子图 求强 ...
- LOJ10068 秘密的牛奶运输
LOJ10068秘密的牛奶运输 题目描述 Farmer John 要把他的牛奶运输到各个销售点.运输过程中,可以先把牛奶运输到一些销售点,再由这些销售点分别运输到其他销售点. 运输的总距离越小,运输的 ...
- 你的隐私数据真的安全吗之memset（）使用分析
我们在实际编程中,需要保存许多私有数据,例如:密码.密钥等等.所以,我们需要经常在使用完这些私有数据后,清除内存使用踪迹,以防止被潜在的入侵者获得这些数据.这篇文章中,我们讨论使用memset()函数 ...
- Linux CGroup入门
Linux cgroup Linux CGroup全称Linux Control Group, 是Linux内核的一个功能,用来限制,控制与分离一个进程组群的资源(如CPU.内存.磁盘输入输出等).L ...
- HTML5 学习表格应用
<table> <tr> ---tr 定义行 <td>第1个单元格的内容</td> ----td 定义列 <td>第2个单元格的内容< ...
- apache 创建多端口监听
httpd.conf 将 #LoadModule vhost_alias_module modules/mod_vhost_alias.so 改为 LoadModule vhost_alias_mod ...
- jvm系列五-java内存模型(2)
原作者系列文章链接:并发编程系列博客传送门 前言# 在网上看了很多文章,也看了好几本书中关于JMM的介绍,我发现JMM确实是Java中比较难以理解的概念.网上很多文章中关于JMM的介绍要么是照搬了一些 ...
- Qt项目的发布
Qt项目的发布 (1)首先将项目调为发布版 (2)找到缺失的DLL文件 发布好了后,双击生成的exe文件可能会出现如下的问题 像这样的错误警告可能会弹出好几个,对于这种错误有2种解决方案. 第一种:配 ...
- 使用 requests.post 方法抓取有道翻译结果
import requests as rq import json def get_translate(word=None): url = 'http://fanyi.youdao.com/trans ...