前端数据库indexDB

简单介绍下应用场景:

一、大规模数据存储与缓存

  1. 电商场景‌:存储商品目录、用户购物车及订单历史,减少服务器压力并提升加载速度‌。
  2. 新闻/阅读类应用‌:缓存文章内容及用户阅读记录,实现离线访问‌。
  3. 数据可视化工具‌:本地处理海量数据,支持离线分析并延迟同步至服务器‌。

二、用户生成内容管理

  1. 实时保存草稿‌:适用于在线文档、图片编辑器等场景,确保编辑过程中数据自动持久化‌。
  2. 游戏与教育应用‌:存储用户游戏进度、成就或学习记录,实现跨会话数据保留‌。

indexDB的基础应用:

一、核心概念与架构
  1. 数据库(Database)

    • 每个源(域名)可创建多个数据库,但通常一个应用使用一个数据库。
    • 数据库通过名称和版本号唯一标识,版本升级需显式处理。
  2. 对象存储(Object Store)

    • 类似数据库的"表",存储键值对数据。
    • 每个对象存储需定义主键(keyPath),支持自动生成主键(autoIncrement)。
    • 可创建多个索引(Index),用于快速查询非主键字段。
  3. 事务(Transaction)

    • 所有数据操作必须在事务中完成,确保原子性。

    • 事务模式:

      • readonly:只读,性能最佳。
      • readwrite:读写,可能触发版本升级。
      • versionchange:数据库结构变更(如创建/删除对象存储)。
  4. 游标(Cursor)

    • 用于遍历对象存储或索引中的数据,支持范围查询和条件过滤。
二、操作流程详解
1. 打开/创建数据库
ini 复制代码
const request = indexedDB.open('myDatabase', 2); // 名称 + 版本

request.onerror = (event) => {
  console.error('数据库打开失败:', event.target.error);
};

request.onsuccess = (event) => {
  const db = event.target.result;
  console.log('数据库已打开:', db.name);
};

request.onupgradeneeded = (event) => {
  const db = event.target.result;
  if (!db.objectStoreNames.contains('users')) {
    const store = db.createObjectStore('users', { keyPath: 'id', autoIncrement: true });
    store.createIndex('nameIndex', 'name', { unique: false });
    store.createIndex('emailIndex', 'email', { unique: true });
  }
};
  • 版本管理 ‌:每次结构变更(如新增对象存储)需升级版本,onupgradeneeded是唯一可修改结构的地方。
  • 错误处理 ‌:监听onerror事件处理数据库操作中的异常。
2. 数据操作(CRUD)

添加数据

ini 复制代码
const transaction = db.transaction('users', 'readwrite');
const store = transaction.objectStore('users');
const request = store.add({ name: 'Alice', email: 'alice@example.com' });

request.onsuccess = () => console.log('数据添加成功');
request.onerror = (e) => console.error('添加失败:', e.target.error);

读取数据

ini 复制代码
const transaction = db.transaction('users', 'readonly');
const store = transaction.objectStore('users');
const request = store.get(1); // 主键查询

request.onsuccess = (e) => {
  const data = e.target.result;
  console.log('获取数据:', data);
};

更新数据

php 复制代码
const request = store.put({ id: 1, name: 'Alice Updated', email: 'alice@example.com' });

删除数据

go 复制代码
const request = store.delete(1); // 按主键删除

使用索引查询

ini 复制代码
const index = store.index('nameIndex');
const request = index.get('Alice');
三、事务与并发控制
  • 事务生命周期 ‌:事务在回调函数执行完毕后自动提交,或手动调用transaction.commit()
  • 并发冲突‌:若两个事务同时修改同一数据,后提交的事务可能失败,需通过重试或版本管理解决。
  • 事务模式选择 ‌:优先使用readonly提升性能,必要时用readwrite
五、实际应用场景与示例

场景1:离线应用缓存

  • 使用Service Worker拦截网络请求,优先从IndexedDB读取缓存数据。
  • 示例代码:
javascript 复制代码
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request).then((res) => {
        // 将响应数据存入IndexedDB
        return res;
      });
    })
  );
});

场景2:大文件存储

  • 存储用户上传的图片或文档(Blob类型)。
  • 示例:
ini 复制代码
const fileInput = document.querySelector('input[type="file"]');
fileInput.addEventListener('change', (e) => {
  const file = e.target.files;
  const transaction = db.transaction('files', 'readwrite');
  const store = transaction.objectStore('files');
  store.add(file, file.name); // 使用文件名作为主键
});
六、对比其他存储方案
特性 IndexedDB LocalStorage Web SQL (已废弃) Cookies
存储容量 ≥250MB(浏览器策略限制) ~5MB ~5MB ~4KB
数据格式 结构化对象/Blob 字符串 关系型表格 字符串
查询能力 索引、游标、范围查询 SQL查询
异步支持 否(同步阻塞)
适用场景 大规模数据、复杂查询 简单配置/状态存储 小型结构化数据(历史) 会话/身份标识

总结:

IndexedDB 是浏览器提供的 ‌客户端 NoSQL 数据库‌,支持存储大规模结构化数据(如 JSON、Blob),通过异步事务操作和索引查询实现高效数据管理,适用于离线应用、大文件缓存等场景,提供远超 LocalStorage 的存储容量(GB 级)和复杂检索能力,是前端处理高性能、持久化数据的核心方案。

相关推荐
小小小小宇25 分钟前
虚拟列表兼容老DOM操作
前端
悦悦子a啊28 分钟前
Python之--基本知识
开发语言·前端·python
安全系统学习1 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖2 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖2 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水2 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐2 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06272 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台3 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121383 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css