indexedDB 使用小结
2020/7/1 5:26:29
本文主要是介绍indexedDB 使用小结,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
因为项目用到了indexedDB存一些数据,就补了一下这方便的资料。踩一下“坑”。如果你还不了解什么是indexedDB,可以先看看这三篇文章入个门。
- 张鑫旭-HTML5 indexedDB前端本地存储数据库实例教程
- 阮一峰-浏览器数据库 IndexedDB 入门教程
- 阮一峰-IndexedDB API
1.不能动态添加表
indexedDB 中 createObjectStore
(类似新增表)和deleteObjectStore
(类似删除表)方法只有在onupgradeneeded 中调用。而表有时候又是动态的,所以做了一下的封装。
/** * 根据数据库中是否包含表名会自动升级数据库 * @param dbName 数据库名称 * @param storeNames 表名-arrays * @param version 数据库版本号 */ export async function openDatabase(dbName, storeNames = [], version = undefined) { return new Promise((resolve, reject) => { const request = window.indexedDB.open(dbName, version) request.onsuccess = (event) => { const db = event.target.result let isNeedUpdate = false for (let i = 0; i < storeNames.length; i++) { if (!db.objectStoreNames.contains(storeNames[i])) { isNeedUpdate = true break } } function callback(db) { if (db) { resolve(db) } else { reject(`can't open ${dbName}`) } } if (isNeedUpdate) { const version = db.version + 1 db.close() openDatabase(dbName, storeNames, version).then((db) => { callback(db) }) } else { callback(db) } } request.onerror = (e) => { reject(e) } request.onblocked = () => { reject(`${dbName} is blocked.`) } request.onupgradeneeded = (event) => { const db = event.target.result for (const storeName of storeNames) { if (!db.objectStoreNames.contains(storeName)) { db.createObjectStore(storeName, { keyPath: "key" // autoIncrement: true }) } } } }) }
2.主键不能更新
我的需求是把一个文件列表存入数据库。之前是把文件完整路径作为了主键。但是当遇到修改文件名或移动文件,文件路径就会发生变更的这种情况,就需要更新主键。然而并没有找到这样的方法。
IDBObjectStore.put(item, key)
方法用于更新某个主键对应的数据记录,如果对应的键值不存在,则插入一条新的记录。该方法返回一个 IDBRequest 对象。
该方法接受两个参数,第一个参数为新数据,第二个参数为主键,该参数可选,且只在自动递增时才有必要提供,因为那时主键不包含在数据值里面。
所以,我能想到的方案
- 先删除记录,再添加。不过就不能算是更新了。
-
创建表时,不要使用数据字段为主键,除非你确定以后不会改。使用自增主键。还有修改对应的获取数据的方法。该方法放弃,如果使用自增字段做主键,然后通过索引字段可以获取数据。但是却拿得不到对应的主键(通过IDBCursor可以获取,但是感觉方法很笨)。拿不到主键还是更新不了数据...卒
这篇关于indexedDB 使用小结的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-01前端项目部署入门:新手必读指南
- 2024-11-01富文本编辑器学习:从入门到初步掌握
- 2024-11-01前端项目部署学习:从入门到实践
- 2024-11-01动态主题处理:WordPress新手指南
- 2024-11-01前端项目部署指南:从零开始的部署教程
- 2024-11-01Element-Plus入门指南:轻松开始你的前端项目
- 2024-11-01TagsView标签栏导航入门教程
- 2024-11-01富文本编辑器课程:新手入门教程
- 2024-10-31前端项目部署课程:从入门到实践指南
- 2024-10-31用Angular实现服务器端渲染以提升SEO效果