IndexedDB 是浏览器内置支持事务的 NoSQL 数据库，适合缓存聊天记录；1. 创建数据库并定义对象仓库，按会话组织数据、设 timestamp 为主键、建 byConversationId 等索引；2. 离线写入消息，封装 Promise 并处理错误；3. 按会话分页加载历史消息，用索引与 IDBKeyRange 实现高效查询；4. 上线后同步未发消息，定期清理过期或冗余数据，并注意关闭连接与版本升级阻塞处理。
IndexedDB 是浏览器内置的、支持事务的 NoSQL 数据库存储方案，非常适合用来缓存聊天记录——它容量大（通常几十 MB 到几百 MB）、支持结构化数据、可离线读写，且能按时间、会话 ID 等字段高效查询。
1. 创建数据库并定义对象仓库（Object Store）
聊天数据建议按「会话」组织，每个会话一个 keyPath（如 conversationId），消息用 timestamp 或自增 id 作为主键，便于按时间排序和分页加载。
- 打开数据库时指定版本号，首次打开或升级版本时触发
onupgradeneeded - 在该回调中创建对象仓库，并设置主键（
keyPath）和索引（如byConversationId和byTimestamp）
示例：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
const DB_NAME = 'ChatDB';
const DB_VERSION = 1;
const STORE_NAME = 'messages';
<p>const request = indexedDB.open(DB_NAME, DB_VERSION);</p><p>request.onupgradeneeded = (event) => {
const db = event.target.result;
if (!db.objectStoreNames.contains(STORE_NAME)) {
// 主键设为 timestamp（毫秒），确保唯一且天然有序
const store = db.createObjectStore(STORE_NAME, { keyPath: 'timestamp' });
// 添加索引：按会话 ID 查询（用于加载某个人的全部消息）
store.createIndex('byConversationId', 'conversationId', { multiEntry: false });
// 可选：添加复合索引支持「某会话 + 时间范围」查询
store.createIndex('byConvAndTime', ['conversationId', 'timestamp'], { unique: false });
}
};</p>
2. 存储新消息（支持离线写入）
收到一条消息后，不管是否在线，都立即写入 IndexedDB。操作封装成 Promise 更易管理。
- 使用
transaction的readwrite模式 - 消息对象至少包含：
id（可选）、conversationId、content、sender、timestamp（推荐用Date.now()） - 写入失败时（如存储空间满、主键冲突），应记录错误但不中断业务逻辑
示例：
function saveMessage(message) {
return new Promise((resolve, reject) => {
const request = indexedDB.open(DB_NAME);
request.onsuccess = (event) => {
const db = event.target.result;
const tx = db.transaction(STORE_NAME, 'readwrite');
const store = tx.objectStore(STORE_NAME);
const addRequest = store.add(message); // 自动以 message.timestamp 为主键
<pre class="brush:php;toolbar:false;"> addRequest.onsuccess = () => resolve();
addRequest.onerror = () => reject(addRequest.error);
};
request.onerror = () => reject(request.error);}); }
// 调用示例（发送/接收消息后调用） saveMessage({ conversationId: 'user_123', content: '你好！', sender: 'remote', timestamp: Date.now() });
3. 离线加载历史消息（按会话分页读取）
用户进入聊天界面时，优先从 IndexedDB 加载最近 N 条消息；滚动到底部再加载更早的批次。避免一次性全量读取导致卡顿。
- 使用索引
byConversationId获取某会话所有消息 - 配合
IDBKeyRange.bound()实现时间范围查询（例如：加载 timestamp - 注意游标遍历顺序：
direction: 'prev'可从最新往最旧读，适合“加载更多”场景
示例（加载某会话最近 20 条）：
async function loadMessages(conversationId, limit = 20, beforeTimestamp = Infinity) {
return new Promise((resolve, reject) => {
const request = indexedDB.open(DB_NAME);
request.onsuccess = (event) => {
const db = event.target.result;
const tx = db.transaction(STORE_NAME, 'readonly');
const store = tx.objectStore(STORE_NAME);
const index = store.index('byConversationId');
<pre class="brush:php;toolbar:false;"> // 查询该会话下 timestamp 小于等于 beforeTimestamp 的消息，倒序取前 limit 条
const range = IDBKeyRange.upperBound(beforeTimestamp);
const cursorRequest = index.openCursor(range, 'prev');
const messages = [];
cursorRequest.onsuccess = (e) => {
const cursor = e.target.result;
if (cursor && messages.length reject(cursorRequest.error);
};}); }
4. 同步与清理策略（避免数据膨胀）
长期运行的聊天应用需控制本地数据量。IndexedDB 不会自动清理，需主动管理：
- 上线后，将本地未同步的消息通过 WebSocket/API 补发到服务端（标记
synced: true） - 定期清理：比如只保留最近 90 天的消息，或每个会话最多存 500 条（根据业务调整）
- 删除时用
delete()或clear()，也可用openCursor()批量删旧数据
示例（清理 90 天前的消息）：
function cleanupOldMessages() {
const cutoff = Date.now() - 90 * 24 * 60 * 60 * 1000;
const request = indexedDB.open(DB_NAME);
request.onsuccess = (e) => {
const db = e.target.result;
const tx = db.transaction(STORE_NAME, 'readwrite');
const store = tx.objectStore(STORE_NAME);
const range = IDBKeyRange.upperBound(cutoff);
store.delete(range); // 删除所有 timestamp ≤ cutoff 的记录
};
}
不复杂但容易忽略：记得在页面卸载前关闭数据库连接（db.close()），并在 blocked 事件中提示用户刷新——因为版本升级时旧标签页可能阻塞新版本打开。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
