1. /** IndexedDB 使用示例 (以下为个人封装版, 具体内容下方有注释)
    2. // @params: 第一个参数: db名, 第二个参数: 表名, 第三个参数(注意了): 类似于数据库的主键key
    3. initDB('db', 'mytable', 'url') // 初始化
    4. // @params: 第三个参数要存的值
    5. setVal('db', 'mytable', {url: 222, data: {a: 11111}}) // 存数据
    6. // @params: 第三个参数是主键key对的值, 根据这个值, 拿到之前存过的值
    7. getVal('db', 'mytable', 222, (e) => { console.log(e) }) // 取数据 返回: {url: 222, data: {…}}
    8. 注:初始化成功后,控制台的Application内能看到。 新db注册后, 要关闭控制台, 重开一遍, 才能在控制台的Application内看见
    9. */
    10. export const initDB = function (dbName, tableName, key) {
    11. // 初始化db
    12. const IndexedDB = window.indexedDB.open(dbName)
    13. IndexedDB.onupgradeneeded = function (event) { // 如果指定的版本号,大于数据库的实际版本号,就会发生数据库升级事件upgradeneeded
    14. // 新建数据库
    15. const result = event.target.result;
    16. if (!result.objectStoreNames.contains(tableName)) { // 先判断库是否存在
    17. result.createObjectStore(tableName, { keyPath: key }) // 表的主键 是 url 比如{url: 'xx', data: {xx}} 主键会自动生成索引
    18. .createIndex(key, key, { unique: true }) // 建立索引
    19. }
    20. IndexedDB.result.close()
    21. }
    22. }
    23. export const setVal = function (dbName, tableName, setData) {
    24. try {
    25. const IndexedDB1 = window.indexedDB.open(dbName)
    26. IndexedDB1.onsuccess = function (event) {
    27. const db = IndexedDB1.result;
    28. db.transaction([tableName], 'readwrite') // 指定需要访问的 数据库名
    29. .objectStore(tableName) // 返回数据库对象
    30. .put(setData)
    31. db.close()
    32. }
    33. } catch (error) {
    34. console.error(error)
    35. }
    36. }
    37. export const getVal = function (dbName, tableName, key, cb) {
    38. const IndexedDB2 = window.indexedDB.open(dbName)
    39. IndexedDB2.onsuccess = function (event) {
    40. const db = IndexedDB2.result;
    41. if (db.objectStoreNames.contains(tableName)) {
    42. const request = db.transaction([tableName], 'readwrite')
    43. .objectStore(tableName)
    44. .get(key) // key是: JSON.stringify(opt)
    45. request.onsuccess = function (event) {
    46. if (request.result) {
    47. cb(request.result)
    48. return true
    49. } else {
    50. throw 'indexDB 获取失败, key是: ' + key
    51. }
    52. }
    53. }
    54. db.close()
    55. }
    56. }