IndexedDB:浏览器里内置的数据库

た入场券 2022-10-30 12:26 185阅读 0赞

参照 [http://www.ruanyifeng.com/blog/2018/07/indexeddb.html][http_www.ruanyifeng.com_blog_2018_07_indexeddb.html]

随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。

通俗地说，IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。

IndexedDB 具有以下特点。

**（1）键值对储存**

**（2）异步**

**（3）支持事务**

**（4）同源限制**

**（5）储存空间大**

**（6）支持二进制储存**

IndexedDB 数据库有版本的概念。同一个时刻，只能有一个版本的数据库存在。如果要修改数据库结构（新增或删除表、索引或者主键），只能通过升级数据库版本完成。

**打开数据库**

**index.html**

<!DOCTYPE html>
    <html lang="en">
      <head>
    	<meta charset="UTF-8" />
    	<script type="text/javascript" src="es6.js"></script>
        <title>CopyDemo</title>
      </head>
      <body>
        <div id="NewsToolBox"></div>
        <button onclick="dbOpen('openDB', 1)">打开数据库</button>
      </body>
    </html>
    </script>

**es6.js**

var request;
    // 打开数据库
    function dbOpen(databaseName, version) {
      // 这个方法接受两个参数，第一个参数是字符串，表示数据库的名字。如果指定的数据库不存在，就会新建数据库。
      // 第二个参数是整数，表示数据库的版本。如果省略，打开已有数据库时，默认为当前版本；新建数据库时，默认为1。
      request = window.indexedDB.open(databaseName, version);
      request.onerror = function (event) {
        onerror(event);
      };
      request.onsuccess = function (event) {
        onsuccess(event);
      };
    }
    
    function onerror(event) {
      console.log('数据库打开报错:', event);
    }
    
    function onsuccess(event) {
      db = request.result;
      console.log('数据库打开成功:', event);
      console.log('db:', db);
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70][]

点击 打开数据库 按钮后，右键刷新 IndexedDB

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 1][]

数据库创建成功。

现在我们做一些复杂的操作，新建表和数据，读取表和数据。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 2][]

**index.html**

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="es6.js"></script>
        <style type="text/css">
          table {
            border-collapse: collapse;
            text-align: center;
          }
          table td,
          table th {
            border: 1px solid #cad9ea;
            color: #666;
            height: 30px;
          }
          table thead th {
            background-color: #cce8eb;
            width: 100px;
          }
          table tr:nth-child(odd) {
            background: #fff;
          }
          table tr:nth-child(even) {
            background: #f5fafa;
          }
          label {
            width: 60px;
            display: inline-block;
          }
        </style>
    
        <title>es6</title>
      </head>
      <body>
        <ul></ul>
        <label for="name">姓名：</label><input type="text" id="name" /><br />
        <label for="age">年龄：</label><input type="number" id="age" />
        <button onclick="add()">追加</button><br /><br />
        <table>
          <thead>
            <th>姓名</th>
            <th>年龄</th>
            <th>删除</th>
          </thead>
          <tbody></tbody>
        </table>
      </body>
    </html>

**es6.js**

var note, tbody, indexDb, primaryKey;
    var number = 1;
    
    window.onload = function () {
      dbOpen("indexDB", 1);
    };
    
    // 打开数据库
    function dbOpen(databaseName, version) {
      note = document.querySelector("ul");
      tbody = document.querySelector("tbody");
      var DBOpenRequest = window.indexedDB.open(databaseName, version);
      DBOpenRequest.onsuccess = function () {
        indexDb = DBOpenRequest.result;
        getAll();
      };
      DBOpenRequest.onupgradeneeded = function (event) {
        var db = event.target.result;
        var objectStore = db.createObjectStore("users", {
          keyPath: "userId",
        });
        objectStore.createIndex("name", "name", { unique: false });
        objectStore.createIndex("age", "age", { unique: false });
      };
    }
    
    function add() {
      var name = document.querySelector("#name").value;
      var age = document.querySelector("#age").value;
      primaryKey = "primaryKey" + number;
      var newItem = [
        {
          userId: primaryKey,
          name,
          age,
        },
      ];
      number++;
      var objectStore = this.getObjectStore();
    
      var objectStoreRequest = objectStore.add(newItem[0]);
      objectStoreRequest.onsuccess = function () {
        note.innerHTML = "<li>add successful.</li>";
        get();
      };
    }
    
    function get() {
      var objectStore = this.getObjectStore();
    
      var request = objectStore.get(primaryKey);
      request.onsuccess = function (event) {
        data = event.target.result;
        document.querySelector("#name").value = "";
        document.querySelector("#age").value = "";
        tbody.innerHTML += `<tr id="tr-${data.userId}"><td>${data.name}</td><td>${data.age}</td><td><button onclick=deleteRecord("${data.userId}")>delete</button></td></tr>`;
      };
    }
    
    function getAll() {
      var objectStore = this.getObjectStore();
    
      var request = objectStore.getAll();
      request.onsuccess = function (event) {
        results = event.target.result;
        number = results.length + 1;
        results.forEach((data) => {
          tbody.innerHTML += `<tr id="tr-${data.userId}"><td>${data.name}</td><td>${data.age}</td><td><button onclick=deleteRecord("${data.userId}")>delete</button></td></tr>`;
        });
      };
    }
    
    function deleteRecord(primaryKey) {
      var objectStore = this.getObjectStore();
      var request = objectStore.delete(primaryKey);
      request.onsuccess = function () {
        document.getElementById(`tr-${primaryKey}`).style.display = "none";
        note.innerHTML = `<li>Delete completed.</li>`;
      };
    }
    
    function getObjectStore() {
      var transaction = indexDb.transaction(["users"], "readwrite");
      var objectStore = transaction.objectStore("users");
      return objectStore;
    }

[http_www.ruanyifeng.com_blog_2018_07_indexeddb.html]: http://www.ruanyifeng.com/blog/2018/07/indexeddb.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70]: /images/20221024/7729c9ec04234909bde07c8922a00cca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 1]: /images/20221024/2e617658a3a149359cfaff0d965e2b09.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zODg4MzMzOA_size_16_color_FFFFFF_t_70 2]: /images/20221024/a83343c2f0294e158fe6c2319fce6a1b.png