absurd-sql

345 阅读1分钟

absurd-sql介绍

  • 本地数据库

在HTML5中,大大丰富了客户端本地可以存储的内容,添加了很多功能将原本必须要保存在服务器上的数据转为保存在客户端本地,从而大大提高了Web应用程序性能,减轻了服务器的负担,使用Web时代重新回到了“客户端为重、服务器端为轻”的时代。

HTML5中内置了两种本地数据库,一种是SQLite,一种是indexedDB

  • sql.js

sql.js是一个 JavaScript SQL 数据库。sql.js是一个 JavaScript SQL 数据库。它允许您创建一个关系数据库并完全在浏览器中查询它。

sql.js是使用emscripten将SQLite编译为 webassembly版本,它包括贡献的数学和字符串扩展函数。官网

  • absurd-sql

absurd-sql 是 sql.js 的后端实现(sql.js 是 sqlite 的 Webassembly 版),将 IndexedDB 当作磁盘,并以块存储形式将数据存储在

安装

yarn add @jlongster/sql.js absurd-sql

使用

absurd-sql必须以worker方式过行,这样对主线程不会产生阻塞,用法如下:

主线程代码:

import { initBackend } from 'absurd-sql/dist/indexeddb-main-thread';

function init() {
  let worker = new Worker(new URL('./index.worker.js', import.meta.url));
  initBackend(worker);
}

init();

index.worker.js

import initSqlJs from '@jlongster/sql.js';
import { SQLiteFS } from 'absurd-sql';
import IndexedDBBackend from 'absurd-sql/dist/indexeddb-backend';

async function run() {
  let SQL = await initSqlJs({ locateFile: file => file });
  let sqlFS = new SQLiteFS(SQL.FS, new IndexedDBBackend());
  SQL.register_for_idb(sqlFS);

  SQL.FS.mkdir('/sql');
  SQL.FS.mount(sqlFS, {}, '/sql');

  const path = '/sql/db.sqlite';
  if (typeof SharedArrayBuffer === 'undefined') {
    let stream = SQL.FS.open(path, 'a+');
    await stream.node.contents.readIfFallback();
    SQL.FS.close(stream);
  }

  let db = new SQL.Database(path, { filename: true });
  // You might want to try `PRAGMA page_size=8192;` too!
  db.exec(`
    PRAGMA journal_mode=MEMORY;
  `);

   // Your code
}

对于不支持'SharedArrayBuffer'的safar等浏览器,absurd-sql提供了Fallback mode模式

跨域设置如下:

Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp