Doc Esensial Storage Sessionstorage

Pendahuluan

NexaStorage adalah pustaka manajemen penyimpanan yang menyediakan akses terpadu ke berbagai mekanisme penyimpanan di browser: IndexDB, LocalStorage, Cookies, dan SessionStorage.

// Inisialisasi
const storage = NexaUI.Storage();

Penyimpanan IndexDB

IndexDB adalah sistem database di browser yang memungkinkan penyimpanan data dalam jumlah besar secara terstruktur.


// Mendapatkan instance IndexDB
const indexDB = storage.getIndexDB();

add(row) - Menambah Data

Fungsi untuk menambahkan data baru ke dalam IndexDB.

Parameter:

row.key (String): Kunci unik untuk data
row.data (Object): Data yang akan disimpan


// Contoh penggunaan
await indexDB.add({
    key: 'pengguna123',
    data: { 
        nama: 'Budi',
        umur: 30,
        email: 'budi@contoh.com'
    }
});

get(key) - Mengambil Data

Fungsi untuk mengambil data berdasarkan kunci.

Parameter:

key (String): Kunci data yang akan diambil


// Contoh penggunaan
const data = await indexDB.get('pengguna123');
console.log(data); // Menampilkan data pengguna

ref() - Mengambil Semua Data

Fungsi untuk mengambil seluruh data yang tersimpan di IndexDB.


// Contoh penggunaan
const semuaData = await indexDB.ref();
console.log(semuaData); // Menampilkan semua data

up(key, newData) - Memperbarui Data

Fungsi untuk memperbarui data yang sudah ada.

Parameter:

key (String): Kunci data yang akan diperbarui
newData (Object): Data baru untuk pembaruan


// Contoh penggunaan
await indexDB.up('pengguna123', {
    umur: 31,
    alamat: 'Jakarta'
});

del(key) - Menghapus Data

Fungsi untuk menghapus data dari IndexDB.

Parameter:

key (String): Kunci data yang akan dihapus


// Contoh penggunaan
await indexDB.del('pengguna123');
// Data pengguna telah dihapus

latest() - Mendapatkan Data Terbaru

Fungsi untuk mengambil data yang terakhir kali diperbarui di IndexDB berdasarkan timestamp updated_at.


// Contoh penggunaan
const dataTerbaru = await indexDB.latest();
console.log(dataTerbaru); // Menampilkan data yang terakhir diperbarui

Return Value:

Object: Data terbaru berdasarkan timestamp updated_at
null: Jika tidak ada data dalam IndexDB

Penyimpanan Lokal

Penyimpanan Lokal memungkinkan Anda menyimpan data secara permanen di browser pengguna. Data akan tetap tersimpan meskipun browser ditutup.


// Mendapatkan instance LocalStorage
const localStorage = storage.getLocalStorage();

add(row) - Menambah Data

Fungsi untuk menambahkan data baru ke Penyimpanan Lokal.

Parameter:

row.key (String): Kunci unik untuk data
row.data (Object): Data yang akan disimpan


// Contoh penggunaan
await localStorage.add({
    key: 'pengaturan',
    data: { 
        tema: 'gelap',
        ukuranFont: 14,
        bahasa: 'id'
    }
});

get(key) - Mengambil Data

Fungsi untuk mengambil data dari penyimpanan lokal.

Parameter:

key (String): Kunci data yang akan diambil


// Contoh penggunaan
const dataPengaturan = await localStorage.get('pengaturan');
console.log(dataPengaturan); // Menampilkan pengaturan pengguna

ref() - Mengambil Semua Data

Fungsi untuk mengambil seluruh data dari penyimpanan lokal.


// Contoh penggunaan
const semuaDataLokal = await localStorage.ref();
console.log(semuaDataLokal); // Menampilkan semua data lokal

up(key, newData) - Memperbarui Data

Fungsi untuk memperbarui data yang ada di penyimpanan lokal.

Parameter:

key (String): Kunci data yang akan diperbarui
newData (Object): Data baru untuk pembaruan


// Contoh penggunaan
await localStorage.up('pengaturan', {
    tema: 'terang',
    notifikasi: true
});

del(key) - Menghapus Data

Fungsi untuk menghapus data dari penyimpanan lokal.

Parameter:

key (String): Kunci data yang akan dihapus


// Contoh penggunaan
await localStorage.del('pengaturan');
// Pengaturan telah dihapus

latest() - Mendapatkan Data Terbaru

Fungsi untuk mengambil data yang terakhir kali diperbarui di penyimpanan lokal.


// Contoh penggunaan
const dataTerbaru = await localStorage.latest();
console.log(dataTerbaru); // Menampilkan data yang terakhir diperbarui

Penyimpanan Cookies

Cookies memungkinkan penyimpanan data kecil yang dapat diakses oleh server dan browser. Cocok untuk menyimpan data sesi, preferensi pengguna, dan data tracking.


