html5标准的数据库

HTML5标准中的数据库：IndexedDB

核心特点

• 异步API：基于事件驱动,避免阻塞主线程。
• 结构化存储：支持键值对和对象仓库（类似NoSQL数据库）。
• 事务支持：提供readonly和readwrite事务模式。
• 索引机制：支持多字段索引（如numberKeyRange、stringKeyRange等）。
• 容量限制：默认最低50MB（浏览器可扩展至数GB）。

典型使用场景

基础操作流程

1. 打开数据库

   const request = indexedDB.open('myDatabase', 2);
   request.onupgradeneeded = (event) => {
     const db = event.target.result;
     db.createObjectStore('users', { keyPath: 'id' });
   };

2. 数据CRUD操作
   | 操作类型 | 关键API | 说明 |
   |———|——–|——|
   | 新增数据 | add() | 自动生成键或指定键路径 |
   | 读取数据 | get() | 通过主键获取记录 |
   | 更新数据 | put() | 覆盖现有记录或新增 |
   | 删除数据 | delete() | 按主键删除记录 |

3. 事务与游标

   const transaction = db.transaction(['users'], 'readwrite');
   const store = transaction.objectStore('users');
   const cursor = store.openCursor();
   cursor.onsuccess = (e) => {
     const result = e.target.result;
     if(result) console.log(result.value); // 遍历所有记录
     else console.log('遍历结束');
     result.continue();
   };

浏览器兼容性

与其他存储对比

相关问题与解答

Q1：如何处理IndexedDB在不同浏览器的兼容性问题？
A1：建议使用以下方案：

1. 检测浏览器API支持：!window.indexedDB && alert('浏览器不支持')
2. 使用Polyfill库：如Dexie.js封装操作逻辑
3. 注意WebKit前缀：旧版Safari需使用webkitPrefix配置项
4. 测试移动端存储限制：iOS设备可能限制为50MB且不可扩展

Q2：如何实现IndexedDB与服务器数据库的数据同步？
A2：推荐采用以下策略：

1. 乐观同步：前端提交数据后立即更新本地状态，后台批量处理同步请求
2. 版本控制：使用version参数触发onupgradeneeded事件迁移数据结构
3. 冲突检测：通过lastModified或自定义时间戳字段识别冲突记录
4. 增量同步：使用游标仅同步变更数据（如IDBKeyRange筛选修改条目）
5. 网络状态监听：结合navigator.onLine状态优化同步时机