Properti length Storage DOM pada HTML merupakan properti yang digunakan untuk mengembalikan nilai angka dari item penyimpanan pada object storage. Object storage atau object penyimpanan terdiri dari localStorage atau sessionStorage.

Sebelum memahami lebih dalam materi tentang Mengatur Nilai Penyimpanan HTML Menggunakan Storage Length DOM, terlebih dahulu pelajari materi tentang: Membuat Kunci Penyimpanan HTML Menggunakan Storage Key DOM, Menghentikan Layar HTML Menggunakan Stop Window DOM, dan Mengatur Waktu HTML setTimeout dan setInterval Window DOM.

Sintak: object.length

Return Values: Digunakan untuk mengembalikan sebuah angka yang mengindikasikan nilai dari item saat ini pada Storage object.

Contoh: Penggunaan object localStorage.

<!DOCTYPE html>

<html>

<head>

<title>

Properti Storage length DOM

</title>

</head>

<body>

<h1

style="color: green">

Blog Elfan

</h1>

<b>

Properti Storage length DOM

</b>

<p>

Klik tombol berikut untuk

menambahkan atau membersihkan

item dan memeriksa nilai

angka saat ini dari item pada

localStorage.

</p>

<p>

Total Items:

</p>

<button

onclick="addItem(50)">

Add 50 items

</button>

<button

onclick="clearItems()">

Clear all items

</button>

<button

onclick="getStorageLength()">

Get Storage length

</button>

<div

class="items">

</div>

// Mengatur item.

function addItem(values)

{

for (i = 0; i < values; i++)

localStorage.setItem(i, 'item ' + i);

}

// Membersihkan item.

function clearItems()

{

localStorage.clear();

}

// Mengembalikan nilai angka dari item.

function getStorageLength()

{

totalItems = localStorage.length;

document.querySelector('.output').textContent =

totalItems;

}

</script>

</body>

</html>

Output:

Blog Elfan

Properti Storage length DOM

Klik tombol berikut untuk menambahkan atau membersihkan item dan memeriksa nilai angka saat ini dari item pada localStorage.

Total Items:

Contoh: Penggunaan object sessionStorage.

<!DOCTYPE html>

<html>

<head>

<title>

Properti Storage length DOM

</title>

</head>

<body>

<h1

style="color: green">

Blog Elfan

</h1>

<b>

Properti Storage length DOM

</b>

<p>

Klik tombol berikut untuk

menambah atau membersihkan

item dan memeriksa nilai

angka dari item pada

sessionStorage

</p>

<p>

Total Items:

</p>

<button

onclick="addItem(10)">

Add 10 items

</button>

<button

onclick="clearItems()">

Clear all items

</button>

<button

onclick="getStorageLength()">

Get Storage length

</button>

<div

class="items">

</div>

function addItem(values)

{

for (i = 0; i < values; i++)

sessionStorage.setItem(i, 'item ' + i);

}

function clearItems()

{

sessionStorage.clear();

}

function getStorageLength()

{

totalItems = sessionStorage.length;

document.querySelector('.output').textContent =

totalItems;

}

</script>

</body>

</html>

Output:

Blog Elfan

Properti Storage length DOM

Klik tombol berikut untuk menambah atau membersihkan item dan memeriksa nilai angka dari item pada sessionStorage

Total Items:

Baca Juga:

Penyimpanan pada aplikasi berbasis web menjadi aspek yang semakin penting seiring dengan perkembangan teknologi dan kebutuhan untuk menyimpan data dalam jangka panjang atau antar sesi pengguna. Dalam konteks ini, teknologi penyimpanan dalam halaman web, seperti penyimpanan lokal dan penyimpanan sesi, memainkan peran yang sangat penting. Salah satu metode yang digunakan untuk mengelola dan memanipulasi data di penyimpanan web adalah dengan menggunakan panjang penyimpanan yang tersedia di dokumen objek model (DOM).

Panjang penyimpanan, atau lebih tepatnya nilai dari panjang elemen yang tersimpan dalam objek penyimpanan, merujuk pada jumlah pasangan kunci-nilai yang ada dalam penyimpanan tersebut. Nilai panjang ini memberikan gambaran mengenai berapa banyak data yang telah disimpan, memungkinkan pengelolaan yang lebih baik terkait batasan penyimpanan yang ada. Dalam banyak hal, panjang penyimpanan ini sangat penting untuk mengetahui apakah masih ada ruang untuk menyimpan data tambahan atau apakah penyimpanan telah mencapai kapasitas maksimum.

