Mit SQLite Wasm, das vom privaten Dateisystem des Ursprungs unterstützt wird, gibt es einen vielseitigen Ersatz für die veraltete Web SQL-Datenbanktechnologie. Dieser Artikel enthält eine Anleitung zur Migration Ihrer Daten von Web SQL zu SQLite Wasm.
Erforderlicher Hintergrund
Im Blogpost Web SQL wird eingestellt und entfernt wurde die Einstellung der Web SQL-Datenbanktechnologie angekündigt. Auch wenn die Technologie selbst möglicherweise nicht mehr verfügbar ist, werden die von der Technologie behandelten Anwendungsfälle nicht so stark berücksichtigt. Daher wird im Folgebeitrag SQLite Wasm im Browser mit dem privaten Dateisystem des Ursprungsservers eine Reihe von Ersatztechnologien beschrieben, die auf der SQLite basieren, in Web Assembly (Wasm) kompiliert und durch das eigene private Dateisystem gestützt werden. Um den Kreis zu schließen, erfahren Sie in diesem Artikel, wie Sie Datenbanken von Web SQL zu SQLite Wasm migrieren.
Datenbanken migrieren
Die folgenden vier Schritte veranschaulichen die konzeptionelle Idee der Migration einer Web SQL-Datenbank zu SQLite Wasm, wobei die SQLite-Datenbank vom privaten Dateisystem des Ursprungs unterstützt wird. Dies kann als Grundlage für Ihren eigenen Code dienen, der an Ihre Web SQL-Migrationsanforderungen angepasst ist.
Die zu migrierenden Web SQL-Datenbanken
Die grundlegende Annahme dieses Migrationsleitfadens ist, dass Sie eine (oder mehrere) vorhandene Web SQL-Datenbanken haben, die für Ihre Anwendung relevante Daten enthalten. Im folgenden Screenshot sehen Sie eine Beispieldatenbank namens mydatabase mit einer Tabelle mit Regensturm, die Stimmungen den Schweregraden zuordnet. Mit den Chrome-Entwicklertools können Sie Web SQL-Datenbanken zur Fehlerbehebung aufrufen, wie im folgenden Screenshot dargestellt.
Web SQL-Datenbank in SQL-Anweisungen übersetzen
Um die Daten auf eine für den Nutzer transparente Weise zu migrieren, d. h., ohne dass der Nutzer einen der Migrationsschritte selbst ausführen muss, müssen die Daten in der Datenbank zurück in die ursprünglichen SQL-Anweisungen übersetzt werden, die sie ursprünglich erstellt haben. Diese Herausforderung trat bereits auf. Das in diesem Artikel verwendete Migrationsskript mywebsqldump.js basiert auf der Community-Bibliothek websqldump.js und enthält einige kleinere Anpassungen. Das folgende Codebeispiel zeigt den Code, der zum Übersetzen der Web SQL-Datenbank mydatabase in eine Reihe von SQL-Anweisungen erforderlich ist.
websqldump.export({
database: 'mydatabase',
version: '1.0',
success: function(sql) {
// The SQL statements.
},
error: function(err) {
// Handle the error.
}
});
Wenn Sie diesen Code ausführen, ergibt sich der folgende String für die SQL-Anweisungen.
CREATE TABLE IF NOT EXISTS rainstorms (mood text, severity int);
INSERT INTO rainstorms(mood,severity) VALUES ('somber','6');
INSERT INTO rainstorms(mood,severity) VALUES ('rainy','8');
INSERT INTO rainstorms(mood,severity) VALUES ('stormy','2');
Daten in SQLite Wasm importieren
Jetzt müssen Sie nur noch diese SQL-Befehle im Kontext von SQLite Wasm ausführen. Weitere Informationen zum Einrichten von SQLite Wasm up finden Sie im Artikel SQLite Wasm im Browser im Browser unterstützt durch das private Dateisystem des Ursprungsservers. Die wichtigsten Informationen finden Sie weiter unten. Denken Sie daran, dass dieser Code in einem Worker ausgeführt werden muss, der von der Bibliothek automatisch für Sie erstellt wird, wobei die erforderlichen HTTP-Header korrekt festgelegt sind. Sie können das Paket @sqlite.org/sqlite-wasm von npm installieren.
import { sqlite3Worker1Promiser } from '@sqlite.org/sqlite-wasm';
(async () => {
try {
const promiser = await new Promise((resolve) => {
const _promiser = sqlite3Worker1Promiser({
onready: () => {
resolve(_promiser);
},
});
});
let response;
response = await promiser('open', {
filename: 'file:mydatabase.db?vfs=opfs',
});
const { dbId } = response;
const sql = `
CREATE TABLE IF NOT EXISTS rainstorms (mood text, severity int);
INSERT INTO rainstorms(mood,severity) VALUES ('somber','6');
INSERT INTO rainstorms(mood,severity) VALUES ('rainy','8');
INSERT INTO rainstorms(mood,severity) VALUES ('stormy','2');`
await promiser('exec', { dbId, sql });
await promiser('close', { dbId });
} catch (err) {
if (!(err instanceof Error)) {
err = new Error(err.result.message);
}
console.error(err.name, err.message);
}
})();
Nachdem Sie diesen Code ausgeführt haben, prüfen Sie die importierte Datenbankdatei mit der Chrome DevTools-Erweiterung OPFS Explorer. Es gibt jetzt zwei Dateien, eine mit der tatsächlichen Datenbank und eine mit Journaling-Informationen. Beachten Sie, dass diese beiden Dateien im ursprünglichen privaten Dateisystem gespeichert sind, sodass Sie die Erweiterung OPFS Explorer verwenden müssen, um sie anzusehen.
Um tatsächlich zu überprüfen, ob die importierten Daten mit den ursprünglichen Web SQL-Daten übereinstimmen, klicke auf die Datei mydatabase.db. Die Erweiterung OPFS Explorer zeigt dann ein Dialogfeld Datei speichern an, in dem du die Datei im für den Nutzer sichtbaren Dateisystem speichern kannst. Verwenden Sie nach dem Speichern der Datenbankdatei eine SQLite-Viewer, um die Daten zu untersuchen. Das Project Fugu API Showcase bietet mehrere Apps für die Arbeit mit SQLite im Browser. Mit Sqlime – SQLite Playground können Sie beispielsweise eine SQLite-Datenbankdatei auf Ihrer Festplatte öffnen und Abfragen in der Datenbank ausführen. Wie Sie im Screenshot unten sehen, wurde die rainstorm-Tabelle korrekt in SQLite importiert.
Web SQL-Speicher freigeben
Es ist (vielleicht überraschend) nicht möglich, eine Web SQL-Datenbank zu löschen. Sie sollten dennoch Speicherplatz freigeben, indem Sie die inzwischen veralteten Web SQL-Tabellen löschen, nachdem Sie die Daten zu SQLite Wasm migriert haben. Um alle Tabellen in einer Web SQL-Datenbank aufzulisten und sie mit JavaScript zu löschen, verwenden Sie Code wie im folgenden Snippet:
const dropAllTables = () => {
try {
db.transaction(function (tx) {
tx.executeSql(
"SELECT name FROM sqlite_master WHERE type='table' AND name !='__WebKitDatabaseInfoTable__'",
[],
function (tx, result) {
const len = result.rows.length;
const tableNames = [];
for (let i = 0; i < len; i++) {
const tableName = result.rows.item(i).name;
tableNames.push(`'${tableName}'`);
db.transaction(function (tx) {
tx.executeSql('DROP TABLE ' + tableName);
});
}
console.log(`Dropped table${tableNames.length > 1 ? 's' : ''}: ${tableNames.join(', ')}.`);
}
);
});
} catch (err) {
console.error(err.name, err.message);
}
};
Nach der Migration mit den Daten arbeiten
Nachdem Sie die Daten migriert haben, arbeiten Sie mit den Daten, wie in diesem Codebeispiel für die ersten Schritte beschrieben. Weitere Informationen finden Sie in der Referenz zur SQLite Wasm API. Wir möchten Sie noch einmal daran erinnern, dass Sie über einen Worker auf SQLite Wasm zugreifen müssen, wenn Sie das private ursprüngliche Dateisystem als Speicher-Back-End verwenden.
Testen
In dieser Demo können Sie eine Web SQL-Datenbank mit Beispieldaten füllen und die Web SQL-Daten dann als SQL-Anweisungen speichern. Diese werden dann in SQLite Wasm importiert und vom privaten Ursprungsdateisystem gestützt. Zum Schluss geben Sie Speicherplatz kostenlos, indem Sie die veralteten Web SQL-Daten löschen. Die vollständige Implementierung, einschließlich der gepatchten Datei mywebsqldump.js, finden Sie im Quellcode.
Ergebnisse
Die Migration Ihrer Web SQL-Datenbanken zu SQLite Wasm, unterstützt durch das private Ursprungsdateisystem, ist für Ihre Nutzer auf transparente Weise möglich. Sie werden nicht bemerken, dass ihre Daten jetzt im ursprünglichen privaten Dateisystem in einer SQLite-Datenbank gehostet werden und nicht mehr in Web SQL gespeichert sind. Insgesamt ist die Migration von Web SQL zu SQLite ein notwendiger Schritt für Webentwickler, die die langfristige Stabilität und Skalierbarkeit ihrer Anwendungen sicherstellen möchten. Auch wenn der Prozess anfangs etwas erfordert, lohnt sich die Investition aufgrund der Vorteile einer robusteren, flexibleren und vor allem zukunftssicheren Datenbanklösung.