localStorage 只有几 MB 且同步阻塞、只能存字符串,IndexedDB 提供数百 MB 甚至更多的存储空间,以对象仓库(object store)存对象,用键值索引查询。所有操作走事务(transaction),API 大部分是异步的 Promise 风格(新版本封装),请求成功/失败都要处理。
典型流程:indexedDB.open(库名, 版本号) 打开库,onupgradeneeded 回调里建仓库与索引(只在首次或版本升级时执行),后续事务里 add/put 写入、get 按 key 取、游标 openCursor 遍历、delete 删除。适合做离线应用的数据层、草稿箱、聊天记录本地缓存。
var req = indexedDB.open('noteDB', 1); req.onupgradeneeded = function (e) { var db = e.target.result; if (!db.objectStoreNames.contains('notes')) { db.createObjectStore('notes', { keyPath: 'id' }); } }; req.onsuccess = function (e) { var db = e.target.result; var tx = db.transaction('notes', 'readwrite'); var store = tx.objectStore('notes'); store.put({ id: 1, title: '第一条笔记', content: 'IndexedDB 写入成功' }); store.get(1).onsuccess = function (ev) { console.log('读到了:', ev.target.result); }; };