Storage
Network Storage adalah utilitas untuk mengelola penyimpanan data di sisi
klien dengan interface yang seragam untuk IndexedDB, LocalStorage,
SessionStorage, dan Cookies.
Inisialisasi
Sebelum menggunakan fitur storage, kita perlu menginisialisasi framework Ngorei terlebih dahulu dengan membuat instance Network.
const NexaUI = new Ngorei().Network();
Persistent Storage
Penyimpanan data yang bersifat permanen sampai dihapus secara manual.
1. IndexedDB
Penyimpanan data terstruktur dengan kapasitas besar dan mendukung operasi asynchronous.
Ideal untuk:
- Data kompleks dalam jumlah besar
- Data pengguna
- Catatan aplikasi
- File dan media
// Menambah data
NexaUI.indexDB().add({
key: "user1",
data: {
nama: "Budi",
umur: 25,
email: "budi@contoh.com"
}
}).then(result => console.log(result));
// Mengambil data
NexaUI.indexDB().get("user1")
.then(result => console.log("Data:", result));
// Mengambil semua data
NexaUI.indexDB().ref()
.then(result => console.log("Semua data:", result));
// Update data
NexaUI.indexDB().up("user1", {
umur: 26 // hanya mengupdate umur
}).then(result => console.log("Data updated:", result));
// Hapus data
NexaUI.indexDB().del("user1")
.then(result => console.log("Hasil:", result));
Persistent Storage
Penyimpanan data yang bersifat permanen sampai dihapus secara manual.
2. LocalStorage
Penyimpanan key-value sederhana yang persisten.
Ideal untuk:
- Preferensi pengguna
- Pengaturan aplikasi
- Data cache jangka panjang
- State aplikasi
// Menambah data
NexaUI.localStorage().add({
key: "preferences",
data: {
theme: "dark",
language: "id"
}
}).then(result => console.log(result));
// Operasi lainnya
NexaUI.localStorage().get("preferences");
NexaUI.localStorage().ref();
NexaUI.localStorage().up("preferences", { theme: "light" });
NexaUI.localStorage().del("preferences");
Temporary Storage
Penyimpanan data yang bersifat sementara atau memiliki masa berlaku.
1. SessionStorage
Penyimpanan sementara yang terbatas pada sesi browser.
Ideal untuk:
- State form sementara
- Data navigasi
- Cache sesi pengguna
- Data temporary
// Menambah data
NexaUI.sessionStorage().add({
key: "tempData",
data: {
lastPage: "/dashboard",
timestamp: Date.now()
}
}).then(result => console.log(result));
// Operasi lainnya
NexaUI.sessionStorage().get("tempData");
NexaUI.sessionStorage().ref();
NexaUI.sessionStorage().up("tempData", { lastPage: "/profile" });
NexaUI.sessionStorage().del("tempData");
Temporary Storage
Penyimpanan data yang bersifat sementara atau memiliki masa berlaku.
2. Cookies
Penyimpanan data dengan masa berlaku yang dapat dikonfigurasi.
Ideal untuk:
- Token autentikasi
- Preferensi situs
- Data tracking
- Informasi sesi server-side
// Menambah cookie dengan opsi
NexaUI.cookies().add({
key: "userPrefs",
data: {
theme: "dark",
fontSize: "medium"
}
}, {
expires: 30, // berlaku 30 hari
path: '/',
secure: true,
sameSite: 'Lax'
}).then(result => console.log(result));
// Operasi lainnya
NexaUI.cookies().get("userPrefs");
NexaUI.cookies().ref();
NexaUI.cookies().up("userPrefs", { fontSize: "large" });
NexaUI.cookies().del("userPrefs");
Fitur Tambahan
Semua tipe penyimpanan dilengkapi dengan fitur tambahan untuk memudahkan pengelolaan data:
Latest Data
Method latest() tersedia untuk semua tipe storage untuk mengambil data berdasarkan timestamp terbaru.
Berguna untuk:
- Sinkronisasi data
- Versioning
- Audit trail
// Mengambil data terbaru
NexaUI.indexDB().latest()
.then(result => console.log(result));
NexaUI.localStorage().latest();
NexaUI.sessionStorage().latest();
NexaUI.cookies().latest();
Batasan & Karakteristik
Tipe Storage |
Kapasitas |
Persistensi |
IndexedDB |
>100MB |
Persisten |
LocalStorage |
5-10MB |
Persisten |
SessionStorage |
5-10MB |
Sesi |
Cookies |
4KB |
Configurable |