IndexedDB 是浏览器内置支持事务的 NoSQL 数据库，适合存储日程与提醒事项并支持离线访问；需分设 events 和 reminders 对象仓库、建时间索引、封装增删改查逻辑，并在启动时加载数据、定时检查触发提醒，同时注意主键设计、时间规范及错误降级。
IndexedDB 是浏览器内置的、支持事务的 NoSQL 数据库，适合存储结构化数据（如日程、提醒事项）并支持离线访问。缓存用户日程与本地提醒，关键在于合理设计数据库结构、封装增删改查逻辑，并在页面加载/同步时自动读取和更新。
1. 创建数据库并定义对象仓库（Object Store）
日程（events）和提醒事项（reminders）建议分两个对象仓库，便于独立管理。每个记录需有唯一主键（如 id），并为时间字段建立索引（如 startTime、triggerAt）以便按时间范围查询：
const DB_NAME = 'calendar-db';
const DB_VERSION = 2;
<p>function openDB() {
return new Promise((resolve, reject) => {
const request = indexedDB.open(DB_NAME, DB_VERSION);</p><pre class="brush:php;toolbar:false;">request.onupgradeneeded = (event) => {
const db = event.target.result;
// 日程仓库：存储会议、待办等
if (!db.objectStoreNames.contains('events')) {
const eventsStore = db.createObjectStore('events', { keyPath: 'id' });
eventsStore.createIndex('byStartTime', 'startTime', { unique: false });
eventsStore.createIndex('byDate', 'date', { unique: false }); // 如 '2024-06-15'
}
// 提醒事项仓库：存储本地触发的提醒（含是否已触发、是否已关闭）
if (!db.objectStoreNames.contains('reminders')) {
const remindersStore = db.createObjectStore('reminders', { keyPath: 'id' });
remindersStore.createIndex('byTriggerAt', 'triggerAt', { unique: false });
remindersStore.createIndex('byStatus', 'status', { unique: false }); // 'pending', 'fired', 'dismissed'
}
};
request.onsuccess = () => resolve(request.result);
request.onerror = () => reject(request.error);
}); }
2. 封装常用操作：添加、查询、更新、删除
避免每次手动写事务，用工具函数统一处理。注意：所有写操作必须在事务中进行，读操作可单独开启只读事务。
-
添加日程：传入完整日程对象（含生成的
id和标准化时间） -
按日期查日程：用
byDate索引快速获取某天全部事件 -
查询待触发提醒：用
byTriggerAt查找triggerAt ≤ now且状态为pending的项 -
标记提醒为已触发或已关闭：用
put()更新单条记录
// 示例：添加一条日程
async function addEvent(db, event) {
return new Promise((resolve, reject) => {
const tx = db.transaction(['events'], 'readwrite');
const store = tx.objectStore('events');
const request = store.add(event);
request.onsuccess = () => resolve(event.id);
request.onerror = () => reject(request.error);
});
}
<p>// 示例：获取今天的所有日程
async function getTodaysEvents(db) {
const today = new Date().toISOString().split('T')[0]; // '2024-06-15'
return new Promise((resolve, reject) => {
const tx = db.transaction(['events'], 'readonly');
const store = tx.objectStore('events');
const index = store.index('byDate');
const request = index.getAll(IDBKeyRange.only(today));
request.onsuccess = () => resolve(request.result);
request.onerror = () => reject(request.error);
});
}
</p>
3. 启动时加载并监听本地提醒
页面加载后立即打开数据库，读取今日日程与待触发提醒；同时启动一个定时器（如每分钟检查一次），或使用 setTimeout 精确调度（更推荐结合 Service Worker 实现后台唤醒，但纯前端可用轮询）：
async function initApp() {
try {
const db = await openDB();
<pre class="brush:php;toolbar:false;">// 加载今日日程显示在 UI 上
const todayEvents = await getTodaysEvents(db);
renderCalendar(todayEvents);
// 检查并触发过期提醒
await checkAndFireReminders(db);
// 每分钟检查一次新到的提醒（简单轮询）
setInterval(() => checkAndFireReminders(db), 60 * 1000);
} catch (err) { console.error('初始化失败:', err); } }
async function checkAndFireReminders(db) { const now = Date.now(); const tx = db.transaction(['reminders'], 'readwrite'); const store = tx.objectStore('reminders'); const index = store.index('byTriggerAt');
// 查询 triggerAt ≤ now 且 status === 'pending' const range = IDBKeyRange.upperBound(now); const request = index.openCursor(range);
request.onsuccess = function(event) { const cursor = event.target.result; if (cursor) { const reminder = cursor.value; if (reminder.status === 'pending') { // 触发本地通知（需用户授权） if ('Notification' in window && Notification.permission === 'granted') { new Notification(reminder.title, { body: reminder.body }); } // 标记为已触发 reminder.status = 'fired'; cursor.update(reminder); } cursor.continue(); } }; }
4. 注意事项与优化建议
IndexedDB 不是万能缓存层，需配合业务逻辑谨慎使用：
-
主键设计：避免用时间戳作主键（可能重复），推荐用
crypto.randomUUID()或组合 ID（如event_${Date.now()}_${Math.random()}） -
时间存储规范：统一用毫秒时间戳（
Date.now()）或 ISO 字符串，避免时区歧义；查询前做标准化转换 - 错误降级：IndexedDB 可能被禁用或配额超限，操作失败时应 fallback 到内存缓存或提示用户
- 清理旧数据：定期删除超过 30 天的日程或已关闭 7 天的提醒，防止数据库膨胀
-
与服务端同步：本地修改后应记录变更队列（如
pendingSync字段），在网络恢复时批量提交到服务器
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