Penyimpanan lokal adalah jenis penyimpanan yang memungkinkan data bertahan meskipun pengguna menutup atau memuat ulang halaman web. Data yang tersimpan dalam penyimpanan lokal tetap ada hingga pengguna menghapusnya secara manual atau hingga batas waktu tertentu yang ditentukan oleh pengembang. Dalam hal ini, panjang penyimpanan lokal mengacu pada jumlah pasangan kunci-nilai yang ada dalam penyimpanan tersebut, yang biasanya diakses melalui metode atau properti yang telah disediakan oleh teknologi web.

Sementara itu, penyimpanan sesi berfungsi serupa, tetapi dengan perbedaan mendasar bahwa data hanya akan ada selama sesi browser tersebut masih berlangsung. Begitu sesi berakhir, seluruh data yang ada dalam penyimpanan sesi akan dihapus. Penyimpanan sesi ini sering digunakan untuk menyimpan informasi yang hanya diperlukan dalam satu sesi saja, seperti status login atau pengaturan sementara. Dengan menggunakan panjang penyimpanan sesi, pengembang dapat memonitor berapa banyak data yang telah disimpan dalam sesi tersebut.

Dalam konteks penggunaan panjang penyimpanan ini, penting untuk memahami bagaimana nilai panjang dapat diubah dan bagaimana hal tersebut mempengaruhi pengelolaan data dalam aplikasi. Nilai panjang penyimpanan ini secara langsung mencerminkan jumlah elemen yang telah dimasukkan ke dalam penyimpanan tersebut. Oleh karena itu, setiap kali ada elemen baru yang disimpan, panjang penyimpanan akan bertambah, dan ketika ada elemen yang dihapus, panjang penyimpanan akan berkurang.

Panjang penyimpanan juga sangat berguna ketika aplikasi membutuhkan penanganan data dinamis, seperti saat menambah atau menghapus item dalam daftar atau perubahan status aplikasi yang disimpan dalam penyimpanan. Sebagai contoh, ketika pengguna memilih item untuk disimpan dalam aplikasi, panjang penyimpanan dapat digunakan untuk memastikan bahwa jumlah data yang disimpan tidak melebihi batas yang ditentukan. Jika panjang penyimpanan melebihi kapasitas yang telah ditetapkan, sistem dapat memberikan peringatan atau menolak penyimpanan data tambahan.

Dengan memantau panjang penyimpanan, pengembang dapat menciptakan aplikasi yang lebih efisien dan responsif. Peringatan atau kontrol berdasarkan panjang penyimpanan dapat membantu pengguna menghindari kesalahan dalam menyimpan data atau memastikan bahwa aplikasi berfungsi sesuai dengan harapan. Selain itu, panjang penyimpanan juga berfungsi untuk mengoptimalkan penggunaan ruang penyimpanan di perangkat pengguna. Dengan demikian, meskipun penyimpanan lokal dan sesi menawarkan kapasitas yang terbatas, pengelolaan panjang penyimpanan memungkinkan aplikasi untuk tetap beroperasi secara efisien tanpa membebani perangkat pengguna dengan data yang berlebihan.

Panjang penyimpanan ini juga memainkan peran penting dalam konteks pengujian aplikasi. Selama pengembangan aplikasi, pengembang sering kali perlu memastikan bahwa penyimpanan berfungsi dengan baik dan sesuai dengan batasan yang ada. Dengan memeriksa panjang penyimpanan secara rutin, pengembang dapat mengetahui apakah penyimpanan berfungsi dengan benar atau jika ada masalah terkait kapasitas penyimpanan yang perlu diperbaiki. Ini juga memungkinkan pengembang untuk mengevaluasi apakah penggunaan ruang penyimpanan dalam aplikasi sudah optimal, terutama dalam aplikasi dengan data yang besar.

Di samping itu, panjang penyimpanan juga dapat berfungsi sebagai indikator seberapa besar data yang digunakan dalam aplikasi. Misalnya, dalam aplikasi yang berfungsi sebagai penyimpan data sementara, pengembang mungkin ingin mengetahui berapa banyak informasi yang telah disimpan selama sesi berlangsung. Dengan memonitor panjang penyimpanan, pengembang dapat mengetahui apakah jumlah data yang disimpan sudah memenuhi kebutuhan aplikasi atau jika ada data yang tidak diperlukan lagi yang dapat dihapus untuk mengoptimalkan ruang penyimpanan.

