一步教会使用浏览器indexedDB储存数据

**

快速使用浏览器indexedDB数据库

**

连接indexedDB数据库

var request = window.indexedDB.open('databaseName', 1)
request.onerror = function(event) {
  console.log(event)
  console.log('打开数据库失败')
}

request.onsuccess = function(event) {
  console.log(request.result)
  console.log('打开数据库成功')
  db = request.result
}

数据库版本不一致的时候会触发这个函数

var db;
request.onupgradeneeded = function(event) {
  console.log(event.target.result)
  console.log('数据库升级了')
  db = event.target.result
  var objectStore;
  if (!db.objectStoreNames.contains('person')) {//判断这张表存不存在
    objectStore = db.createObjectStore('person', { keyPath: 'id'})
    objectStore.createIndex('name', 'name', { unique: false })
    objectStore.createIndex('email', 'email', { unique: false })
  }
}

新增数据

function add() {
  console.log(db)
  try {
    var request = db.transaction(['person'], 'readwrite').objectStore('person')
  request.add({id: 2, name: '李四', age: 24, email: '15907539863@qq.com'})
  request.onsuccess = function(event) {
    console.log('写入成功')
  }
  request.onerror = function(event) {
    console.log('写入失败')
  }
  } catch(err) {
    console.log(err)
  }
}

读取数据

function read() {
  var transaction = db.transaction(['person'])
  var objectStore = transaction.objectStore('person')
  var request = objectStore.get(1)

  request.onsuccess = function(event) {
    if(request.result) {
      console.log('拿到了')
      console.log(request.result)
    } else {
      console.log('没有记录')
    }
  }

  request.onerror = function(event) {
    console.log('事务失败')
  }
}

read()

遍历数据

function readAll() {
  var objectStore = db.transaction('person').objectStore('person')
  objectStore.openCursor().onsuccess = function(event) {
    var cursor = event.target.result
    if (cursor) {
      console.log('拿到了')
      cursor.continue()
    } else {
      console.log('没有更多数据')
    }
  }
}

readAll()

更新数据

function update() {
  var request = db.transaction(['person'], 'readwrite').objectStore('person')
  request.put({id: 1, name: '李四1', age: 26, email: '15907536984@163.com'})

  request.onsuccess = function(event) {
    console.log('数据更新成功')
  }

  request.onerror = function(event) {
    console.log('数据更新失败')
  }
}

update()

删除记录

function remove() {
  var request = db.transaction(['person'], 'readwrite').objectStore('person').delete(1)

  request.onsuccess = function(event) {
    console.log('删除成功')
  }
}

remove()

通过索引找记录

function find() {
  var transaction = db.transaction(['person'], 'readonly');
  var store = transaction.objectStore('person')
  var index = store.index('name')
  var request = index.get('李四1')

  request.onsuccess = function(event) {
    if(event.target.result) {
      console.log(event.target.result)
      console.log('拿到了')
    } else {
      console.log('拿不到')
    }
  }
}