实用提示：IndexedDB 不仅仅是浏览器存储——如何构建应用
《实用笔记》操作指南：IndexedDB并非仅用于浏览器存储——如何为采用该模式的团队构建契约、校验机制以及可直接插入的代码模块。
本指南将逐步构建从原始材料到可运行系统的完整流程，适用于文章《IndexedDB不仅仅是浏览器存储：如何打造以离线优先的Web应用》。重点在于可操作的步骤、明确的检查点，以及可直接放入代码仓库而无需猜测其用途的代码。 在概览阶段，应在修改代码之前明确输入参数、该步骤的负责人以及完成标准。操作人员应能够从已知的检查点重新运行该步骤，而无需猜测隐藏的状态。 相比庞大的脚本，更应采用小型且可测试的单元。当某个步骤失败时，故障原因应能明确指向单一责任模块，而非复杂的流程链。
localStorage已无法满足需求
在处理“localStorage 已不足以满足需求”这一阶段时，首先需明确相关规范：所需的输入参数、成功信号以及部分失败时的处理方式。这样的检查清单能确保后续的代码修改始终符合要求。 将这一阶段视为输入与经过验证的输出之间的契约。为相关成果命名，定义成功判定标准，并杜绝无声的半完成状态。 在调整提示词之前，先使用固定的问题集来测试召回率。仅仅更换提示词往往无法改善较差的信息检索效果。
localStorage.setItem("theme", "dark");
const theme = localStorage.getItem("theme");
localStorage.setItem(
"user",
JSON.stringify(user)
);
const user = JSON.parse(
localStorage.getItem("user")
);
50,000 products
10,000 orders
Thousands of customer records
Offline mutations
Synchronization metadata
IndexedDB 是浏览器内置的数据库
在研究 IndexedDB 是否属于数据库这一阶段时，首先需明确相关规范：所需的输入参数、成功信号以及部分失败时的处理方式。这样的检查清单能确保后续的代码修改保持一致性。 在功能结果旁记录执行时间以及令牌或查询成本。提前了解成本情况，可避免在从演示环境过渡到共享环境时出现意外费用。 在调整提示词之前，先使用固定的问题集测试检索效果。仅仅更换提示词往往无法改善较差的检索性能。
Web Application
│
▼
IndexedDB
│
├── Users
├── Products
├── Orders
├── Messages
└── Pending Sync
核心概念
在完成“核心概念”阶段时，首先需明确相关约定：所需输入、成功信号以及部分失败时的处理方式。这份清单能确保后续的代码修改保持一致性。 应将配置信息与应用程序代码分开存放。环境文件、密钥存储以及功能开关应集中于一个位置，这样操作人员无需查看整个系统结构即可进行审计。 在调整提示词之前，先使用固定的问题集来测试召回率。仅仅更换提示词往往无法解决检索效果不佳的问题。 在完成“核心概念”阶段时，首先需明确相关约定：所需输入、成功信号以及部分失败时的处理方式。这份清单能确保后续的代码修改保持一致性。 相比庞大的脚本，更应优先使用小型且可测试的单元。当某个步骤出现故障时，故障点应指向单一职责，而非复杂的流程链。
数据库
将数据库阶段视为可度量的工作面时，其效果最佳。在扩大范围之前，先记录一份完美的处理结果、一个失败案例以及回滚说明。 把这一阶段视为输入与经过验证的输出之间的契约。为相关成果命名，明确成功标准，绝不允许出现无声无息的半完成状态。 将分块策略与检索策略分开。当质量指标发生变化时，修改其中一项不应迫使重新编写另一项。
my-app-db
对象存储
将对象存储阶段视为可度量的环节，其效果最佳。在扩大范围之前，先记录一份理想的运行结果、一个故障案例以及回滚说明。在功能结果旁同时记录执行时间以及令牌或查询成本。提前了解成本情况，可避免在从演示环境过渡到共享环境时出现意外账单。应将分块策略与检索策略分开处理，当质量指标发生变化时，修改其中一项无需强制重写另一项。
users
orders
products
关键点
将关键阶段视为可度量的对象时，其效果最佳。在扩大范围之前，需记录一份理想的处理结果、一个失败案例以及回滚说明。 应将配置与应用程序代码分开。环境文件、密钥存储和功能标志应集中存放于一处，以便操作人员无需查看整个系统结构即可进行审计。 应将分块策略与检索策略分开。当质量指标发生变化时，修改其中一项不应迫使重新编写另一项。 将关键阶段视为可度量的对象时，其效果最佳。在扩大范围之前，需记录一份理想的处理结果、一个失败案例以及回滚说明。 相比庞大的脚本，更应采用小型且可测试的单元。当某个步骤失败时，故障应指向单一的责任模块，而非复杂的处理流程。
user_123
order_456
索引
在索引阶段，应在修改代码之前明确输入内容、该步骤的负责人以及结束标准。操作人员应能够从已知的检查点重新运行该步骤，而无需猜测隐藏状态。 将此阶段视为输入与已验证输出之间的契约。为相关成果命名，定义成功判定标准，并拒绝默许的半完成状态。 需引用实际作为答案依据的段落。没有引用的话，操作人员就无法区分幻觉内容与索引过程中的缺失。
orders
├── id
├── customerId
├── status
└── createdAt
customerId
交易
在“交易”阶段，应在修改代码之前明确输入参数、该步骤的负责人以及结束标准。操作人员应能够从已知的检查点重新运行该步骤，而无需猜测隐藏状态。应在功能结果旁记录执行时间以及令牌或查询成本。提前显示成本信息，可避免在从演示环境切换到共享环境时出现意外费用。需注明实际作为答案依据的段落；没有引用的话，操作人员就无法区分是幻觉内容还是索引缺失导致的错误。
一个简单示例
在“简单示例”阶段，应在修改代码之前明确输入参数、该步骤的负责人以及终止标准。操作员应能够从已知的检查点重新运行该步骤，而无需猜测隐藏状态。 配置信息应置于应用程序代码之外。环境文件、密钥存储和功能标志应集中存放于一个位置，以便操作员无需查看整个流程即可进行审计。 需引用实际作为答案依据的段落。没有引用的话，操作员就无法区分是幻觉内容还是索引缺失导致的错误。 在“简单示例”阶段，应在修改代码之前明确输入参数、该步骤的负责人以及终止标准。操作员应能够从已知的检查点重新运行该步骤，而无需猜测隐藏状态。 相较于庞大的脚本，应优先使用小型且可测试的单元。当某个步骤失败时，故障原因应能指向单一责任模块，而非复杂的流程链。
const request = indexedDB.open("MyAppDB", 1);
request.onupgradeneeded = () => {
const db = request.result; db.createObjectStore("users", {
keyPath: "id"
});
};request.onsuccess = () => {
const db = request.result; console.log("Database opened");
};
const transaction = db.transaction(
"users",
"readwrite"
);
const store = transaction.objectStore("users");store.put({
id: "user_123",
name: "Alex",
email: "alex@example.com"
});
const transaction = db.transaction(
"users",
"readonly"
);
const store = transaction.objectStore("users");const request = store.get("user_123");request.onsuccess = () => {
console.log(request.result);
};
为什么索引很重要
在处理“为什么索引很重要”这一阶段时，首先需写出规范：所需的输入参数、成功标志以及部分失败时的处理方式。这样的检查清单能确保后续的代码修改保持一致性。 将这一阶段视为输入与验证后输出之间的契约。为相关成果命名，明确成功标准，杜绝默许部分完成的情况。 在调整提示词之前，先使用固定的问题集来衡量检索效果。仅仅更换提示词很难改善较差的检索性能。
100,000 orders
All orders for customer_123
orders
│
├── Primary Key: id
│
└── Index: customerId
customerId = customer_123
│
▼
Index
│
▼
matching orders
事务的重要性远超表面所见
在处理“交易更为重要”这一阶段时，首先写下合同细节：所需的输入参数、成功信号以及部分失败时的处理方式。这样的清单能确保后续的代码修改保持一致性。 在功能结果旁记录执行时间以及代币或查询成本。提前了解成本情况，可避免从演示环境过渡到共享环境时出现意外费用。 在调整提示词之前，先用固定的问题集测试召回率。仅仅更换提示词很难改善较差的检索效果。
Transaction
│
├── Create Order
├── Create Order Items
└── Create Sync Job
│
▼
COMMIT
ROLLBACK
IndexedDB助力构建以离线优先的架构
在实现 IndexedDB 支持离线优先架构的阶段，首先需明确相关规范：所需的输入参数、成功信号以及部分失败时的处理方式。这样的检查清单能确保后续的代码修改保持一致性。 配置信息应与应用程序代码分开存放。环境配置文件、密钥存储以及功能开关应集中管理，以便运维人员无需查看全部代码即可进行审计。 在调整提示词之前，先使用固定的问题集测试系统的召回率。仅仅更换提示词往往无法解决检索效果不佳的问题。 在实现 IndexedDB 支持离线优先架构的阶段，首先需明确相关规范：所需的输入参数、成功信号以及部分失败时的处理方式。这样的检查清单能确保后续的代码修改保持一致性。 相较于庞大的脚本，应优先选择小型且易于测试的模块。当某个步骤出现故障时，故障点应能明确指向某个具体的功能模块，而非整个复杂的流程。
No Internet
↓
Application stops working
┌──────────────┐
│ Web App │
└──────┬───────┘
│
┌──────▼───────┐
│ IndexedDB │
└──────┬───────┘
│
┌──────▼───────┐
│ Sync Engine │
└──────┬───────┘
│
Internet?
/ \
No Yes
│ │
▼ ▼
Stay API
Local │
▼
Server
浏览器中的待发送模式
在当前阶段，将待发送模式视为可度量的对象使用效果最佳。在扩大范围之前，先记录一份理想的处理结果、一个失败案例以及回滚说明。 将此阶段视为输入与已验证输出之间的契约。为相关文档命名，明确成功标准，杜绝默许的半完成状态。 将分块策略与检索策略分开。当质量指标发生变化时，修改其中一项不应强制要求重新编写另一项。
orders
outbox
{
id: "event_123",
type: "ORDER_CREATED",
aggregateId: "order_456",
payload: {...},
status: "pending",
createdAt: 1724930000
}
IndexedDB
│
▼
Pending Outbox Events
│
▼
Sync Worker
│
▼
API
│
▼
Server
pending
↓
synced
但离线同步会带来新问题
将离线同步流程视为可度量的对象来处理时，其效果最佳。在扩大范围之前，先记录一份理想的测试结果、一个故障案例以及回滚说明。在功能结果旁同时记录执行时间以及令牌或查询成本。提前了解成本情况，就能避免在从演示环境过渡到共享环境时出现意外费用。应将分块策略与检索策略分开，当质量指标发生变化时，修改其中一项不应迫使重新编写另一项。
Name = "John"
Name = "Jonathan"
最后写入的内容有效
“最后写入者胜出”阶段若被视为可度量的对象，效果最佳。在扩大范围之前，需记录一份理想状态示例、一个故障案例以及回滚说明。 配置应与应用程序代码分开。环境文件、密钥存储和功能开关应集中存放，以便操作人员无需查看整个系统结构即可进行审计。 分块策略与检索策略应相互独立。当质量指标发生变化时，修改其中一项不应迫使重新编写另一项。 “最后写入者胜出”阶段若被视为可度量的对象，效果最佳。在扩大范围之前，需记录一份理想状态示例、一个故障案例以及回滚说明。 相比庞大的脚本，更应采用小型且可测试的单元。当某个步骤出现故障时，故障原因应能明确指向单一责任模块，而非复杂的流程链。
服务器胜出
在“服务器获胜”阶段，应在修改代码之前明确输入参数、该步骤的负责人以及结束标准。操作人员应能够从已知的检查点重新运行该步骤，而无需猜测隐藏状态。 将此阶段视为输入与经过验证的输出之间的契约。为相关成果命名，定义成功判定标准，并拒绝默许的半完成状态。 需引用实际作为答案依据的段落。没有引用的话，操作人员就无法区分是幻觉内容还是索引缺失导致的错误。
客户端获胜
在“客户获胜”阶段，应在修改代码之前明确输入参数、该步骤的负责人以及结束标准。操作人员应能够从已知的检查点重新运行该步骤，而无需猜测隐藏状态。应在功能结果旁记录执行时间以及令牌或查询成本。提前显示成本信息，可避免在从演示环境过渡到共享环境时出现意外账单。需注明实际作为答案依据的段落；没有引用的话，操作人员就无法区分是幻觉内容还是索引缺失导致的错误。
字段级合并
在字段级合并阶段，修改代码之前需明确输入参数、该步骤的负责人以及终止标准。操作人员应能够从已知的检查点重新运行该步骤，而无需猜测其中的隐藏状态。 配置信息应置于应用程序代码之外。环境文件、密钥存储以及功能标志应集中存放于一个位置，以便操作人员无需查看整个流程即可进行审计。 需引用实际作为答案依据的段落。没有引用的话，操作人员就无法区分是虚假信息还是索引缺失导致的问题。 在字段级合并阶段，修改代码之前需明确输入参数、该步骤的负责人以及终止标准。操作人员应能够从已知的检查点重新运行该步骤，而无需猜测其中的隐藏状态。 相较于庞大的脚本，应优先使用小型且可测试的单元。当某个步骤出现故障时，故障原因应能明确指向某个具体的责任模块，而非整个复杂的流程。
冲突解决
在处理冲突解决阶段时，首先写下合同条款：所需的输入、成功信号以及部分失败时的处理方式。这样的清单能确保后续的代码修改保持一致性。 将此阶段视为输入与验证后输出之间的契约。为相关成果命名，明确成功标准，杜绝无声的半完成状态。 在调整提示词之前，先使用固定的问题集来测试召回率。仅仅更换提示词很难改善较差的检索效果。
幂等性在这里同样重要
在处理“幂等性在这里也很重要”这一阶段时，首先需明确相关规范：所需的输入参数、成功信号以及部分失败时的处理方式。这样的检查清单能确保后续的代码修改保持一致性。 在功能结果旁记录执行时间以及令牌或查询的成本。提前了解成本情况，可避免在从演示环境过渡到共享环境时出现意外的费用支出。 在调整提示词之前，先使用固定的问题集测试召回率。仅仅更换提示词往往无法改善较差的检索效果。
ORDER_CREATED
Request 1 → SUCCESS
Request 2 → SUCCESS
clientMutationId = "mutation_123"
UNIQUE(clientMutationId)
不要将 IndexedDB 当作服务器数据库使用
在处理“不要将 IndexedDB 当作普通数据源”这一阶段时，首先需明确相关规范：所需的输入参数、成功信号以及部分失败时的处理方式。这样的检查清单能确保后续的代码修改始终符合预期。 应将配置信息与应用程序代码分开存放。环境配置文件、密钥存储以及功能开关应集中管理，以便运维人员无需查看全部代码即可进行审计。 在调整提示词之前，先使用固定的问题集来测试信息的召回率。仅仅更换提示词往往无法解决检索效果不佳的问题。 在处理“不要将 IndexedDB 当作普通数据源”这一阶段时，首先需明确相关规范：所需的输入参数、成功信号以及部分失败时的处理方式。这样的检查清单能确保后续的代码修改始终符合预期。 相比庞大的脚本，更应优先使用小型且可测试的单元。当某个步骤出现故障时，故障点应能明确指向某一个具体的功能模块，而非整个复杂的流程。
Server
│
PostgreSQL
│
▼
API
▲
│
Sync Layer
▲
│
IndexedDB
▲
│
Web App
你应该存储什么？
“应存储什么”这一阶段若被视为可度量的工作面，效果会最佳。在扩大范围之前，先记录一份优秀的示例、一个失败案例以及回滚说明。 将这一阶段视为输入与经过验证的输出之间的契约。为相关成果命名，明确成功标准，绝不允许默默地仅完成部分工作。 将分块策略与检索策略分开。当质量指标发生变化时，修改其中一项不应迫使重新编写另一项。
Products
Recent Orders
Customer Data
Drafts
User Preferences
Offline Mutations
Sync Metadata
存储空间并非无限
将“存储空间并非无限”这一阶段视为可度量的指标来处理效果最佳。在扩大范围之前，先记录一份优秀的示例、一个故障案例以及回滚说明。在功能结果旁同时记录执行时间以及令牌或查询成本。提前了解成本情况，就能避免在系统从演示环境过渡到共享环境时出现意外账单。应将分块策略与检索策略分开，当质量指标发生变化时，修改其中一项不应迫使重新编写另一项。
IndexedDB 默认并非缓存
将 IndexedDB 视为可度量的对象来使用效果最佳。在扩大范围之前，先记录一份理想的运行示例、一个故障案例以及回滚说明。 配置应置于应用程序代码之外。环境文件、密钥存储和功能开关应集中存放，以便操作人员无需查看全部内容即可进行审计。 将分块策略与检索策略分开。当质量指标发生变化时，修改其中一项不应迫使重新编写另一项。 将 IndexedDB 视为可度量的对象来使用效果最佳。在扩大范围之前，先记录一份理想的运行示例、一个故障案例以及回滚说明。 优先选择小型且可测试的单元，而非庞大的脚本。当某个步骤出现故障时，故障应指向单一的责任模块，而非复杂的流程链。
实用的架构设计
在“实用架构”阶段，应在修改代码之前明确输入参数、该步骤的负责人以及结束标准。操作人员应能够从已知的检查点重新运行该步骤，而无需猜测隐藏状态。 将此阶段视为输入与已验证输出之间的契约。为相关成果命名，定义成功判定标准，并拒绝默许的半完成状态。 需引用实际作为答案依据的段落。没有引用的话，操作人员就无法区分幻觉内容与索引缺失的问题。
┌───────────────┐
│ Web Client │
└───────┬───────┘
│
┌──────────▼──────────┐
│ Application State │
└──────────┬──────────┘
│
┌──────────▼──────────┐
│ IndexedDB │
│ │
│ Products │
│ Orders │
│ Drafts │
│ Outbox │
│ Sync Metadata │
└──────────┬──────────┘
│
Sync Engine
│
┌────────▼────────┐
│ API │
└────────┬────────┘
│
┌────────▼────────┐
│ Database │
└─────────────────┘
常见错误
在“常见错误”阶段，应在修改代码之前明确输入参数、该步骤的负责人以及结束标准。操作人员应能够从已知的检查点重新运行该步骤，而无需猜测隐藏状态。
错误1：将localStorage用于所有数据存储
错误2：将IndexedDB视为永久性的真实数据源
错误3：忽视冲突问题
错误4：忘记处理重复同步
错误5：存储所有内容
错误6：最后才考虑离线支持功能
更深层的启示
最后的思考
Browser
↕
Server