惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

酷 壳 – CoolShell
酷 壳 – CoolShell
H
Hacker News: Front Page
P
Palo Alto Networks Blog
T
ThreatConnect
Apple Machine Learning Research
Apple Machine Learning Research
博客园_首页
T
True Tiger Recordings
P
Privacy & Cybersecurity Law Blog
B
Blog
IT之家
IT之家
Last Week in AI
Last Week in AI
F
Full Disclosure
Hacker News: Ask HN
Hacker News: Ask HN
C
Comments on: Blog
Microsoft Azure Blog
Microsoft Azure Blog
C
Cybersecurity and Infrastructure Security Agency CISA
Microsoft Security Blog
Microsoft Security Blog
博客园 - 【当耐特】
N
News and Events Feed by Topic
NISL@THU
NISL@THU
腾讯CDC
雷峰网
雷峰网
Security Latest
Security Latest
李成银的技术随笔
M
Microsoft Research Blog - Microsoft Research
L
LangChain Blog
L
Lohrmann on Cybersecurity
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
C
Check Point Blog
Y
Y Combinator Blog
Recent Announcements
Recent Announcements
博客园 - Franky
N
News | PayPal Newsroom
V
V2EX
A
About on SuperTechFans
The Register - Security
The Register - Security
月光博客
月光博客
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Google Online Security Blog
Google Online Security Blog
MyScale Blog
MyScale Blog
Cisco Talos Blog
Cisco Talos Blog
Vercel News
Vercel News
WordPress大学
WordPress大学
C
Cyber Attacks, Cyber Crime and Cyber Security
The Hacker News
The Hacker News
IntelliJ IDEA : IntelliJ IDEA – the Leading IDE for Professional Development in Java and Kotlin | The JetBrains Blog
IntelliJ IDEA : IntelliJ IDEA – the Leading IDE for Professional Development in Java and Kotlin | The JetBrains Blog
爱范儿
爱范儿
A
Arctic Wolf
L
LINUX DO - 最新话题
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More

博客园 - SKILL·NULL

如何为GIT设置全局勾子,为每次提交追加信息 - SKILL·NULL 一文了解大模型、小模型与各类神经网络的关系 如何在Mac上调整外星人鼠标AW720M的灯光颜色 Karabiner-Elements最常用配置 echarts获取坐标上的点距离顶部底部高度 Let`s Encrypt 生成免费自动续签 HTTPS 证书 H5滚动截取长图 ReactNative常见问题及处理 根据.nvmrc自动切换项目所需node版本 Command PhaseScriptExecution failed with a nonzero exit code echarts双Y轴,实现均分为包含刻度0的指定段数,同时对齐刻度 env(safe-area-inset-bottom) 兼容写法 缩放实现0.5px 禁止 IOS 橡皮筋效果 JS 拦截浏览器返回 海康威视DS-IPC-E42H-IWPT监控画面竖线处理 Echarts 5 动态按需引入图表 React 18 自定义 Hook 获取 useState 最新值 处理报错 ResizeObserver loop completed with undelivered notifications.
IndexedDB封装
SKILL·NULL · 2026-01-23 · via 博客园 - SKILL·NULL
export type INDEXEDDB_PARAMS = {
	db_name: string; // 数据库名称
	store_name: string; // 仓库名
	version?: number; // 版本
	data?: any; // 存储数据
};

class IDB {
	protected db: IDBDatabase | null;

	constructor() {
		this.db = null;
		this.open = this.open.bind(this);
		this.put = this.put.bind(this);
		this.get = this.get.bind(this);
		this.getAll = this.getAll.bind(this);
		this.delete = this.delete.bind(this);
	}

	// 开
	open({ db_name, store_name, version }: INDEXEDDB_PARAMS) {
		return new Promise((resolve, reject) => {
			const indexedDB = (window.indexedDB =
				window.indexedDB ||
				window.mozIndexedDB ||
				window.webkitIndexedDB ||
				window.msIndexedDB);

			const DB = indexedDB?.open(db_name, version);

			DB.onerror = (event) => {
				const target = event?.target as IDBRequest;
				console.log(`IndexedDB ${db_name} 打开失败:${target?.error?.name}`);
				reject(target?.error);
			};

			DB.onsuccess = (event) => {
				console.log(`IndexedDB ${db_name} 打开成功`);
				const target = event?.target as IDBRequest;
				this.db = target?.result;
				resolve(this.db);
			};

			DB.onupgradeneeded = (event) => {
				console.log(`IndexedDB ${db_name} onupgradeneeded`);
				const target = event?.target as IDBRequest;
				const _db = target?.result;
				if (!_db?.objectStoreNames?.contains(store_name)) {
					_db.createObjectStore(store_name, {
						autoIncrement: true,
					});
				}
			};
		});
	}

	// 有则覆盖,无则新增
	put({ store_name, data }: INDEXEDDB_PARAMS) {
		return new Promise((resolve, reject) => {
			const transaction = this?.db?.transaction([store_name], "readwrite");
			const objectStore = transaction?.objectStore(store_name);
			const request = objectStore?.put(data);

			if (request) {
				request.onsuccess = () => {
					console.log("数据写入成功");
					resolve("数据写入成功");
				};

				request.onerror = (event) => {
					const target = event?.target as IDBRequest;
					console.log("数据写入失败:", target?.error?.name);
					reject(target?.error);
				};
			} else {
				reject("put error");
			}
		});
	}

	// 取
	get({
		store_name,
		key,
	}: INDEXEDDB_PARAMS & { key: IDBValidKey | IDBKeyRange }) {
		return new Promise((resolve, reject) => {
			const transaction = this?.db?.transaction([store_name], "readonly");
			const objectStore = transaction?.objectStore(store_name);
			const request = objectStore?.get(key);

			if (request) {
				request.onsuccess = (event) => {
					const target = event?.target as IDBRequest;
					resolve(target?.result);
				};

				request.onerror = (event) => {
					const target = event?.target as IDBRequest;
					console.log(
						`${store_name} 获取数据 ${key} 失败:`,
						target?.error?.name
					);
					reject(target?.error);
				};
			} else {
				reject("get error");
			}
		});
	}

	// 全取
	getAll({ store_name }: INDEXEDDB_PARAMS) {
		return new Promise((resolve, reject) => {
			const transaction = this?.db?.transaction([store_name], "readonly");
			const objectStore = transaction?.objectStore(store_name);
			const request = objectStore?.getAll();

			if (request) {
				request.onsuccess = (event) => {
					const target = event?.target as IDBRequest;
					resolve(target?.result);
				};

				request.onerror = (event) => {
					const target = event?.target as IDBRequest;
					console.log(`${store_name} 获取所有数据失败:`, target?.error?.name);
					reject(target?.error);
				};
			} else {
				reject("get all error");
			}
		});
	}

	// 删
	delete({
		store_name,
		key,
	}: INDEXEDDB_PARAMS & { key: IDBValidKey | IDBKeyRange }) {
		return new Promise((resolve, reject) => {
			const transaction = this?.db?.transaction([store_name], "readwrite");
			const objectStore = transaction?.objectStore(store_name);
			const request = objectStore?.delete(key);

			if (request) {
				request.onsuccess = () => {
					console.log("数据删除成功");
					resolve("数据删除成功");
				};

				request.onerror = (event) => {
					const target = event?.target as IDBRequest;
					console.log("数据删除失败:", target?.error?.name);
					reject(target?.error);
				};
			} else {
				reject("delete error");
			}
		});
	}
}

export default new IDB();