VConsole-indexedDb扩展

2024年4月15日 更新样式

  <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
  <script>
    const vConsole = new VConsole();
    var myPlugin = new VConsole.VConsolePlugin('indexedDb', 'My Plugin');
    myPlugin.on('init', function () {
      console.log('My plugin init');

    });
    myPlugin.on('renderTab', function (callback) {
      var html = '<div id="indexedDBTables">';
      var promises = [];

      indexedDB.databases().then(function (dbs) {
        dbs.forEach(function (db) {
          var dbName = db.name;
          var database = indexedDB.open(dbName);
          var promise = new Promise(function (resolve, reject) {
            database.onsuccess = function (event) {
              var objectStoreNames = event.target.result.objectStoreNames;
              var dbHtml = '<div class="indexedDBTable" data-dbname="' + dbName + '">';
              dbHtml += '<h3>' + dbName + '</h3>';
              dbHtml += '<ul>';
              Array.from(objectStoreNames).forEach(function (storeName) {
                dbHtml += '<li data-storename="' + storeName + '">' + storeName + '</li>';
              });
              dbHtml += '</ul>';
              dbHtml += '</div>';
              resolve(dbHtml);
            };
          });
          promises.push(promise);
        });

        Promise.all(promises).then(function (results) {
          html += results.join('');
          html += '</div>';
          callback(html);
        });
      });
    });

    // Click event handler to display object details
    document.addEventListener('click', function (event) {
      var target = event.target;
      if (target.tagName === 'LI' && target.parentNode.tagName === 'UL' && target.parentNode.parentNode.className === 'indexedDBTable') {
        var dbName = target.parentNode.parentNode.getAttribute('data-dbname');
        var storeName = target.getAttribute('data-storename');
        var db = indexedDB.open(dbName);
        db.onsuccess = function (event) {
          var db = event.target.result;
          var transaction = db.transaction(storeName, 'readonly');
          var objectStore = transaction.objectStore(storeName);
          var request = objectStore.getAll();
          request.onsuccess = function (event) {
            var data = event.target.result;
            var html = '<div class="indexedDBData">';
            html += '<h3>' + dbName + ' - ' + storeName + '</h3>';
            html += '<table>';
            html += '<thead><tr>';
            for (var key in data[0]) {
              html += '<th>' + key + '</th>';
            }
            html += '</tr></thead>';
            html += '<tbody>';
            data.forEach(function (item) {
              html += '<tr>';
              // If the value is an object, stringify it
              html += '<td>' + JSON.stringify(item) + '</td>';
              html += '</tr>';
            });
            html += '</tbody>';
            html += '</table>';
            document.getElementById('indexedDBTables').innerHTML = html;
          };
        };
      }
    });


    myPlugin.on('ready', function () {
      console.log('My plugin ready');
      // indexedDBTables 添加拖拽滚动
      var startX, startY, moveEndX, moveEndY, X, Y;
      setTimeout(() => {
        document.querySelector('.indexedDBData').addEventListener('touchstart', function (e) {
        // 阻止
        e.preventDefault();
      });
      }, 3000);
     
    });



    vConsole.addPlugin(myPlugin);
  </script>

  <style>
    /* Style the IndexedDB tab */
    #indexedDBTables {
      padding: 10px;
      overflow: auto;
    }

    .indexedDBTable {
      margin-bottom: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    .indexedDBTable h3 {
      background-color: #f0f0f0;
      padding: 8px;
      margin: 0;
      border-bottom: 1px solid #ccc;
      border-radius: 5px 5px 0 0;
    }

    .indexedDBTable ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .indexedDBTable li {
      padding: 8px;
      cursor: pointer;
      border-bottom: 1px solid #ccc;
      transition: background-color 0.3s ease;
    }

    .indexedDBTable li:hover {
      background-color: #f9f9f9;
    }

    /* Style the table */
    .indexedDBData {
      padding: 10px;
    }

    .indexedDBData table {
      width: 100%;
      border-collapse: collapse;
    }

    .indexedDBData th,
    .indexedDBData td {
      border: 1px solid #ddd;
      padding: 8px;
    }

    .indexedDBData th {
      background-color: #f0f0f0;
      font-weight: bold;
    }

    .indexedDBData tbody tr:nth-child(even) {
      background-color: #f9f9f9;
    }

  </style>