Gunakan SQLite untuk menangani semua kebutuhan penyimpanan Anda secara optimal di web.
Tentang SQLite
SQLite merupakan model open-source, ringan, relasional tersemat sistem manajemen {i>database<i}. Banyak pengembang menggunakannya untuk menyimpan data di terstruktur dan mudah digunakan. Karena ukurannya yang kecil dan memorinya yang rendah persyaratan, SQLite sering kali dimanfaatkan sebagai mesin {i>database<i} di perangkat seluler, aplikasi desktop, dan {i>browser<i} web.
Salah satu fitur utama SQLite adalah database serverless, yang berarti tidak memerlukan proses server terpisah untuk beroperasi. Sebagai gantinya, {i>database<i} disimpan dalam satu file di perangkat pengguna, sehingga memudahkan diintegrasikan ke dalam aplikasi.
SQLite berdasarkan Web Assembly
Ada sejumlah versi SQLite tidak resmi berdasarkan Web Assembly (Wasm), mengizinkannya untuk digunakan di {i>browser<i} web, misalnya, sql.js. Tujuan Subproject WASM/JS plist3 adalah upaya pertama yang secara resmi terkait dengan Project SQLite membuat build Wasm dari library anggota keluarga dari hasil kerja SQLite yang didukung. Konkret tujuan dari proyek ini meliputi:
- Mengikat API NoSQL3 tingkat rendah yang sedekat mungkin dengan API C persyaratan penggunaan.
- API berorientasi objek dengan level lebih tinggi, lebih mirip dengan sql.js dan Penerapan gaya Node.js, yang berkomunikasi langsung dengan API tingkat rendah. API ini harus digunakan dari thread sebagai API level rendah.
- API berbasis Pekerja yang berkomunikasi dengan API sebelumnya melalui pesan Pekerja. Ini satu dimaksudkan untuk digunakan di thread utama, bersama API dengan level lebih rendah diinstal di thread Pekerja, dan berbicara dengan mereka melalui pesan Pekerja.
- Varian berbasis Promise dari Worker API yang sepenuhnya menyembunyikan aspek komunikasi lintas utas dari pengguna.
- Dukungan untuk penyimpanan sisi klien persisten yang menggunakan JavaScript API yang tersedia, termasuk {i>Origin Private File System<i} (OPFS).
Menggunakan SQLite Wasm dengan backend persistensi Origin Private File System
Menginstal library dari npm
Instal @sqlite.org/sqlite-wasm paket dari npm dengan perintah berikut:
npm install @sqlite.org/sqlite-wasm
Sistem File Pribadi Origin
{i>Origin Private File System<i} (OPFS, bagian dari File System Access API) dilengkapi dengan platform khusus yang menghadirkan akses yang sangat bagus ke data. Platform baru ini berbeda dari yang sudah ada dengan menawarkan akses tulis eksklusif dan langsung ke isi file. Perubahan ini, bersama dengan kemampuan untuk secara konsisten membaca perubahan yang tidak berubah dan ketersediaan varian sinkron di pekerja yang berdedikasi, meningkatkan performa secara signifikan, dan membuka blokir penggunaan baru penggunaan.
Seperti yang bisa Anda bayangkan, titik terakhir
dari tujuan proyek, Dukungan untuk
sisi klien persisten yang menggunakan JavaScript API yang tersedia, dilengkapi dengan
persyaratan kinerja yang ketat terkait
data yang dipertahankan ke file {i>database<i}.
Di sinilah sistem file {i>Origin Private File<i},
dan, lebih khusus lagi,
createSyncAccessHandle()
dari
FileSystemFileHandle
penggunaan objek. Metode ini menampilkan Promise yang di-resolve menjadi
FileSystemSyncAccessHandle
yang dapat digunakan untuk membaca
dan menulis ke file secara sinkron. Tujuan
sifat sinkron metode ini memberikan keunggulan kinerja, namun
hanya dapat digunakan di dalam
Web Worker untuk
file dalam Sistem File Pribadi Origin sehingga thread utama tidak dapat diblokir.
Menyetel header yang diperlukan
Di antara file lainnya, arsip Wasm SQLite yang didownload berisi sqlite3.js
dan sqlite3.wasm, yang membentuk build WASM/JS Catatan3. jswasm
berisi {i>deliverable<i} inti li33 dan direktori {i>top-level<i}
berisi aplikasi demonstrasi dan pengujian. Browser tidak akan menayangkan file Wasm dari
file://, jadi aplikasi apa pun yang Anda buat dengan ini memerlukan server web dan
server harus menyertakan header berikut dalam responsnya saat menyajikan
file:
Cross-Origin-Opener-Policyatur ke Perintahsame-origin, yang mengisolasi konteks penjelajahan secara eksklusif ke dokumen origin yang sama. Dokumen lintas asal tidak dimuat dalam konteks penjelajahan yang sama.Cross-Origin-Embedder-Policyatur ke Perintahrequire-corp, sehingga dokumen hanya dapat memuat resource dari asal yang sama atau secara eksplisit ditandai sebagai dapat dimuat dari asal lain.
Alasan {i>header<i} ini adalah bahwa SQLite Wasm bergantung pada
SharedArrayBuffer,
dan mengatur {i>header<i} ini adalah bagian dari
persyaratan keamanan.
Jika memeriksa traffic dengan DevTools, Anda akan menemukan hal berikut informasi:
Uji kecepatan
Tim SQLite telah menjalankan beberapa tolok ukur pada implementasi WebAssembly dibandingkan dengan Web SQL yang sudah tidak digunakan lagi. Tolok ukur ini menunjukkan bahwa SQLite Wasm umumnya secepat Web SQL. Terkadang sedikit lebih lambat, terkadang sedikit lebih cepat. Lihat semua detail di halaman hasil.
Memulai contoh kode
Seperti yang disebutkan sebelumnya, SQLite Wasm dengan Sistem File Pribadi Origin backend persistensi harus dijalankan dari konteks Pekerja. Kabar baiknya adalah library akan otomatis menangani semua ini untuk Anda dan langsung dari thread utama.
import { sqlite3Worker1Promiser } from '@sqlite.org/sqlite-wasm';
(async () => {
try {
console.log('Loading and initializing SQLite3 module...');
const promiser = await new Promise((resolve) => {
const _promiser = sqlite3Worker1Promiser({
onready: () => {
resolve(_promiser);
},
});
});
console.log('Done initializing. Running demo...');
let response;
response = await promiser('config-get', {});
console.log('Running SQLite3 version', response.result.version.libVersion);
response = await promiser('open', {
filename: 'file:worker-promiser.sqlite3?vfs=opfs',
});
const { dbId } = response;
console.log(
'OPFS is available, created persisted database at',
response.result.filename.replace(/^file:(.*?)\?vfs=opfs$/, '$1'),
);
await promiser('exec', { dbId, sql: 'CREATE TABLE IF NOT EXISTS t(a,b)' });
console.log('Creating a table...');
console.log('Insert some data using exec()...');
for (let i = 20; i <= 25; ++i) {
await promiser('exec', {
dbId,
sql: 'INSERT INTO t(a,b) VALUES (?,?)',
bind: [i, i * 2],
});
}
console.log('Query data with exec()');
await promiser('exec', {
dbId,
sql: 'SELECT a FROM t ORDER BY a LIMIT 3',
callback: (result) => {
if (!result.row) {
return;
}
console.log(result.row);
},
});
await promiser('close', { dbId });
} catch (err) {
if (!(err instanceof Error)) {
err = new Error(err.result.message);
}
console.error(err.name, err.message);
}
})();
Demo
Lihat cara kerja kode di atas dalam demo. Pastikan untuk memeriksa kode sumber di Glitch. Perhatikan bagaimana versi yang disematkan di bawah ini tidak menggunakan backend OPFS, tetapi ketika Anda membuka demo di tab terpisah.
Men-debug Sistem File Pribadi Origin
Untuk men-debug output Origin Private File System dari SQLite Wasm, gunakan Penjelajah OPFS ekstensi Chrome.
Setelah menginstal ekstensi, buka Chrome DevTools, pilih OPFS Explorer, kemudian Anda siap memeriksa apa yang ditulis SQLite Wasm ke Sistem File Pribadi Asal.
Jika Anda mengklik file mana pun di jendela OPFS Explorer di DevTools, dapat menyimpannya ke {i>disk <i}lokal. Anda kemudian dapat menggunakan aplikasi seperti Viewer SQLite untuk memeriksa database, sehingga Anda dapat pastikan bahwa SQLite Wasm benar-benar berfungsi seperti yang dijanjikan.
Mendapatkan bantuan dan memberikan masukan
SQLite Wasm dikembangkan dan dikelola oleh komunitas SQLite. Dapatkan bantuan dan memberikan umpan balik dengan menelusuri dan mempostingnya ke forum dukungan Anda. Lengkap documentation tersedia di situs SQLite.
Ucapan terima kasih
Banner besar oleh Tobias Fischer di Buka pembuka.