DAFTAR LABEL POPULER PENELITIAN.ID

Jangan Buka Artikel Ini!

Penyimpanan Data Lokal HTML Menggunakan localStorage DOM

Properti Window localStorage DOM pada HTML merupakan properti yang digunakan untuk memberikan ijin atau akses menyimpan nilai yang bersesuaian pada web browser menggunakan suatu object, dimana properti ini adalah properti yang bersifat read-only. Object yang telah disimpan menggunakan properti localStorage tidak akan mengalami expired meskipun browser tersebut telah ditutup atau di-close, sehingga data yang telah disimpan tersebut tidak akan hilang.

Return Values: berfungsi untuk mengembalikan sebuah nilai Storage object.


3 Sintak Properti localStorage DOM pada HTML
localStorage DOM HTML

Sintak:
  • menyimpan data ke localStorage: localStorage.setItem("key", "value");
  • membaca data dari localStorage: var name = localStorage.getItem("key");
  • menghapus data dari localStorage: localStorage.removeItem("key");

Baca Juga:

Contoh: melakukan Save, Read, dan Remove data dari localStorage.

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Window localStorage 

DOM pada HTML

</title>

 

<script>

// Menyimpan data secara lokal

function save() 

{

var fieldValue = document.getElementById('textfield').value;

 

localStorage.setItem('text', fieldValue);

}

 

// Membaca data

function get() 

{

var storedValue = localStorage.getItem('text');

 

if(storedValue) 

{

document.getElementById('textfield').value = storedValue;

}

 

}

 

// Menghapus data

function remove() 

{

document.getElementById('textfield').value = '';

 

localStorage.removeItem('text');

}

</script>

 

</head>

 

<body onload="get()">

 

<p1>

Ketik sesuatu pada teks field 

dan hasilnya akan disimpan 

secara lokal pada browser.

</p1>

 

<input 

type="text" 

id="textfield" />

 

<input 

type="button" 

value="save" 

onclick="save()" />

 

<input 

type="button" 

value="clear" 

onclick="remove()" />

 

<p2>

Ketika melakukan reload pada 

halaman ini, maka teks akan 

tetap berada pada posisi 

terebut.

</p2>

 

<p3>

<br>

Klik tombol untuk membersihkan data.

</p3>

 

</body>

 

</html>


Contoh: memeriksa tipe dan bentuk penyimpanan data.

<!DOCTYPE html>

<html>

 

<head>

<title>

Properti Window localStorage 

DOM HTML

</title>

</head>

 

<body>

 

<div id="SHOW"></div>

 

<script>

if(typeof(Storage) !== "undefined"

{

localStorage.setItem("name", "Mauludi");

 

document.getElementById("SHOW").innerHTML =

localStorage.getItem("name");

 

else 

{

document.getElementById("SHOW").innerHTML =

"YOUR BROWSER DOES NOT" + "SUPPORT LOCALSTORAGE PROPERTY";

}

</script>

 

</body>

 

</html>


Komentar

  1. Sebutkan enam jenis browser yang dapat digunakan untuk mengaktifkan properti window.localStorage Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut ini adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti window.localStorage Style DOM pada HTML:
      1. Google Chrome 4.0
      2. Internet Explorer 8.0
      3. Microsoft Edge 12.0
      4. Firefox 3.5
      5. Opera 10.5
      6. Safari 4.0

      Hapus
  2. Apa yang dimaksud dengan properti window.localStorage DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti window.localStorage DOM pada HTML merupakan properti yang bersifat read-only dari antarmuka window yang memungkinkan user untuk mengakses object storage yang berasal dari suatu dokumen, dimana datanya disimpan pada seluruh sesi browser.

      Hapus
    2. Properti localStorage merupakan properti yang mirip dengan sessionStorage, dimana perbedaannya adalah sessionStorage menyimpan data secara non permanen sedangkan localStorage adalah permanen.

      Hapus

Posting Komentar

Hubungi admin melalui Wa : +62-896-2514-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 ~

Postingan populer dari blog ini (30 Hari)

Specifier %d dan %i Bahasa C dan Fungsinya

Enkapsulasi Java dan Fungsinya

4 Kesalahan Umum yang Sering Terjadi pada PTK

Cara Membuat Drag and Drop pada HTML

Postingan populer dari blog ini (All Time)

Enkapsulasi Java dan Fungsinya

Komunitas