Omdat SQLite Wasm wordt ondersteund door het oorspronkelijke privébestandssysteem, is er een veelzijdige vervanging voor de verouderde Web SQL-databasetechnologie. Dit artikel is een handleiding voor het migreren van uw gegevens van Web SQL naar SQLite Wasm.
Vereiste achtergrond
Het bericht Beëindiging en verwijdering van Web SQL kondigde de beëindiging van de Web SQL-databasetechnologie aan. Hoewel de technologie zelf misschien verouderd is, zijn de gebruiksscenario's die door de technologie worden aangepakt dat in hoge mate niet. Het vervolgbericht SQLite Wasm in de browser, ondersteund door het Origin Private File System , schetst een vervangende reeks technologieën gebaseerd op de SQLite- database , gecompileerd naar Web Assembly (Wasm) en ondersteund door het oorspronkelijke privébestandssysteem . Om de cirkel rond te maken, laat dit artikel zien hoe u databases kunt migreren van Web SQL naar SQLite Wasm.
Migreren van uw databases
De volgende vier stappen demonstreren het conceptuele idee van het migreren van een Web SQL-database naar SQLite Wasm, waarbij de SQLite-database wordt ondersteund door het oorspronkelijke privébestandssysteem. Dit kan dienen als basis voor uw eigen code, aangepast aan uw Web SQL-migratiebehoeften.
De te migreren Web SQL-database(s)
De basisaanname van deze migratiehandleiding is dat u een (of meerdere) bestaande Web SQL-databases heeft die gegevens bevatten die relevant zijn voor uw app. In de onderstaande schermafbeelding ziet u een voorbeelddatabase met de naam mydatabase met een regenbuientabel die stemmingen aan ernst toewijst. Met Chrome DevTools kunt u Web SQL-databases bekijken voor foutopsporing , zoals weergegeven in de volgende schermafbeelding.
Het vertalen van de Web SQL-database naar SQL-instructies
Om de gegevens te migreren op een manier die transparant is voor de gebruiker, dat wil zeggen zonder dat de gebruiker zelf een van de migratiestappen hoeft uit te voeren, moeten de gegevens in de database worden terugvertaald naar de oorspronkelijke SQL-instructies die de gegevens hebben gecreëerd. zij in de eerste plaats. Deze uitdaging is al eerder aan bod gekomen en het migratiescript dat in dit artikel wordt gebruikt mywebsqldump.js ) is gebaseerd op een gemeenschapsbibliotheek met de naam websqldump.js , met enkele kleine aanpassingen. Het volgende codevoorbeeld toont de code die nodig is om de Web SQL-database mydatabase te vertalen naar een set SQL-instructies.
websqldump.export({
database: 'mydatabase',
version: '1.0',
success: function(sql) {
// The SQL statements.
},
error: function(err) {
// Handle the error.
}
});
Het uitvoeren van deze code resulteert in de onderstaande SQL-instructiesreeks.
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');
Importeren van de gegevens in SQLite Wasm
Het enige dat overblijft is het uitvoeren van deze SQL-opdrachten in de context van SQLite Wasm. Voor alle details over het instellen van SQLite Wasm verwijs ik je naar het artikel SQLite Wasm in de browser ondersteund door het Origin Private File System , maar de essentie staat opnieuw hieronder. Houd er rekening mee dat deze code moet worden uitgevoerd in een Worker (die de bibliotheek automatisch voor u maakt), waarbij de vereiste HTTP-headers correct zijn ingesteld. U kunt het pakket @sqlite.org/sqlite-wasm installeren vanaf npm.
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);
}
})();
Nadat u deze code hebt uitgevoerd, inspecteert u het geïmporteerde databasebestand met de OPFS Explorer Chrome DevTools-extensie. Er zijn nu twee bestanden, één met de daadwerkelijke database en één met journaalinformatie. Merk op dat deze twee bestanden zich in het oorspronkelijke privébestandssysteem bevinden, dus u moet de OPFS Explorer-extensie gebruiken om ze te zien.
Om daadwerkelijk te verifiëren dat de geïmporteerde gegevens hetzelfde zijn als de initiële Web SQL-gegevens, klikt u op het bestand mydatabase.db . De OPFS Explorer-extensie zal een dialoogvenster Bestand opslaan weergeven waarin u het bestand kunt opslaan in het voor de gebruiker zichtbare bestandssysteem. Terwijl het databasebestand is opgeslagen, gebruikt u een SQLite-viewer-app om de gegevens te verkennen. De Project Fugu API Showcase beschikt over verschillende apps voor het werken met SQLite in de browser . Met Sqlime — SQLite Playground kunt u bijvoorbeeld een SQLite-databasebestand openen vanaf uw harde schijf en query's uitvoeren op de database. Zoals u in de onderstaande schermafbeelding ziet, is de rainstorm-tabel correct geïmporteerd in SQLite.
Web SQL-opslag vrijmaken
Hoewel het (misschien verrassend) onmogelijk is om een Web SQL-database te verwijderen , moet u toch wat opslagruimte vrijmaken door de nu verouderde Web SQL-tabellen te verwijderen nadat u de gegevens naar SQLite Wasm hebt gemigreerd. Om alle tabellen in een Web SQL-database weer te geven en deze te verwijderen met JavaScript, gebruikt u code zoals in het volgende fragment:
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);
}
};
Werken met de data na de migratie
Nadat u de gegevens hebt gemigreerd, werkt u met de gegevens zoals beschreven in dit codevoorbeeld Aan de slag . Zie de SQLite Wasm API-referentie voor meer informatie. Nogmaals een herinnering dat u toegang moet krijgen tot SQLite Wasm vanaf een werker als u het oorspronkelijke privébestandssysteem als uw opslagbackend gebruikt.
Test het uit
Met deze demo kunt u een Web SQL-database vullen met voorbeeldgegevens en vervolgens de Web SQL-gegevens dumpen als SQL-instructies, die vervolgens worden geïmporteerd in SQLite Wasm, ondersteund door het oorspronkelijke privébestandssysteem. Ten slotte maakt u opslagruimte vrij door de verouderde Web SQL-gegevens te verwijderen. Controleer de broncode voor de volledige implementatie, inclusief het gepatchte bestand mywebsqldump.js .
Conclusies
Het migreren van uw Web SQL-databases naar SQLite Wasm, ondersteund door het originele privébestandssysteem, is mogelijk op een manier die transparant is voor uw gebruikers. Ze zullen niet merken dat hun gegevens nu worden gehost in het oorspronkelijke privébestandssysteem in een SQLite-database, en niet langer in Web SQL leven. Over het algemeen is de migratie van Web SQL naar SQLite een noodzakelijke stap voor webontwikkelaars die de stabiliteit en schaalbaarheid van hun applicaties op de lange termijn willen garanderen. Hoewel het proces aanvankelijk enige inspanning kan vergen, maken de voordelen van een robuustere, flexibelere en vooral toekomstbestendige databaseoplossing het de investering zeker waard.