> ## Content Index
> Fetch the complete content index at: https://lintar.my.id/llms.txt
> Use this file to discover other available public pages before exploring further.

# Perjalanan Nyari Database buat Client-Side
- URL: https://lintar.my.id/perjalanan-nyari-database-buat-client-side/
- Published: 2025-09-09T07:52:53.000Z
- Updated: 2025-09-09T07:52:53.000Z
- Author: dev
- Tags: #Import 2026-08-27 23:08

Awalnya, aku cuma butuh **tempat nyimpen data di sisi client**. Simpel aja, nggak muluk-muluk. Pilihan pertama jatuh ke **LocalStorage**.

### LocalStorage: Mudah tapi Terbatas

LocalStorage enak buat quick start:

- Tinggal `localStorage.setItem()` dan `getItem()`, beres.
- Bisa dipakai langsung tanpa setup macam-macam.

Tapi makin ke sini, makin kerasa batasannya:

- Kapasitas terbatas, biasanya cuma beberapa MB.
- Data disimpan sebagai string, jadi kalau mau nyimpen data kompleks agak ribet.
- Nggak ada query atau relasi data—jadi kalau butuh filter/filter-an agak susah.

Singkatnya: **LocalStorage cocok buat hal kecil, tapi nggak scalable**.

---

### IndexedDB: Powerful tapi Ribet

Solusi "next level"-nya biasanya **IndexedDB**:

- Bisa nyimpen data dalam jumlah besar.
- Bisa simpan object lebih kompleks.

Tapi begitu coba… API-nya ribet 😅

- Banyak callback dan event handler.
- Syntax nggak "straightforward" kayak SQL.
- Query data rumit jadi bikin pusing.

> "Kenapa nggak pakai sesuatu yang lebih familiar, kayak SQL, tapi tetap bisa jalan di client?"

---

## SQLite + sql.js

Akhirnya nemu solusi: **SQLite di browser** lewat **sql.js** (SQLite yang dikompilasi ke WebAssembly).

Enaknya:

- Bisa query pakai **SQL asli** (`SELECT`, `INSERT`, `UPDATE`, dll).
- Data bisa disimpan di memori atau diexport/import ke file.
- Familiar bagi yang biasa pakai SQL di backend.

### Contoh Kode sql.js

```javascript
import initSqlJs from "sql.js";

async function runDemo() {
  const SQL = await initSqlJs({
    locateFile: file => `https://sql.js.org/dist/${file}`
  });

  const db = new SQL.Database();

  db.run("CREATE TABLE users (id INTEGER PRIMARY KEY, name TEXT, age INTEGER);");
  db.run("INSERT INTO users (name, age) VALUES (?, ?);", ["Alice", 25]);
  db.run("INSERT INTO users (name, age) VALUES (?, ?);", ["Bob", 30]);

  const result = db.exec("SELECT * FROM users;");
  console.log(result[0]);
}

runDemo();

```

## PGlite: PostgreSQL di Browser 🚀

Selain sql.js, aku baru nemu **PGlite** ([pglite.dev](https://pglite.dev/?ref=lintar.my.id)) yang memungkinkan menjalankan **PostgreSQL di browser** via WebAssembly.

Keunggulan:

- SQL standar, mirip PostgreSQL.
- Bisa offline-first, berjalan di browser, Node.js, Bun, atau Deno.
- Mendukung ekstensi PostgreSQL dan opsi penyimpanan persisten (IndexedDB di browser atau file di Node).

### Contoh Penggunaan PGlite

```javascript
import { PGlite } from '@electric-sql/pglite'

const db = new PGlite();

// Membuat tabel
await db.exec(`
  CREATE TABLE IF NOT EXISTS users (
    id SERIAL PRIMARY KEY,
    name TEXT,
    age INTEGER
  );
`);

// Menambahkan data
await db.exec(`
  INSERT INTO users (name, age) VALUES
  ('Alice', 30),
  ('Bob', 25);
`);

// Mengambil data
const result = await db.query('SELECT * FROM users;');
console.log(result.rows);

```

- Untuk info lengkap dan dokumentasi: [pglite.dev](https://pglite.dev/docs?ref=lintar.my.id)

---

## Kesimpulan

Perjalanan singkatnya:

- **LocalStorage** → gampang, tapi terbatas.
- **IndexedDB** → powerful, tapi ribet.
- **SQLite via sql.js** → enak, SQL langsung di browser.
- **PGlite** → opsi baru yang menjanjikan, PostgreSQL di browser, offline-friendly, masih tahap eksplor.

## Catatan

Tunggu update berikutnya! Nanti aku bakal buat **tutorial lebih lengkap** untuk:

- Menyimpan data di sql.js
- Export/import database
- Eksperimen dengan PGlite di browser

Jadi, ini masih versi **pengenalan dan perbandingan** dulu. Tutorial langkah-demi-langkah akan menyusul setelah aku eksplor PGlite lebih dalam.