Image

Ngorei

framework v4.0.2

Network
Render
Komponen
Exsampel

Storage

Network Storage adalah utilitas untuk mengelola penyimpanan data di sisi klien dengan interface yang seragam untuk IndexedDB, LocalStorage, SessionStorage, dan Cookies.

Inisialisasi Framework

Sebelum menggunakan fitur storage, kita perlu menginisialisasi framework Ngorei terlebih dahulu dengan membuat instance Network.

const Net=new Ngorei().Network();

IndexedDB

Penyimpanan data terstruktur dengan kapasitas besar dan mendukung operasi asynchronous. IndexedDB sangat cocok untuk menyimpan data kompleks dalam jumlah besar seperti data pengguna, catatan, atau file.

// Menambah data
Net.indexDB().add({
    key: "user1",
    data: {
        nama: "Budi",
        umur: 25,
        email: "budi@contoh.com"
    }
}).then(result => console.log(result));

// Mengambil data
Net.indexDB().get("user1")
    .then(result => console.log("Data:", result));

// Mengambil semua data
Net.indexDB().ref()
    .then(result => console.log("Semua data:", result));

// Update data
Net.indexDB().up("user1", {
    umur: 26  // hanya mengupdate umur
}).then(result => console.log("Data updated:", result));

// Hapus data
Net.indexDB().del("user1")
    .then(result => console.log("Hasil:", result));
        

LocalStorage

Penyimpanan data sederhana yang persisten, tersimpan tanpa batas waktu. Cocok untuk menyimpan preferensi pengguna, pengaturan aplikasi, atau data cache yang perlu bertahan meski browser ditutup.

// Menambah data
Net.localStorage().add({
    key: "preferences",
    data: {
        theme: "dark",
        language: "id"
    }
}).then(result => console.log(result));

// Operasi lainnya sama seperti IndexedDB
Net.localStorage().get("preferences");
Net.localStorage().ref();
Net.localStorage().up("preferences", { theme: "light" });
Net.localStorage().del("preferences");
        

SessionStorage

Mirip dengan LocalStorage, tetapi data akan hilang ketika tab/browser ditutup. Ideal untuk menyimpan data sementara seperti state form, data navigasi, atau informasi sesi pengguna yang bersifat temporer.


// Menambah data
Net.sessionStorage().add({
    key: "tempData",
    data: {
        lastPage: "/dashboard",
        timestamp: Date.now()
    }
}).then(result => console.log(result));

// Operasi lainnya sama seperti LocalStorage
Net.sessionStorage().get("tempData");
Net.sessionStorage().ref();
Net.sessionStorage().up("tempData", { lastPage: "/profile" });
Net.sessionStorage().del("tempData");
        

Cookies

Penyimpanan data yang bisa diatur masa berlakunya dan dikirim ke server pada setiap request. Sangat berguna untuk menyimpan token autentikasi, preferensi situs, atau data tracking yang perlu diakses oleh server.

// Menambah cookie dengan opsi
Net.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 dasar
Net.cookies().get("userPrefs");
Net.cookies().ref();
Net.cookies().up("userPrefs", { fontSize: "large" });
Net.cookies().del("userPrefs");
        

Fitur Tambahan

Semua tipe penyimpanan dilengkapi dengan method latest() untuk mengambil data berdasarkan timestamp terbaru. Fitur ini memudahkan dalam mengelola versi data dan sinkronisasi antar penyimpanan.

// Mengambil data dengan timestamp terbaru
    Net.indexDB().latest()
        .then(result => console.log(result));

    Net.localStorage().latest();
    
    Net.sessionStorage().latest();
    
    Net.cookies().latest();