indexedDB

<!DOCTYPE html>
<html lang="en">

<button onclick="add()"> 新增数据</button>

<button onclick="read()"> 读取数据</button>

<button onclick="readAll()"> 读取所有数据</button>

<button onclick="update()"> 更新数据</button>

<button onclick="remove()"> 删除数据</button>




<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <script>

    var db;

    // 打开数据库
    var request = window.indexedDB.open('testDB')

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

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

    // 新建表
    request.onupgradeneeded = function (event) {
      db = event.target.result;
      var objectStore;
      if (!db.objectStoreNames.contains('person')) { // 判断person这张表格是否存在
        objectStore = db.createObjectStore('person', { keyPath: 'id' }); // 不存在就新增一张叫做person的表格,主键是id
        // 新建索引
        objectStore.createIndex('name', 'name', { unique: false });
        objectStore.createIndex('email', 'email', { unique: false });
      }
    }


    // 增
    function add() {
      var request = db.transaction(['person'], 'readwrite')
        .objectStore('person')
        .add({ id: 1, name: '张三1', age: 241, email: 'zhangsan@example.com1' });

      request.onsuccess = function (event) {
        console.log('数据写入成功');
      };

      request.onerror = function (event) {
        console.log('数据写入失败');
      }
    }

    // 查
    function read() {
      var transaction = db.transaction(['person']);
      var objectStore = transaction.objectStore('person');
      var request = objectStore.get(1);  // objectStore.get() 方法用于读取数据,参数是主键的值

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

      request.onsuccess = function (event) {
        if (request.result) {
          console.log('Name: ' + request.result.name);
          console.log('Age: ' + request.result.age);
          console.log('Email: ' + request.result.email);
        } else {
          console.log('未获得数据记录');
        }
      };
    }

    // 查所有
    function readAll() {
      var objectStore = db.transaction('person').objectStore('person');

      objectStore.openCursor().onsuccess = function (event) {
        var cursor = event.target.result;

        if (cursor) {
          console.log('Id: ' + cursor.key);
          console.log('Name: ' + cursor.value.name);
          console.log('Age: ' + cursor.value.age);
          console.log('Email: ' + cursor.value.email);
          cursor.continue();
        } else {
          console.log('没有更多数据了!');
        }
      };
    }

    // 改
    function update() {
      var request = db.transaction(['person'], 'readwrite')
        .objectStore('person')
        .put({ id: 1, name: '李四', age: 35, email: 'lisi@example.com' }); // IDBObject.put()

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

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

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

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




  </script>

</body>

</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值