JavaScript IndexedDB 本地数据库

IndexedDB简介（浏览器端的NoSQL数据库）、打开数据库/创建对象仓库、事务transaction、增删改查（add/put/get/delete）、游标cursor遍历、索引加速查询 · 难度：高级 · +20XP

IndexedDB —— 浏览器中的数据库

localStorage只有5MB且只能存字符串。IndexedDB是浏览器中的NoSQL数据库，支持索引、事务、游标，存储量可达数百MB。

基本操作

const request = indexedDB.open('MyDB', 1);
request.onupgradeneeded = (e) => {
  const db = e.target.result;
  const store = db.createObjectStore('users', { keyPath: 'id' });
  store.createIndex('name', 'name', { unique: false });
};
request.onsuccess = (e) => {
  const db = e.target.result;
  const tx = db.transaction('users', 'readwrite');
  tx.objectStore('users').add({ id: 1, name: '小明' });
  tx.objectStore('users').get(1).onsuccess = (e) => console.log(e.target.result);
};

动手练习

1. 基础练习：创建一个IndexedDB数据库并存入3条数据。
2. 进阶应用：用索引实现按名字搜索。
3. 项目实战：用IndexedDB实现一个离线优先的笔记应用。