indexedDB

最新推荐文章于 2025-01-04 09:55:27 发布
原创最新推荐文章于 2025-01-04 09:55:27 发布 · 144 阅读
0 ·
CC 4.0 BY-SA版权
文章标签：
#javascript #前端 #数据库
本地数据存储详解专栏收录该内容
3 篇文章
订阅专栏
<!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>