Pengelolaan panjang penyimpanan tidak hanya terbatas pada menyimpan data, tetapi juga berhubungan dengan penghapusan data yang sudah tidak relevan. Pengguna mungkin menyimpan data dalam penyimpanan lokal atau sesi, namun tidak semua data tersebut akan tetap diperlukan di masa depan. Dengan memanfaatkan panjang penyimpanan, aplikasi dapat memberikan opsi kepada pengguna untuk menghapus data yang sudah tidak dibutuhkan, yang secara langsung dapat mengurangi panjang penyimpanan dan meningkatkan kinerja aplikasi secara keseluruhan.

Selain itu, panjang penyimpanan juga bisa digunakan untuk keperluan lain dalam pengembangan aplikasi berbasis web, seperti untuk mengontrol jumlah data yang diproses dalam satu waktu. Misalnya, aplikasi yang memproses data besar atau membutuhkan pengolahan data secara bersamaan dapat menggunakan panjang penyimpanan sebagai penanda batasan jumlah data yang bisa diproses dalam sekali waktu. Dengan cara ini, aplikasi dapat menghindari potensi penurunan kinerja yang dapat terjadi akibat beban data yang terlalu besar.

Pemahaman tentang panjang penyimpanan di dalam DOM sangat berguna untuk membangun aplikasi yang lebih efisien dan ramah pengguna. Pengelolaan yang baik terhadap penyimpanan memungkinkan aplikasi untuk tetap ringan, cepat, dan responsif, sekaligus memastikan bahwa data yang disimpan tetap relevan dan aman. Ketika pengembang memiliki kontrol penuh atas panjang penyimpanan, aplikasi dapat beroperasi dengan lebih efektif, memberikan pengalaman yang lebih baik bagi pengguna, serta memastikan bahwa penggunaan ruang penyimpanan dilakukan secara optimal dan efisien.

Panjang penyimpanan dalam DOM, meskipun sering dianggap sebagai aspek teknis yang tidak terlalu menonjol, ternyata memiliki dampak besar dalam merancang aplikasi yang stabil dan dapat diandalkan. Pengguna akan merasakan manfaatnya langsung dalam pengalaman menggunakan aplikasi yang lebih cepat, lebih ringan, dan tidak membebani perangkat dengan data yang tidak diperlukan. Oleh karena itu, pengelolaan panjang penyimpanan dengan cermat adalah salah satu keterampilan penting yang harus dimiliki oleh pengembang aplikasi berbasis web dalam rangka menciptakan solusi yang lebih baik dan lebih efisien.

Referensi Tambahan:

Artikel ini akan dibaca oleh: Putri Sriwardani, Rakhmat Purnan Ainal Yaqin, Regina Dinda Pramesti, Reska Dwi Oktaviani, dan Ridho Aditya Nugroho.

Location: Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Mengatur Nilai Penyimpanan HTML Menggunakan Storage Length DOM"

AnonimKamis, 13 Oktober 2022 pukul 07.29.00 WIB
Jenis browser apa saja yang dapat digunakan oleh programmer untuk mengaktifkan properti storage length DOM pada HTML?
BalasHapus
Balasan
AnonimSenin, 12 Desember 2022 pukul 20.23.00 WIB
Apa yang dimaksud dengan storage length DOM pada HTML?
BalasHapus
Balasan

Tambahkan komentar

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -

E-SISTEM:	Bahasa Pemrograman:
open_in_newE-RAPORT open_in_newE-PERPUS open_in_newE-LITERASI open_in_newE-KONSELING	open_in_newBahasa HTML open_in_newBahasa C open_in_newBahasa Java open_in_newBahasa C++
Materi Penelitian:	Administrasi Siswa:
open_in_newKlasifikasi Penelitian open_in_newPenelitian Tindakan Kelas open_in_newStatistika Penelitian open_in_newContoh Skripsi	open_in_newNilai dan Arsip open_in_newPerbaikan Data open_in_newKatalog Siswa open_in_newBuku Digital
Referensi Umum:	Magic
open_in_newMapel Informatika open_in_newLogo Instansi dan Organisasi open_in_newArtikel open_in_newTools dan Game	Mystery Box

PENELITIAN.ID

Mengatur Nilai Penyimpanan HTML Menggunakan Storage Length DOM

Blog Elfan

Blog Elfan

5 komentar untuk "Mengatur Nilai Penyimpanan HTML Menggunakan Storage Length DOM"

Menu Halaman Statis