Is it possible to access an SQLite database from JavaScript?

javascript

indexeddb

sql-js

local-storage

byAnton Shumikhin·Nov 15, 2024

Regrettably, for the sake of security, accessing an SQLite database from JavaScript directly within a browser environment is not possible. However, you can employ SQL.js, an effective workaround SQLite compiled into WebAssembly, which enables SQLite-like operations with JavaScript. Here's a quick example, with SQL.js acting as a SQLite fidget spinner for JavaScript:

// Load the baggage (SQL.js library)
<script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.5.0/sql-wasm.js"></script>

<script>
// Get the wheels running (Initialize and create an in-memory database)
initSqlJs({ locateFile: filename => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.5.0/${filename}` })
  .then(SQL => {
    let db = new SQL.Database(); // Our very own recipe shopping cart
    db.exec("CREATE TABLE test (col1, col2); INSERT INTO test VALUES (1,111), (2,222);"); // Our shopping list: columns 1 and 2
    let stmt = db.prepare("SELECT * FROM test WHERE col1 = ?"); // Pizza? Order based on column 1 (I hope it's cheese 🧀!)
    console.log(stmt.getAsObject({$col1:1})); // And the pizza delivery guy says: {col1:1, col2:111}
    stmt.free(); // Phew! Don't forget to relieve the pizza guy.
  });
</script>

For data persistence, resort to a server-side proxy, where JavaScript makes HTTP requests to interact with an SQLite database behind the scenes.

Client-side storage: HTML5 IndexedDB and SQL.js

SQL.js provides a fantastic way to giver users a SQLite-like experience in their browser. But why stop there? Modern web development embraces many other technologies! HTML5's IndexedDB, for instance, is a client-side storehouse for a sizeable chunk of structured data, including those juicy files and blobs 🔵🟠.

Considerations: Web SQL and its alternatives

As charming as Web SQL may seem, it's necessary to note that it's deprecating and its successor, IndexedDB, is taking the front seat. The W3C's decision to halt its maintenance hints at a series of support uncertainties in the foreseeable future.

If your scenarios demand offline capabilities, HTML5's local storage APIs, such as application manifest caching and session storage, can be your lifeline. These APIs are treasure chests 🎁 of potential, allowing offline data manipulation and fast webpage loads.

If you're a Node.js lover and enjoy server-side JavaScript, node-sqlite3 gives you direct access to SQLite databases.

Picking the right Storage: HTML5 storage APIs

In the HTML5 jungle, you need the right tool, or in this case, the appropriate storage API. Different storage APIs cater to varying needs, and choosing the correct one is essential for effective local data management:

localStorage: Great for simple, less secure, session-long storage.
sessionStorage: Lives as long as a single session.
IndexedDB: Brilliant for storing large amounts of structured data that remain persistent across sessions.
Web Workers: To perform complex database operations while keeping the UI shiny and smooth.

Community toolbox: Useful JavaScript libraries

The JavaScript ecosystem is a beehive 🐝 of tools buzzing with libraries that make SQLite interactions smooth and enjoyable:

Dexie.js: An IndexedDB wrapper that simplifies IndexedDB operations.
PouchDB: Great for handling offline data and online syncing.
LocalForage: An async localStorage-like API supporting IndexedDB, WebSQL, and localStorage.

explain-codes / Javascript / Is it possible to access an SQLite database from JavaScript?

Linked

Is it faster to access data from files or a database server?



When is localStorage cleared?



Local Storage vs Cookies



Sql Server 2008: How to query all databases sizes?



What is VanillaJS?

