IndexedDB-浏览器数据库存储基本封装

IndexedDB 介绍

IndexedDB 就是浏览器提供的本地数据库,它可以被网页脚本创建和操作。
IndexedDB 允许储存大量数据,提供查找接口,还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言,IndexedDB 不属于关系型数据库(不支持 SQL 查询语句),更接近 NoSQL 数据库。

本文仅对 IndexedDB 的常用方法进行封装说明,可以帮助你快速实现一下功能:

  • 打开 / 创建 Indexed 数据库
  • 新增数据
  • 通过主键读取数据
  • 通过游标读取数据
  • 通过索引读取数据
  • 通过索引和游标查询记录
  • 更新数据
  • 删除数据
  • 通过索引和游标删除指定的数据
  • 关闭数据库
  • 删除数据库

了解更多关于 IndexedDB,请前往阮一峰老师的IndexedDB入门教程

IndexedDB 基本封装

/**
 * 打开数据库
 * @param {object} dbName 数据库的名字
 * @param {string} storeName 仓库名称
 * @param {string} version 数据库的版本
 * @return {object} 该函数会返回一个数据库实例
 */
export function handleOpenDB(dbName, storeName, version = 1) {
   
  return new Promise((resolve, reject) => {
   
    //  兼容浏览器
    var indexedDB =
      window.indexedDB ||
      window.mozIndexedDB ||
      window.webkitIndexedDB ||
      window.msIndexedDB;
    let db;
    const request = indexedDB.open(dbName, version);
    request.onsuccess = function(event) {
   
      db = event.target.result; // 数据库对象
      console.log("数据库打开成功");
      resolve(db);
    };

    request.onerror = function(event) {
   
      console.log("数据库打开报错");
    };

    request.onupgradeneeded = function(event) {
   
      // 数据库创建或升级的时候会触发
      console.log("onupgradeneeded");
      db = event.target.result; // 数据库对象
      var objectStore;
      if (!db.objectStoreNames.contains(storeName)) {
   
        objectStore = db.createObjectStore(storeName, {
    keyPath: "id" }); // 创建表
        // objectStore = db.createObjectStore('person', { autoIncrement: true }) // 创建表
        objectStore.createIndex("name", "name", {
    unique: false }); // 创建索引 可以让你搜索任意字段
        objectStore.createIndex("address", "address", {
    unique: false });
        objectStore.createIndex("nameAddr", ["name", "address"]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值