带有 JavaScript 的本地数据库

介绍

本地数据库可以在客户端使用，代码被云端编译后，嵌入到网页或本地程序中使用。其中带有 JavaScript 的本地数据库使用方便，数据可以直接显示出来。

相关技术

1. HTML5 HTML5 在本地存储方面改进很多，如 localStorage、sessionStorage 和 IndexedDB 等 API，用于在本地存储数据。其中 IndexedDB 常用于大型数据存储场景。

2. JavaScript JavaScript 在处理页面交互方面表现出色，也可用于在网页中进行本地数据库的增删改查等各种操作。

实现方式

下面的代码示例介绍如何使用 JavaScript 创建一个本地数据库，并通过页面进行增删改查操作。

创建本地数据库

使用 indexedDB.open() 方法创建一个本地数据库。

function openDatabase(version, storeName) {
  let request = indexedDB.open('myDB', version);
  request.onerror = function(e) {
    console.error(e.currentTarget.error.message);
  };
  request.onsuccess = function(e) {
    let db = e.target.result;
    console.log(`Database ${db.name} has been created with version ${db.version}.`);
  };
  request.onupgradeneeded = function(e) {
    let db = e.target.result;
    db.createObjectStore(storeName, { keyPath: 'id', autoIncrement: true });
    console.log(`Database ${db.name} has been updated from version ${e.oldVersion} to ${db.version}.`);
  };
}

数据库增删改查

使用 IDBTransaction 对象进行增删改查操作。

function addData(db, data) {
  let transaction = db.transaction(['myStore'], 'readwrite');
  let store = transaction.objectStore('myStore');
  let request = store.add(data);
  request.onerror = function(e) {
    console.error(e.target.error.message);
  };
  request.onsuccess = function(e) {
    console.log(`Data has been added to ${store.name}.`);
  };
}

function deleteData(db, id) {
  let transaction = db.transaction(['myStore'], 'readwrite');
  let store = transaction.objectStore('myStore');
  let request = store.delete(id);
  request.onerror = function(e) {
    console.error(e.target.error.message);
  };
  request.onsuccess = function(e) {
    console.log(`Data has been deleted from ${store.name}.`);
  };
}

function updateData(db, data) {
  let transaction = db.transaction(['myStore'], 'readwrite');
  let store = transaction.objectStore('myStore');
  let request = store.put(data);
  request.onerror = function(e) {
    console.error(e.target.error.message);
  };
  request.onsuccess = function(e) {
    console.log(`Data has been updated in ${store.name}.`);
  };
}

function getData(db, id, callback) {
  let transaction = db.transaction(['myStore'], 'readonly');
  let store = transaction.objectStore('myStore');
  let request = store.get(id);
  request.onerror = function(e) {
    console.error(e.target.error.message);
  };
  request.onsuccess = function(e) {
    console.log(`Data has been retrieved from ${store.name}.`);
    callback(e.target.result);
  };
}

实际使用

可以使用以下代码将上述方法整合并调用。

openDatabase(1, 'myStore');

let myData = { name: 'Michael', age: 30 };
let myId = 1;
let db;

setTimeout(() => {
  db = event.target.result;
  addData(db, myData);
  
  setTimeout(() => {
    deleteData(db, myId);
    
    setTimeout(() => {
      myData.age++;
      updateData(db, myData);
      
      setTimeout(() => {
        getData(db, myId, (data) => {
          console.log(data);
        });
      }, 1000);
    }, 1000);
  }, 1000);
}, 1000);

总结

带有 JavaScript 的本地数据库可以方便地在网页端进行增删改查操作，提高了页面的交互性。虽然 API 目前只有 IndexedDB 一种，但它已经足以应对各种存储需求。