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>
### IndexedDB 介绍 IndexedDB 是一种浏览器内置的数据库解决方案,允许网页应用程序存储大量结构化数据[^1]。这种技术提供了事务性的键值对存储机制,支持对象存储和索引创建。 - **特点** - 支持复杂查询操作。 - 数据持久保存于客户端本地。 - 可处理大规模的数据集。 - 提供异步 API 防止阻塞页面渲染。 ```javascript // 打开或创建一个新的数据库连接 let request = indexedDB.open("MyDatabase", 1); request.onerror = function(event) { console.log("Why didn't you allow my web app to use your database?"); }; request.onsuccess = function(event) { db = event.target.result; }; ``` ### 使用方法 #### 创建与打开数据库 通过 `indexedDB.open()` 方法可以指定名称以及版本号来尝试获取现有数据库实例或者新建一个[^2]。如果指定了更高的版本号码,则会触发升级流程,在此期间能够定义新的表单(object store)、建立索引等。 #### 定义 Object Store 和 Indexes 一旦建立了数据库链接并处于合适的版本下,就可以利用 onupgradeneeded 回调函数去设置 object stores 并为其配置 indexes 。Object Stores 类似关系型数据库里的表格;Indexes 则用于加速查找特定属性上的记录。 ```javascript request.onupgradeneeded = function(event) { let db = event.target.result; // Create an objectStore for this database var objectStore = db.createObjectStore("customers", { keyPath: "id" }); // Define what data items the objectStore will contain objectStore.createIndex("name", "name", { unique: false }); objectStore.createIndex("email", "email", { unique: true }); // Populate with initial data. for (var i in customerData) { objectStore.add(customerData[i]); } }; ``` #### 增删改查(CRUD) 对于增删改查的操作均需在一个事务上下文中完成。每个请求都可能携带成功或失败事件处理器以便后续逻辑判断。 - 添加/更新条目:`add()`, `put()`. - 删除条目:`delete()`. - 查询检索:`get()`, 结合游标遍历多条记录. ```javascript function addCustomer(trans, name, email){ const objectStore = trans.objectStore('customers'); objectStore.put({ id: generateId(), name:name , email:email}); } const transaction = db.transaction(["customers"], "readwrite"); transaction.oncomplete = function(event) { console.log("All done!"); }; transaction.onerror = function(event) { console.log("Transaction not opened due to error"); }; addCustomer(transaction,"John Doe","[email protected]"); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值