indexedDB demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <button onclick="createDatabase('Users')">Create Database</button>
  <button onclick="deletedatabase('Users')">delet Database</button>
  <button onclick="getDatabase('Users')">get Database</button>
  <p id="display"></p>
  <script>
    var users = [
    {
      username: "这是name1",
      title: "这是title1",
      body:"这是body2"
    },
    {
      username: "这是name2",
      title: "这是title2",
      body:"这是body2"
    }
  ]; //假设这个object用来保存的

    let db;
    let request;
    let store;
    function createDatabase(dbName) {
      //第一个参数为名字，第二个参数为版本号
      request = indexedDB.open(dbName, 1);
      request.onerror = function () {
        alert("fail to open datbase with:" + event.target.message);
      }
      //如果尝试更新版本时，其他页面正在使用数据库也会出现问题
      request.onblocked = function () {
        alert('请关闭其他浏览器后在尝试');
      }
      request.onsuccess = function (event) {
        alert("success open the database!");
        db = event.target.result;
        db.onversionchange = function () {
          //只有当浏览器中只有一个标签使用数据库时，调用setVersion才能完成操作
          //其他页面正在操作时最好关闭数据库
          db.close();
        }
        //创建事务，传入['users']代表只加载users存储空间
        let transaction = db.transaction(["users"], "readwrite");
        //创建事务后使用objectStore()传入存储空间名称就可以访问特定名称的存储空间
        let objectStore = transaction.objectStore("users");
        //添加数据
        for(const user of users){
          objectStore.add(user);
        }
      }
      request.onupgradeneeded = function (event) {
        alert("version Change");
        db = event.target.result;
        store = db.createObjectStore("users", {
          keyPath: "username",
          autoIncrement: false
        });
        // store.createIndex("director", "director", { unique: false });
      }
    }
    //创建游标形式获取
    function getCursorData(dbName) {
      request = indexedDB.open(dbName, 1);
      request.onerror = function () {
        alert("fail to open datbase with:" + event.target.message);
      }
      request.onsuccess = function (params) {
        let db = event.target.result;
        let transaction = db.transaction(["users"]);
        let objectStore = transaction.objectStore("users");
        //创建游标
        request = objectStore.openCursor();
        request.onsuccess = function (event) {
          //获取游标
          let cursor = event.traget.result;
          let value = '',updateRequest = null;
          if(cursor){
            if(cursor.key === '这是name1'){
              value = cursor.value;
              value.body = '这是要更新的值';
              request = cursor.update(value);
              // 删除数据
              // request = cursor.delete();
              updateRequest.onsuccess = function () {
                alert('更新成功');
                // cursor.continue();//跳到下一个，可以传入参数跳到指定键的位置
                // cursor.advance(5);//向前移动五项
              }
              updateRequest.onerror = function () {
                alert('更新失败');
              }
            }
          }
        }
        request.onerror = function (params) {
          alert('创建游标失败');
        }
      }
    }
    function deletedatabase(dbName) {
      try {
        indexedDB.deleteDatabase(dbName);
      } catch (e) {
        alert(e.getMessage);
      }
    }

    function  getDatabase(dbName) {
      request = indexedDB.open(dbName, 1);
      request.onerror = function () {
        alert("fail to open datbase with:" + event.target.message);
      }
      request.onsuccess = function (params) {
        db = event.target.result;
        let transaction = db.transaction(["users"]);
        let objectStore = transaction.objectStore("users");
        //创建完成使用get获取**************************
        request = objectStore.get('这是title1')
        request.onsuccess = function (event) {
          const result = event.target.result;
          document.querySelector('#display').innerHTML = 
          `username:${result.username}<br>
            title:${result.title}<br>
            body:${result.body}<br  >
          `
        }
      }
    }
  </script>
</body>
</html>
how2js
Published 85 original articles · won praise 62 · views 20000 +
Private letter concerns
Guess you like
