Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengatur Nilai Penyimpanan HTML Menggunakan Storage Length DOM

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.

2 Contoh Penggunaan Properti Storage Length DOM pada HTML
Properti Storage Length DOM

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 [klik], Menghentikan Layar HTML Menggunakan Stop Window DOM [klik], dan Mengatur Waktu HTML setTimeout dan setInterval Window DOM [klik].

Sintak:
Untuk mendapatkan properti Storage length: object.length

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

Baca Juga:

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: 

<span class="output"></span>

</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>

 

<script>

 

// 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:

<span class="output"></span>

</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>

 

<script>

 

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:


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

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

  1. Jenis browser apa saja yang dapat digunakan oleh programmer untuk mengaktifkan properti storage length DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut ini beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti storage length DOM pada HTML:
      1a. Google Chrome 4.0
      2b. Internet Explorer 8.0
      3c. Firefox 3.5
      4d. Opera 10.5
      5e. Safari 4.0

      Hapus
  2. Apa yang dimaksud dengan storage length DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti storage length DOM pada HTML merupakan properti yang digunakan untuk mendapatkan nilai dari jumlah item yang ada di dalam suatu objek penyimpanan browser.

      Hapus
    2. Properti length yang dimiliki oleh storage objek, juga dapat berupa objek localStorage atau objek sessionStorage.

      Hapus

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 -
- Big things start from small things -