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

原创

wx584411d751930 2021-02-19 15:31:04 博主文章分类：B-JavaScript ©著作权

文章标签 indexedDB 浏览器数据库 html 获取数据 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者wx584411d751930的原创作品，请联系作者获取转载授权，否则将追究法律责任

参照 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);
}

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

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

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

数据库创建成功。

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

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

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;
}