// Mendapatkan instance Cookies
const cookies = storage.getCookies();

add(row, options) - Menambah Data Cookie

Fungsi untuk menambahkan data baru ke dalam Cookie dengan pengaturan tambahan.

Parameter:

row.key (String): Kunci unik untuk cookie
row.data (Object): Data yang akan disimpan
options (Object): Pengaturan tambahan
- expires (Number): Masa berlaku dalam hari
- secure (Boolean): Hanya HTTPS
- sameSite (String): Pembatasan cookie


// Contoh penggunaan
await cookies.add({
    key: 'sesi_login',
    data: { 
        token: 'abc123',
        level: 'admin'
    }
}, {
    expires: 7,  // Berlaku 7 hari
    secure: true // Hanya HTTPS
});

get(key) - Mengambil Data Cookie

Fungsi untuk mengambil data dari cookie.

Parameter:

key (String): Kunci cookie yang akan diambil


// Contoh penggunaan
const dataCookie = await cookies.get('sesi_login');
console.log(dataCookie); // Menampilkan data sesi login

ref() - Mengambil Semua Data Cookie

Fungsi untuk mengambil seluruh data yang tersimpan dalam cookies.


// Contoh penggunaan
const semuaCookie = await cookies.ref();
console.log(semuaCookie); // Menampilkan semua data cookie

up(key, newData, options) - Memperbarui Data Cookie

Fungsi untuk memperbarui data yang sudah ada dalam cookie.

Parameter:

key (String): Kunci cookie yang akan diperbarui
newData (Object): Data baru untuk pembaruan
options (Object): Pengaturan tambahan untuk cookie


// Contoh penggunaan
await cookies.up('sesi_login', {
    level: 'superadmin',
    lastLogin: Date.now()
}, {
    expires: 1, // Berlaku 1 hari
    secure: true
});

del(key, options) - Menghapus Cookie

Fungsi untuk menghapus cookie berdasarkan kunci.

Parameter:

key (String): Kunci cookie yang akan dihapus
options (Object): Pengaturan tambahan untuk penghapusan


// Contoh penggunaan
await cookies.del('sesi_login', {
    path: '/',
    secure: true
});
// Cookie sesi login telah dihapus

latest() - Mendapatkan Cookie Terbaru

Fungsi untuk mengambil cookie yang terakhir kali diperbarui.


// Contoh penggunaan
const cookieTerbaru = await cookies.latest();
console.log(cookieTerbaru); // Menampilkan cookie yang terakhir diperbarui

Penyimpanan Sesi

Penyimpanan Sesi menyimpan data selama sesi browser aktif dan akan terhapus secara otomatis saat browser ditutup. Cocok untuk menyimpan data sementara seperti form yang belum selesai diisi.


// Mendapatkan instance SessionStorage
const sessionStorage = storage.getSessionStorage();

add(row) - Menambah Data Sesi

Fungsi untuk menambahkan data sementara ke dalam sesi browser.

Parameter:

row.key (String): Kunci unik untuk data sesi
row.data (Object): Data yang akan disimpan


// Contoh penggunaan
await sessionStorage.add({
    key: 'form_sementara',
    data: { 
        langkah: 1,
        dataForm: {
            nama: 'Budi',
            email: 'budi@contoh.com'
        }
    }
});

get(key) - Mengambil Data Sesi

Fungsi untuk mengambil data dari penyimpanan sesi.

Parameter:

key (String): Kunci data yang akan diambil


// Contoh penggunaan
const dataSesi = await sessionStorage.get('form_sementara');
console.log(dataSesi); // Menampilkan data form sementara

ref() - Mengambil Semua Data Sesi

Fungsi untuk mengambil seluruh data yang tersimpan dalam sesi.


// Contoh penggunaan
const semuaDataSesi = await sessionStorage.ref();
console.log(semuaDataSesi); // Menampilkan semua data sesi

up(key, newData) - Memperbarui Data Sesi

Fungsi untuk memperbarui data yang sudah ada dalam sesi.

Parameter:

key (String): Kunci data yang akan diperbarui
newData (Object): Data baru untuk pembaruan


// Contoh penggunaan
await sessionStorage.up('form_sementara', {
    langkah: 2,
    dataForm: {
        alamat: 'Jl. Contoh No. 123',
        kota: 'Jakarta'
    }
});

del(key) - Menghapus Data Sesi

Fungsi untuk menghapus data dari penyimpanan sesi.

Parameter:

key (String): Kunci data yang akan dihapus


// Contoh penggunaan
await sessionStorage.del('form_sementara');
// Data form sementara telah dihapus

latest() - Mendapatkan Data Terbaru

Fungsi untuk mengambil data yang terakhir kali diperbarui dalam sesi.


// Contoh penggunaan
const dataTerbaru = await sessionStorage.latest();
console.log(dataTerbaru); // Menampilkan data yang terakhir diperbarui