Da SQLite Wasm durch das private Ursprungsdateisystem unterstützt wird, gibt es einen vielseitigen Ersatz für die veraltete Web SQL-Datenbanktechnologie. In diesem Artikel erfahren Sie, wie Sie Ihre Daten von Web SQL zu SQLite Wasm migrieren.
Erforderlicher Hintergrund
Im Beitrag Einstellung und Entfernung von Web SQL wurde die Einstellung der Web SQL-Datenbanktechnologie angekündigt. Auch wenn die Technologie selbst möglicherweise veraltet ist, sind die von der Technologie angewandten Anwendungsfälle im Wesentlichen nicht mehr verfügbar. In dem Folgebeitrag SQLite Wasm im Browser, der vom Origin Private File System unterstützt wird eine Reihe von Ersatztechnologien beschrieben, die auf der SQLite-Datenbank basieren, in Web Assembly (Wasm) kompiliert und durch das private Ursprungsdateisystem gestützt werden. Um den Kreis zu schließen, zeigt dieser Artikel, wie Datenbanken von Web SQL zu SQLite Wasm migriert werden.
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 Ursprungsservers gestützt wird. Dies kann als Grundlage für Ihren eigenen Code dienen, der auf Ihre Web SQL-Migrationsanforderungen zugeschnitten ist.
Die zu migrierenden Web SQL-Datenbanken
In dieser Migrationsanleitung gehen wir davon aus, dass Sie mindestens eine Web SQL-Datenbank haben, die für Ihre Anwendung relevante Daten enthält. Im folgenden Screenshot sehen Sie eine Beispieldatenbank namens mydatabase mit einer Tabelle mit Regenstürmen, die Stimmungen den Schweregraden zuordnet. Mit den Chrome-Entwicklertools können Sie sich Web SQL-Datenbanken zu Debugging-Zwecken ansehen, wie im folgenden Screenshot dargestellt.
Web SQL-Datenbank in SQL-Anweisungen übersetzen
Um die Daten auf eine Weise zu migrieren, die für den Benutzer transparent ist, d. h., ohne dass diese die Migrationsschritte selbst durchführen müssen, müssen die Daten in der Datenbank zurück in die ursprünglichen SQL-Anweisungen übersetzt werden, die sie erstellt haben. Diese Herausforderung gab es schon einmal. Das in diesem Artikel verwendete Migrationsskript mywebsqldump.js basiert auf einer Community-Bibliothek namens 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.
}
});
Das Ausführen dieses Codes führt zum unten stehenden SQL-Anweisungsstring.
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 finden Sie im Artikel SQLite Wasm im Browser, der vom privaten Dateisystem des Ursprungsservers unterstützt wird. Das Wesentliche ist noch einmal zu sehen. Denken Sie daran, dass dieser Code in einem Worker ausgeführt werden muss, der von der Bibliothek automatisch für Sie erstellt wird. Dabei müssen die erforderlichen HTTP-Header korrekt festgelegt sein. Sie können das Paket @sqlite.org/sqlite-wasm aus 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 den Code ausgeführt haben, überprüfen Sie die importierte Datenbankdatei mit der Chrome DevTools-Erweiterung OPFS Explorer. Es gibt jetzt zwei Dateien, eine mit der eigentlichen Datenbank und eine mit Journalinformationen. Beachten Sie, dass sich diese beiden Dateien im privaten Ursprungsdateisystem befinden. Sie müssen also die Erweiterung OPFS Explorer verwenden, um sie anzuzeigen.
Um zu überprüfen, ob die importierten Daten mit den ursprünglichen Web SQL-Daten übereinstimmen, klicken Sie auf die Datei mydatabase.db. In der OPFS Explorer-Erweiterung wird das Dialogfeld Datei speichern angezeigt, mit dem Sie die Datei in dem für den Nutzer sichtbaren Dateisystem speichern können. Verwenden Sie nach dem Speichern der Datenbankdatei eine SQLite Viewer-App, um die Daten zu untersuchen. In Project Fugu API Showcase finden Sie verschiedene 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-Speicherplatz freigeben
Es ist zwar (vielleicht überraschend) unmöglich, eine Web SQL-Datenbank zu löschen, Sie sollten dennoch etwas Speicherplatz freigeben, indem Sie die inzwischen veralteten Web SQL-Tabellen löschen, nachdem Sie die Daten in SQLite Wasm migriert haben. Um alle Tabellen in einer Web SQL-Datenbank aufzulisten und 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
Nach der Migration können Sie mit den Daten arbeiten, wie in diesem Codebeispiel zum Einstieg beschrieben. Einzelheiten finden Sie in der Referenz zur SQLite Wasm API. Wir möchten Sie noch einmal daran erinnern, dass Sie von einem Worker aus auf SQLite Wasm zugreifen müssen, wenn Sie das private Ursprungsdateisystem als Speicher-Back-End verwenden.
Jetzt testen
In dieser Demo können Sie eine Web SQL-Datenbank mit Beispieldaten füllen und die Web SQL-Daten dann als SQL-Anweisungen übertragen, die dann im Rahmen des privaten Dateisystems in SQLite importiert werden. Schließlich 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 mit dem privaten Dateisystem des Ursprungs ist für Ihre Nutzer transparent. Sie werden nicht bemerken, dass ihre Daten jetzt im privaten Ursprungsdateisystem einer SQLite-Datenbank und nicht mehr in Web SQL gehostet werden. 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. Der Prozess kann zwar einen anfänglichen Aufwand erfordern, aber aufgrund der Vorteile einer robusteren, flexiblen und vor allem zukunftssicheren Datenbanklösung lohnt sich die Investition.